UI / UX DESIGN
Goodwork
Mobile app
Project covering the UI / component
library as part of the design system and usability.
My role
Goodwork's mobile app is a place for tradies to find jobs, hire workers and connect with each other.
..............
I joined the Goodwork team to help re-design some key features, improve various UI components and interactions throughout the app. I also played a part in the transition towards an updated UI style and the very beginnings of their design system.
I lead user testing sessions and worked closely with the cross-functional team in an agile environment where a number of important updates were released.
Tools used
Key design objectives
– Improve the UI/UX in the key areas (user tasks) in the app
– Help move Goodwork towards a more consistent and cohesive UI style
– Begin to create Goodwork’s component library for the new design system
Who we're
designing for
The first week at Goodwork involved lots of discussion and questions around the product with team members and immediate stakeholders, looking at the business objectives, understanding who we were designing for and looking at the user goals, needs and behaviour as part of the initial steps in the process.
Blue collar workers covering all trades from plumbers, bricklayers to landscapers and electricians. Tradies who work for themselves or who run a small business who often need to find sub-contractors quickly or find a job.
Design/expert review
Before delving into the design system, I conducted a comprehensive design review of the product to identify critical UI and usability issues. This review encompassed all key tasks, evaluating them against design principles, accessibility standards, and best practices. Issues were categorised by severity (low, medium, high, critical).
The goal was twofold: to familiarise myself with the product and to pinpoint immediate improvement opportunities. This process also helped form assumptions to validate in subsequent user testing sessions. For instance, the job posting task revealed unconventional transition patterns, prompting a recommendation for more standard interaction design approaches.
The design system
It was early days at Goodwork when it came to their design system, so my role in addition broarder work regarding UX/usability within the sprint team was to begin the early stages of creating the design system - initially the UI components section of the system.
UI audit + exploration
As part of developing a common interface language, we decided to review all buttons, links and CTA's throughout the app and see where we could improve the UI and usability.
1. The first design task was to audit the whole app looking all the buttons, where they were and what they looked like.
2. Looked for UI inconsistencies and assessed components for adherence to design best practise.
3. Considered how these components were interacted in context with key user task flows
4. Explored solutions (collaborating with product lead) to address the design problems we found.
5. Ran through solutions with team members to receive any further feedback and input.
6. Iterated on solutions and finalised designs with redlines and annotations for engineers.
7. Added components to design system - created Figma master components and varients.
Design problems + solutions
We found there were outdated and inconsistent styles for many of the UI elements:
– multiple icons for the same action
– inconsistent colours and styles for links
– tap region size inadequate for accessibility standards
– CTA buttons hidden when keyboard is in view
– issues with button hierarchy.
There was often no differenciation between primary and secondary buttons styles. Buttons which had more importance often looked the same as buttons with seconday importance which was problematic.
I explored new styles for radio and secondary buttons to reduce friction and help users move through flows/tasks with the least amount of effort.
Primary and secondary exploration
.
Atoms
Job cards – UI refresh
An important UI update was the job cards, and they appeared in a number of different contexts thoughout the app. The task of finding work was an important one for Goodwork, so we wanted to bring a fresh, new updated UI design to the listed jobs
Tradies needed to quickly view the important info about the job and to be able to intuitively tap through to see more destail and then decide to apply or not.
The Atomic design approach was a great way to break up and organise these components, so I looked at setting up the design system to reflect this approach.
The job cards was a good example of how the Atomic design woud allow Goodwork to build, manage and maintain scalable designs.
Molecules
Organisms
Accessibility design matters
With accessibility and design principles always in mind, I made sure the colour contrast ratio for the status feature passed WCAG standards, AA at a minumum.
Along with colour being accessible to tradies, other important factors were considered such as button size, icons paired with text, text size, clear concise wording for all call to actions and visual hierarchy.
Setting up components and varients
The radio buttons I proposed we update, played a big part in the ‘post job’ form, a significant user task and a key user goal in helping tradies find subbies.
After new UI designs were handed over to the dev team, I created ‘master’ compoments and set up varients in Figma.
This process was a bit ad hoc and inbetween other design tasks I'd make time to continue with other components, organise and construct these master compents and varients.
Storybook
Storybook was being used by engineering but there was no system in place to make sure new Figma UI components were always in sync with the live app.
My intention was to look at the Figma to Storybook workflow, and together with the devs figure out the best way to integrate the two.
Storybook contained a mix of old and new UI components - an approach was needed to move towards the new components without creating a mess of old and new components.
Some discussion points were:
– Clean up and remove old UI components in Storybook
– Discuss and define a naming convention for design tokens such as colour and make sure Storybook is aligned
– Make sure the correct components were used in the right places
– Figure out a way to keep design in sync and always reflecting the latest UI design in Figma
Figma organisation
After some research/ talking to other designers, I began some initial exploration - ways we could approach the organisation of the design system within Figma that might suit the Goodwork team.
For example, creating a separate Figma 'Team' for the design system and within that a number of 'Projects' containing different sections of the system such as Core (tokens), Assets and Components.
As part of the project I helped improve the experience of the app by speaking to real users and out of those sessions I gathered insights which helped inform designs.
The floating round button issue
The problem and how it was idenfited
Another usability issue identified was the home screen floating round button. It's was a vital CTA which enabled users to complete a number of important tasks. But users weren’t clear as to what this button was for and what it’s purpose was. We also found users weren’t tapping the button much at all. Both user testing and data analyics helped us identify these problems.
Solution
We wanted to improve usability and findability so users knew immediately what to do and what the button did. Two new buttons were created with explicit text for the first iteration, we then ended up opting for one single button for more simplicity.
This button was a crucial CTA which lead users to one of the most important tasks of finding workers.
Outcomes
Some early data over the month since implementing the home screen buttons showed there was an approx increase of 26% in unique users posting jobs. We thought that the updated buttons were likley a major contributor to this. This was early data but still a very promising sign.
In summary
This was an enjoyable project where we accomplished a lot.
I helped Goodwork make substancial progress in their product roadmap by releasing some important features while getting the design system underway and uplifiting the UI style with upgrades to key components across the app.
I’d love to chat about how I can help you. Say hi over email.
Contact me
© Jeremy Laycock