Baafog_Ayo
Overview
In today’s fast-paced world, vehicle owners, service providers, and spare part vendors struggle with inefficiencies in automobile maintenance and repair services. Vehicle owners face difficulty finding reliable service providers and managing their vehicle histories, while service providers and vendors grapple with task management and inventory organization.
Goal
Autofix was conceptualized as a comprehensive solution to bridge these gaps, creating a seamless, user-centric platform that connects all stakeholders.
Roles
Lead UX designer | UX Researcher
Tool
Figma, Miro, Canva
Team
2 UX designers, 1 UX writer, 1 UX researcher
Research
Methodology
To understand user needs and pain points, we conducted extensive user research that included competitor analysis, surveys, interviews, and usability testing.
Competitive Analysis
We analyzed three key competitors—GoMechanic, Cardio, and Carfox—to identify their strengths, weaknesses, and areas for differentiation.
 |  |
|---|---|
 |
Key Findings:
-
Competitors offered basic scheduling and cost estimation tools but lacked comprehensive service history tracking and seamless integration between service providers and vendors.
-
Most apps were user-centric, with limited functionality for service providers and vendors, creating inefficiencies in the ecosystem.
Actionable Insights:
-
Autofix needed to position itself as a holistic solution, offering distinct yet interconnected tools for all three user types.
Surveys & Interviews
After the project kickoff, we defined our research strategy and objectives. Understanding the target audience and their challenges were our priority. First, we built an online survey and shared it in various relevant communities. In just a few days, we received 24 submissions. Based on these, we identified 5 common pain points, which lead us to the next step.
During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. Together with the team, we prepared an interview script with 32 open-ended questions, focusing on our target audiences’ values, motivations, and maintenance routines. In a week, we recruited and interviewed 3 users remotely. We referenced the user interview findings throughout the entire design process.
 |  |
|---|---|
 |  |
 |  |
"I want to be able to track my car repair on the app"
"I want pick up and drop off of my car for repair from the app"
"Can i get cost estimate of repair?"
Insights gathered from the interviews
Personas
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas, each representing a user segment. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.
Ideation
In this section, we began to explore how we can solve the problem by extensively considering the various user journeys and flows through the app
User Journey
With the business goal in mind, we make sure that our users reach the checkout screen without any hiccups. So, we sketched a current-state user journey map, to identify opportunities for improvement. We identified 2 unnecessary steps and potential dropoff points in the flow. By eliminating these from the new design, we ended up with a much faster checkout experience that contributed to conversion rates.
Information Architecture
The information architecture (IA) for Autofix was meticulously designed to ensure a seamless and intuitive experience for all three user groups: vehicle owners, service providers, and vendors. By leveraging insights from card sorting, tree testing, and user feedback, we created a structure that balances simplicity with functionality, guiding users effortlessly through the app.
User Information Architecture
Card Sorting
To make sure that the site’s information architecture is aligned with user expectations, we had 3 remote card sorting sessions using Optimal Workshop. Our goal was to find smaller, intuitive groupings for the existing product categories. After organizing the data, we ended up with 5 clearly defined main categories with 4-7 subcategories in each.
 |  |  |
|---|
Wireframes
Using Figma, I translated the Information Architecture into low-fidelity wireframes. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
Style Guide
I created the colour palette with 1 primary and 3 accent colours. The choice for typography has fallen on Libre Franklin and Inter, sans-serif fonts with clear legibility.
I also created components and variants which hastened my High Fidelity Designs.
 |  |  |  |
|---|
UI Design
I created a fully-functional, high-fidelity prototype of the flows using Figma. This was iterated throughout the project based on feedbacks from usability testings until I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and fully addresses the users pain points.
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Axure. At the same time, we started recruiting subjects for the test who fit our criteria. We did 4 usability tests in the first round and 3 after iterating on the issues that we’ve identified:
Issue 01
Users complained about having to input all their vehicle details, about the form being too long.
Issue 02
Navigation bar not clear and It caused our testers to struggle.
Issue 03
User expected that a click on their vehicle from the home page should take them to the details of the vehicle.
Solution 01
We brainstormed. and came up with a solution. We introduced an initial screen, where users can input their VIN.
Once they provide their VIN or Vehicle registration number, we automatically pull their records by integrating with the API. This gives our users who have previously registered their vehicles a seamless experience.
Solution 02
We decided to improve our Navigation Bar. The new Nav Bar clearly shows which screen users are currently on and the contrast of the other icons have been improved.
Also, we included text for each icon, to avoid allowing our users to guess what each icon meant.
Additionally, we also added Services as a main icon to aid our users to easily access it.
Solution 03
We implemented this based on the feedback from testing.
Now, once they click on the vehicle that they have added to their account on the home page, it takes them to their vehicle information.
What I learned
I created a fully-functional, high-fidelity prototype of the flows using Figma. This was iterated throughout the project based on feedbacks from usability testings until I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and fully addresses the users pain points.
Understanding User Needs
Through extensive user research, I gained insights into the diverse needs of our personas. Each user segment has unique requirements, and addressing these effectively ensures the app delivers value to all stakeholders.
User-Centered Design
I learned the importance of tailoring features like the Garage Screen to be intuitive and informative, ensuring users can easily manage their vehicles.
Competitor Benchmarking
Analyzing other apps in the space revealed gaps in current solutions, such as fragmented service histories and poor communication between users and service providers, which Autofix can address.
Research-Driven Iteration
Card sorting and usability testing underscored the significance of structuring the app’s information architecture logically, making navigation seamless.
Where do we go from here?
The next steps for AutoFIX incluudes:
-
Prototype Refinement
-
Advanced Usability Testing
-
Feature Prioritization
-
Development Handoff
-
Launch Preparation
By continuing to integrate user insights and iterative design, Autofix can evolve into a comprehensive and indispensable tool for automobile maintenance and service management.