Objective
The primary goal of this project is to enhance the user experience and visual appeal of the WhoCanFixMyCar website on both mobile and desktop platforms. Building upon the existing design system created by the previous designer, the redesign aims to elevate the usability, functionality, and overall aesthetics of the platform. The focus will be on ensuring seamless navigation, optimising performance, and incorporating user feedback gathered from usability tests.
Scope
The redesign will cover both mobile and desktop versions of the WhoCanFixMyCar website. It involves refining the existing design system, addressing usability issues, and implementing enhancements to create a more engaging and efficient user journey. The scope also includes maintaining brand consistency and ensuring responsiveness across various devices.
Requirements
Project Type: Mobile and desktop website redesign
Team: Product designer
Tools: Figma, Adobe suit, Hotjar, Usertesting.com, Miro, Confluence
Duration: 12 months
Who is WhoCanFixMyCar?
WhoCanFixMyCar.com is the UK’s leading online market place for car repairs and servicing, connecting over 3 million UK drivers to local garages.
The platform allows users to post details about their car issues or service needs, and registered garages and mechanics can then provide quotes for the work.
The WhoCanFixMyCar garage network is made up of thousands of independent workshops, mobile mechanics, fast- fitters and franchised dealerships across the UK.
What were the pain points of the previous product?
The previous design had usability issues, making smooth navigation challenging for users.
Inconsistencies in the design language likely were present, resulting in a lack of visual harmony across different sections of the website, leading to confusion and a disjointed user experience, thereby complicating users' comprehension of the platform's interface cohesively.
The previous design lacked adequate optimisation for mobile devices.
The visual design appeared outdated or out of touch with contemporary design trends.
What will success look like?
A rise in user engagement metrics such as time spent on the platform, the number of service requests submitted, and the frequency of returning users.
Higher conversion rates in terms of users requesting and booking services through the platform.
A decrease in bounce rates, particularly on key landing pages. Lower bounce rates suggest that users are finding the redesigned platform more compelling and are less likely to leave without exploring its offerings.
Positive feedback and increased activity on the mobile version of the platform.
↓ Let's prioritise the essentials first
Competitive Analysis
Who are our competitors?
We carried on with competitor research to evaluate how WhoCanfixMycar was performing. Although we included Halfords for comparison, we have excluded them from the key takeaways, as they are a larger company and therefore their data might skew the analysis.
Usability testing
“I thought I’d see quotes, then refine by job “
The usability test results revealed a pressing need for a system update. The task of replacing the entire legacy backend system was substantial.
As designers, our primary task was updating the UI while simultaneously pushing for changes that we knew needed attention. The confirmation of our hypotheses came through the results of usability testing.
🖌
We focussed on creating an entire new design system
Design updates vs old designs
Although it was bit risky, we decided to change the branding colours.
A website refresh was considered necessary, and while we retained the green in a different hue for brand recognition, we replaced the main color with a new blue tone. We changed the font family, updated brand images, created a new logo mark, and developed an entirely new component system.
The tertiary yellow colors were crucial for enhancing visual appeal and maintaining a vibrant and cohesive brand identity throughout our online presence.
↑ Old Landing Page
↑ New Landing Page
🦄
Tokenising foundations and components in the design system.
How were our components stored?
We initiated the development of our design system in Figma. In the process, we deliberated on implementing Figma tokens to optimize and standardize the design elements across various projects. Figma tokens allows a seamless integration with GitHub, fostering a collaborative environment and ensuring effective version control. This approach not only enhances our workflow but also promotes consistency and efficiency in managing design assets throughout our projects.
Designing with a “mobile-first” mindset.
The previous website wasn’t fully optimized for mobile. One of the key deliverables was to ensure that the experience was optimized for both mobile and desktop, so users could access the platform anytime and from any device.
The results page was optimised by rearranging elements in the job cards, making it easier for users to understand what types of services each garage provides.
↑ Old Results Page
↑ New Results Page
Check the final product in WhoCanFixMyCar website
↓ Click on the image below
🎉
The new booking flow has been introduced to a sector of drivers; we are still comparing success results but, so far, the MVP have succeeded expectations with an increase on MOT and Full Service bookings.
Conclusion / Next Steps
UX is never done.
We began with the booking flow, but there are over 20,000 pages that could benefit from guiding users to the booking flow. In this section, there is still some work to do, such as accessibility improvements. The engineering team is working hard to comply with WCAG standards. There are also small details and interaction improvements within the flow that will enhance transitions and smooth the user journey. We are still working on redesigning the Quote cards for better visualization of garage services. Additionally, we need to expand the booking flow with more services and repairs, and the implementation of the Basket feature is still in progress until the garage dashboard is complete.
