Background
The AA-X
Project Summary
The app “AA-X” has been live for several years, provides real-time health alerts, detailed driving insights, and maintenance solutions that suit the user needs. While the app has a loyal user base, recent feedback and analytics reveal that several key user journeys are cumbersome, leading to increased drop-offs and negative reviews.
While being rebranded to “Vixa” the app is a new product that constantly monitors the vehicle's health and uses AI to alert the user at the first sign of trouble.
CONTEXT
The Vixa plug-in device
The Vixa plug-in device gathers data about the car's health, like engine performance, battery life cycle and location (if enabled). Vixa uses this to provide the users with car health insights, to alert about many issues, and to offer proactive maintenance solutions.
CONTEXT
What I did
User Research & User testig
Prototyping
Final Designs UX / UI
Design System
Alignment and Branding
Who are the target users?
The app is designed to cater to a core demographic of users aged 18 to 35, focusing on the specific needs, preferences, and behaviors of this age group.
Problem
The app is experiencing lower-than-expected booking conversions, suggesting that users are encountering obstacles during the booking process.
The booking journey at the moment
Mobile Mechanic
The primary focus of the business was the mobile mechanic service, with the goal of driving users to prioritize booking their first mobile mechanic appointment directly through the app but was hidden and hard to find.
Outdated Design
The app may feel old-fashioned or visually unappealing compared to modern design trends.
Solution
Phase One: Revamping the Main Page Engine to Boost Conversion Rates
The initial phase of the redesign focused on revamping the main page 'Engine,' which had a significant impact on improving conversion rates.
Prioritisation of Fault Levels
A dial design visually prioritises information by emphasising the current level, allowing users to focus on the most critical data without being overwhelmed by irrelevant details.
Grouped all faults into a new component
Consolidating all fault-related information into a single component and page helps organize data more effectively, preventing information overload and making it easier for users to find and address issues.
Enhanced User Control
Giving users the ability to select which fault they want to address empowers them to make decisions based on their specific needs and priorities.
Importance of Accessibility
Accessible design often enhances usability for all users. Features like clear navigation, readable text, and easy-to-use controls benefit everyone, not just those with disabilities.
Solution
Visual Design Iterations
In the pursuit of creating an intuitive and effective dial component for the application, I have undertaken a series of design iterations and rigorous user testing. This presentation aims to provide a comprehensive overview of our design evolution, highlighting the key changes made across different iterations and the insights gathered from user feedback.
Usability Testing
Two rounds of User Testing
Following two rounds of qualitative usability testing, each involving eight participants, I have obtained clear and consistent results. Both rounds of testing revealed a strong preference among users for the dial component. Based on this feedback, I have developed a comprehensive suite of dials designed to address various scenarios within the app, including engine and battery management.
The user feedback indicated that the dial not only met but exceeded expectations in terms of usability and clarity. Consequently, I have created a family of dials, each tailored to different contexts and functionalities. This approach ensures that our solution is adaptable and effective across all relevant scenarios within the app, enhancing overall user experience and satisfaction.
Dev ready
Final Designs
Phase Two : Introducing Mobile Mechanic on the main page
I have designed informational cards to enhance the visibility of the mobile mechanic service, which was previously difficult to locate within the user journey. These cards showcase the mobile mechanic's appearance, emphasise that the service is the same price compared to traditional garages, and highlight three key features. Additionally, users can easily change the appointment date and are provided with a clear call-to-action (CTA) to "Book Now." This design aims to improve user awareness and streamline the booking process.
Here is the Battery page: a comparison between its original design as found in the app and the newly redesign I delivered.
Usability Testing
Two rounds of User Testing
The AA-X
Project Summary
Dev Ready
Spec Designs
Consistency
Consistent visual design helps users with cognitive impairments navigate the app more easily. Predictable layouts and standard icons aid in user understanding and interaction.
Dev Ready
Final Journeys
User-Centric Design
Striking a balance involves understanding user needs and preferences, which can be achieved through user research and testing. This ensures that design choices align with accessibility goals and user requirements.
Thank you!
Engagement
Users are more likely to engage with the app when they can make choices that align with their needs, leading to better overall engagement and retention.
Here are side by side the booking journey I found in the app and the new improved journey I delivered and been implemented.
