End-to-End Redesign for a Mobile-First Construction Safety Product
Time-on-Task
I reduced the time it took users to complete critical tasks like managing clients, crews and filling out forms.
Retention Rate
With reliable performance and integrating HQ Suite branding into the product, we increased the likelihood of client retention.
Brand Recognition
The HQ Suite of back-office construction project management products is in a better position in the market with SafetyHQ looking the part.
problems
Multiple factors made SafetyHQ feel like the odd one out
Suffering from poor performance, long build times, crashes, an unreliable Wordpress backend and a disjointed UI outside of the HQ Suite paradigm, it was decided that SafetyHQ needed a complete overhaul.
Despite having a 93% retention rate, it was just too risky to keep SafetyHQ as it was. We had an opportunity to redesign SafetyHQ in the same style as the other HQ products, but the higher priority was securing user data outside of Wordpress on our own new system.
We moved away from the current Wordpress build and rebuilt the entire app from the ground up using Vue3 and our custom bootstrap framework.
Project Highlight
Project Process
A short timeline proposed a welcome challenge requiring equal amounts of speed, efficiency and organization
Sprint 0
High-Fidelity Mockups
Grooming and Iteration
User Acceptance Testing
Project Highlight
I improved the desktop menus usability by relying on recognition rather than recall, by making the drawer open by default. Ensuring that the label for each navigation link was always visible avoided users having to rely on memorizing icons.
The work
Incorporating current HQ Suite components and creating new ones
I had already undertook building out and documenting our HQ Suite design system in Figma, and mocking up SafetyHQ screens was the perfect opportunity to test and iterate on components.
I standardized components like cards, page headers, detail page data and filter slide-outs.The current desktop navigation contained action buttons as well as navigation links, so we decided to split them up to avoid confusion and create intentional, dedicated spaces to elements.
Project Highlight
Old SHQ had action buttons within the side navigation menu, but I chose to break up navigation links and action buttons into their own designated spaces; the navigation links remained in the sidenav, and action buttons fixed to the bottom right of the screen
Empathize
I recognized that our typical user was a foreman, and their use of our app was more of a "get it over with" task; we didn't need fancy, we needed quick.
Define
SafetyHQ users had different needs than ProjectHQ users, so I chose to lower the visual clutter, and instead prioritize time-on-task.
Ideate
I tailored components like the navigation menu to our users' needs by limiting on-screen navigation links, and keeping them in a hamburger menu.
Prototype
High-fidelity Figma prototypes for both mobile and desktop screens, illustrating page transitions and animations.
Test
Light internal user acceptance testing showed us bugs on any critical pages, and any usability issues would be addressed in phase 2.
Implement
Hand-off to external devs, demo for the team, then review UI accuracy against the mockups, or make any changes due to constraints.
