SCAFFLINQ
How can we improving a mobile app and web portal experience for scaffolders using UX Research, User Interviews and more...
INTRODUCTION
My Roles:
UX/UI Designer, UX Researcher
Sector:
Construction, Design, Safety Management
Tools Used:
Figma, Figjam, Jira and Dovetail
Duration:
1 months
Context
Scafflinq is a scaffolding management software that provides better safety and efficiency for scaffolding organisation. It replaces the current method of scaffold management (manual written scaffold cards) to a QR scan that allows users to know who, what, where and how the scaffold is being managed.
Problem
As Scafflinq is starting to move from staging to production, the client wants to validate the current design to make sure it achieves the product goal they are looking for. In addition, they want to redesign the current web portal to reflect a more modern look to other websites.
Solution
Clean designs for mobile app
Provide users with a better and clean look to understand what is interactable and what is not.
Improvement in CTA and list view placements for user’s interaction and recognition.
Improve upon the existing user flows for better management system that is in place.
Provide more coherent list view
Modernising and applying UX design principles in place makes the data analysis and overall scaffolding management better for the user.
Provide more coherent statuses for orders and invoices which decreases clutter for users.
Our Process
RESEARCH (MOBILE + WEB PORTAL)
Competitor analysis
From our understanding from the client and our own research, there doesn’t seem to be any comparable offers. Though there are other scaffolding management companies that provide manual scaffold management services, the digitasation of it has not been done before.
Opportunities
Flexibility in Scaffolding Management
Individual scaffold managers do not need to rely on manual methods of maintaining scaffold safety. By allowing users to use a simple QR scan, they are offered more flexibility in how they can manage their scaffoldings.
Easier Scaffolding Management
As stated before most scaffold managers use manual means such as excel spreadsheets or other tools to manage the safety of the scaffolds. Providing an digitised method of this management means less missed scaffolding = less accidents caused by scaffoldings.
Better Safety for All
By allowing the Scafflinq app to notify users of unsafe scaffoldings beforehand, it will lessen accidents caused by scaffoldings.
Challenges
Infrastructure Consideration
How would this app work if they are in a area without a stable Wi-Fi connection? This would be a difficult problem to solve and may not even be mentioned.
Acceptance from Users
As majority of the scaffolders are from the older generation, there may be a chance of technology illiteracy, which may cause frustration with some users.
DEFINE (MOBILE)
UX Audit & Findings for Mobile App
After discussing the project requirements with the PO, PM and the client, I moved onto analysing and understanding the current flow and design of the mobile app. This allowed me to understand the overall product and what sections need work. Here are some of my findings…
Inconsistency in design elements
Most noticeable was the difference styles of CTA being used in the app. Why is this different?
There might be slight confusion by the users by providing them different designs.
Outdated designs for list views and project views
The UI of the project list view and inspection list view is confusing as its clustered into one box.
How would users know if these lists are interactable or not? And if it is interactable, how are they showing this?
Field Interview
Once reviewed the Hi-Fi design, it was time to find candidates for a user testing session. During this process we interviewed and user tested with the following…
2 scaffolding management companies
In-house Senior UX Designer and Junior UX Designer
Field Interview Findings
Australian Standards for Scaffold Details
As the interviewees were going through the app, many of them mentioned that the scaffold details screens are missing details that are crucial to the standards that all scaffolders need to follow according to the NSW Law.
Button Placement
Many of the interviewees were confused about the placement or the location of the CTAs. This is a clear result of previous designs having buttons on the top, not at the bottom.
Payment
The app currently has a paywall that cannot be dismissed by users if they do not have a premium membership. The addition of this feature would help the users.
Minor Bugs
In addition to the major design changes, there were minor bugs that were mentioned by the users, which became evident throughout this user testing.
Reporting Scaffolds
We were missing a key function for the mobile app where the users should be able to file a report about a certain scaffold, which would then be sent to the company admin on the web portal for managing it.
Insight Organisation
To better understand and organise the findings we got from the field interview, we used Dovetail to tag issues and create boards for better clarity.
Heuristic Evaluation
Here are some of the heuristics that were broken in the app…
Show information in a way a user understands
Match between the system and the real world
Recognition rather than recall
Aesthetics and minimalist designs
IDEATION & DESIGN (MOBILE)
Insight Priorities
Now that we have a further understanding of the missing elements from the current Hi-Fi design, it was time to implement these. Our design priorities from the highest to lowest were...
Changing the scaffolding detail screen to better suit the timeline structure & following the Australian Standards
Iconography changes and list view update
Report issue CTA to call scaffolders on site
Change sign-up flow for a better user sign-up rate
Minor bug changes (missing error states and more...)
This insight was used to drive further improvement to the app.
Final Product Overview
Updating UI for project list views
Updated project list view to further reflect a modern take on current mobile apps.
Including preview details for easier visual processing.
Solves recognition vs. recall for heuristics
Following Australian Standards
The ‘Scaffolding Details’ Screen has now been updated in accordance with the Australian Standards for scaffold management.
Adding who, what, where and how of scaffold management for better details.
Improving CTA, list view, and more
With the addition of new sections to the ‘Scaffolding Detail’ screen came several improvements for UI and UX.
More prominent CTA to understand what each of them do.
Users are now able to report issues through the ‘Scaffolding Detail’ screen.
Solved Aesthetics & minimalistic design + consistency & standards for heuristics.
Inspiration & Lo-Fi Designs
To start off, we looked through different inspirations and derived a Lo-Fi design through the comparison of the current app vs. other apps.
Checklist for our inspirations
How can we achieve a clean UI while maintaining the functionality of the app?
The use of iconography or imagery to signify individual list content within the app.
The use of prominent CTAs to reflect our current app.
List view changes
Making them individual boxes rather than one single box separated by dividers.
Provides better clarity.
Scaffold detail screen
More spaces for scaffolding management details.
Bigger imagery and iconography potential added into Lo-Fi.
Separating list views
Edits and UI revisits to CTA implementation for project screens.
DEFINE (WEB PORTAL)
UX Audit & Findings for Web Portal
Once the design for the mobile app was finalised with the clients approval, we moved onto the UI revamp for the current web portal to something that is simplified and more usable. The original web portal design was good enough for getting the core functionality across to its users, but there obvious issues with the designs including its list view, profile settings and more.I started the UI revamp by looking at the current design and comparing it to different inspirations I found across other sites.
Design inconsistencies and missing elements
No determined navigation was given in the web portal, which needed to be solved with PO and PM.
Spacing issues with the content
Outdated list view which doesn’t show interactability.
Can we compact this data to provide better readability for users?
Profile setting page feels empty
The content spacing and the profile seemed quite empty and meaningless.
How can we provide subscription insights or personal detail insights better for users?
User Testing
Though there wasn’t much time available around this segment of the project, I conducted a user testing with 2 Senior UX Designers to gain further understanding and findings about the issues with this web portal.
User Testing Findings
Poor Data Presentation
The Senior Designers also had difficulty trying to understand the list views and what it is trying to convey. Most of this was caused by the unusual spacing shown in the current design.
Missing Prominent Functions
There are significant functions missing on the list view such as filtering and tabs, which would help with usability and sorting of a potentially massive data. Having the search function on the top-right corner also didn’t help with this as well.
IDEATION & DESIGN (WEB PORTAL)
Insight Priorities
Now that we have a further understanding of the missing elements from the current Hi-Fi design, it was time to implement these. Our design priorities from the highest to lowest were...
Redesign the list view to more accurately show data and to lean toward a more modern look
Adding functions required for the web portal.
Fixing the spacing issue present throughout the web portal.
This insight was used to drive further improvement to the web portal.
Inspiration & Lo-Fi Designs
To start off, we looked through different inspirations and derived a Lo-Fi design through the comparison of the current web portal vs. others.
Insight Implementation (Hi-Fi)
More compact and informing list view
Improving the navigation with better iconography and readability.
More compact list view with a well-balanced data showcase.
Further improvement on user profile settings.
Spacing issues and exploration of how users can navigate the settings.
Iconography to signify subscription impact and add more details.
Improved list and status
Compact and more information in one place.
A better status indication that is more prominent than before.
The search bar and filtering functions are more prominent now.
Client Feedback for Further Iteration
Profile Rework Required
The clients were not happy with the Profile as there weren’t significant changes made to it to justify the redesign. We received good feedback on it to work on it further.
Color and Typography Change
The clients wanted to change the branding for the web portal while keeping it the same for the mobile app. Though it was a weird request at the time, we obliged.
Further Modernisation
The client was not satisfied with the modernisation given with the redesign and wanted to change aspects such as tab design to something more closely resembling a pill.
Final Product Overview
CONCLUSION
Thoughts on Scafflinq
Scafflinq brings the idea of modernising the old ways of management into reality. With the help of the clients and fellow scaffolders, this project became an amazing success overall in terms of execution and design.
With this advancement, we will hopefully see many benefits it would bring such as...
Improved safety
Better tracking and reporting
Increased efficiency
Increased collaboration
Enhanced mobility
With More Time
Quantitative and Qualitative research at the beginning along with the client workshop would have given us more insights into the issue at hand.
Further exploration of design concepts and pathways using Personas, Journey Maps and more. There was a lack of these at the beginning of the project, which should have been used.
More testing on the old and redesigned app/web.
Further iterations.
Project Successes
Here are some successes for this project…
Providing standardised design system/components to ensure design consistency.
Achieving SUS score of 82 with the new mobile design.
Market Scafflinq to potential scaffold management firms through interviews.
Learnings
#1 Expect the unexpected
The client's decision to completely remove the branding and or certain designs were a huge curveball when it came to redesigning the web portal. Though this wasn’t a drastic change, it was much of a surprise to us and the other designers included.
#2 Research, research and research more
Though the research element was limited due to the time-constraints and the client wanting this app on production as quickly as possible, we cannot neglect the importance of research even if its small. I would gladly throw myself into a full on research role if time permits it.
#3 Organising designs through user stories
Applying user stories to organise my design was a massive help when it came to big projects like this. Understanding what designs are being created without the need to reference the user journey every time was amazing. I would love to implement this into my own designs in the future too.