Redesigning:
Test Drive To Go
1. Research
1.1. Project Overview
The problem
The web app’s design is outdated, leading to a less engaging user experience and potentially giving the impression of a neglected or unresponsive organization. The zigzag layout and misaligned sections create a cluttered, overwhelming interface that presents too much information at once. The unclear visual hierarchy makes it challenging for users to easily distinguish the importance of various elements, which restricts their ability to navigate and process content effectively.
The goal
People generally scan information vertically because it’s quicker and easier to understand. To address this, I’ve decided to arrange the information vertically, aligning everything in one direction. This will make the form more user-friendly, reduce errors in data collection, and make the data more accessible.
The product
Car shopping can be overwhelming and time-consuming, with customers seeking a quick, hassle-free experience that puts them in control. Test Drive To Go is designed to fulfill these needs, allowing customers to take charge of their car-buying journey while helping dealerships enhance customer satisfaction, increase sales, and save time. Customers can easily choose a vehicle from the website inventory and schedule their test drive with just a few clicks.
Responsibilities
Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping
Conducting usability studies
Iterating on designs
My role
UI/UX designer leading the platform design
Project duration
2 weeks/Augst 2024.
1.2. Competitor Audit
In the initial phase, I thoroughly researched applications that use consistent vertical alignment and simple designs for their test drive forms. While exploring competitors like Benz and Lucid Motors, I found several services that align closely with our users' needs. From this analysis, I identified key strengths in these platforms:
No-Pressure Environment: The test drive focuses on providing an informative and enjoyable experience, free from aggressive sales tactics, allowing customers to explore the vehicle at their own pace.
Flexible Scheduling and Locations: Lucid offers flexible options for scheduling test drives, including test drives at home or at convenient locations, providing a hassle-free experience that fits the customer’s lifestyle.
Expert Guidance: Knowledgeable product specialists accompany customers on their test drives, offering in-depth information about the car’s features, performance capabilities, and unique advantages.
Advanced Booking and Seamless Process: The test drive can typically be booked online with a user-friendly process, ensuring a smooth transition from online interest to in-person experience.
1.3. Understanding the user
At Redesigning Cat Care Society website, the ultimate goal is to create an inclusive and user-centered website that not only connects animals with loving homes but also empowers and inspires the users. We are dedicated to understanding and meeting the unique needs of users, like adoption journey support and educational resources. I tried that every visit to the Cat Care Society website is informative, engaging, and aligned with their compassionate hearts.
1.4. User pain points
Frustrating User Experience (UX):
An outdated or clunky app design makes it difficult for users to navigate, find relevant information, or complete tasks smoothly, leading to frustration.
Unclear Test Drive Process:
While booking a test drive, users may be unsure about the next steps, which can result in confusion, missed follow-ups, or lost opportunities.
Low Tolerance for Complex Steps:
Users expect a simple and quick process with minimal effort. Any unnecessary steps, lengthy forms, or distractions can lead to drop-offs and reduced engagement.
2. Starting the design
2.2. Digital Wireframes
When paper wireframes were converted to digital ones, it was simple to see how the redesign could help address user pain points and improve the user experience.
On the home page, I placed a high priority on the placement of practical button locations and visual elements.
Screen size variations
I implemented a vertical design with an accordion menu, where headers are stacked vertically. When clicked or accessed via keyboard/screen reader, each header expands to reveal more information, streamlining the user experience. For the calendar, I replaced the dropdown menu with a full-page calendar view, making it easier for users to see unavailable dates and identify today’s date with a highlighted marker. The selected date is clearly indicated with a filled shape, enhancing visibility and usability.
I revised the flow by moving the 'Help us locate you' question from step four to step two. This adjustment addresses a bug where, after the user selects 'Test Drive Location' in the initial step, they are prompted to provide location details based on their car selection.
Now, the process is more intuitive:
If the user selects 'Dealership' as the test drive location, the next step is to confirm their location based on their car.
If they select 'Home,' the next step prompts them to enter their home address.
This change ensures the location question is contextually relevant and appears at the right moment in the flow.
View the test drive to go high-fidelity prototype.
For mobile screen, I’ve redesigned the accordion menu to convert each panel into its own page. On mobile screens, scrolling through an accordion menu can be inefficient. This update enhances usability by providing a more streamlined and user-friendly navigation experience.
View the test drive to go high-fidelity prototype.
