Role
Product Designer
Duration
4 Months
Tools
Figma, Google Analytics, Hotjar
Team
Software Developer, Digital Marketer
Platform
Desktop, Mobile
Imagine you are excited to find the perfect accessory for your vehicle. However, what if the very first interaction, the ‘select your ride’ function, felt more like a hurdle than a helpful guide?
Home Page Redesign
For our customers, this wasn’t just about selecting a vehicle; it was a roadblock that led to frustration, underwhelming choices, and a disengaged shopping experience. The prominence of the ‘select your ride’ function was impacting our key business metrics - high bounce rates and low conversions.
Problem
Our goal wasn’t just to redesign a homepage to improve the aesthetics, it was a strategic move to create a marketplace that not only delights our users but also drive tangible business success.
Solution
Tracked with Google Analytics over a 3-month period, our design enhancements yielded an impressive reduction in the bounce rate from 80% to 30%, and a substantial threefold increase in conversions from 0.7% to 2.1%.
Impact
Understanding the problem
The first step was to uncover the underlying user experience challenge that was hindering our platform’s performance. The aim was to dissect user behavior and sentiments to pinpoint the precise pain points that were resulting in user frustration.
Research
We used a variety of user research methods such as user interviews, survey questionnaires, heat mapping, and competitor analysis to understand the user’s motivations, pain points, and expectations when using an automotive parts and accessories marketplace.
Our main focus will be on mobile since it consist >80% of our traffic.
Issues Uncovered & Pain Points
Frustration with “Select Your Ride” function: Users expressed frustration with the intrusive nature of the function. It took up half the mobile screen so users found it cumbersome and felt compelled to interact with it before they had a chance to explore the rest of the home page.
Lack of visual appeal and dynamism: With heat mapping, users attempted to tap on the static banner and stacked icons, but were disappointed as it was unengaging. In addition, users reported that the dull reds and grey colors lacked vibrancy.
Comparison with industry leaders: Analysis of competitors revealed that their platforms excelled in providing a seamless and personalized experience. Users wanted personalized recommendations based on their vehicle and highlighted the inconvenience of having to re-enter their vehicle details every time they searched for a new item.
High bounce rate linked to UI/UX: Survey responses indicated a correlation between the high bounce rates and the current UI/UX design. Users pointed to navigation difficulties on the homepage and dissatisfaction with the ‘select your ride’ process.
Designing a solution
How Might We
At the end of the discovery phase, we ran a design jam session with How Might We questions that frame our insights into opportunity and innovate on problems found during user research involving key stakeholders, including developers, marketers, and myself.
How might we (HMW) questions:
HMW make the “select your ride” function less intrusive while allowing users the freedom to explore the home page before committing to inputting their vehicle details?
HMW enhance the visual appeal and dynamism on the home page with an engaging banner and introduce vibrant colors to the design?
HMW streamline the search experience by introducing a feature that allows users to save their vehicle details and preferences?
We explored different variations by creating wireframes to visualize the redesigned layout with a focus on addressing all the specific issues uncovered from user research and gathered early feedback.
Ideating
Minimizing the ‘select your ride’ function to a car icon and/or CTA button to free up screen real estate for a hero banner for visual appeal.
Overhaul the navigation menu to display dynamic categories, enabling more products to be discovered by shoppers.
Created two versions of the vehicle input feature a) bottom sheet and b) slider drawer
Following ideation, where we translated insights into wireframes and prototypes, our team took a crucial step forward by engaging in usability testing. This phase allowed us to gather feedback on the redesigned elements.
Usability Testing Insights
Overlooked ‘add vehicle’ function:
Challenge: Users appreciated the reduction of the ‘select your ride’ function but found the minimized car icon to be overlooked and underused.
Solution: To address this, the function was converted into a CTA button and relabeled ‘add vehicle’, making it more noticeable and user-friendly. This adjustment aimed to strike a balance between minimizing intrusion and ensuring user engagement.
Home Page Preferences:
Challenge: While users enjoyed the dynamic category header display, there was a preference for a simpler home page layout with visual clutter.
Solution: The design was to maintain a clean and straightforward layout, catering to simplicity while providing a visually engaging experience.
Garage Interface Preferences:
Challenge: Users expressed a preference for the slider drawer over the bottom sheet in the ‘garage’ interface, as the latter is less enjoyable to navigate between the input fields and picker display.
Solution: Based on user preference, we focused on the slider drawer to provide a more natural flow for the users. This choice aimed to enhance the usability of the ‘garage’ feature and reduce mental effort for users managing vehicle details.
Iterative Design Adjustments
The insights gained from usability testing informed a series of iterative design adjustments to address the identified challenges.
The process involved refining the visual prominence of the 'Add Vehicle' CTA button, streamlining the home page layout to balance dynamism and simplicity, fine-tuning the 'Garage' interface based on user navigation preferences, and lastly updating the colors to be more vibrant to convey a sense of energy and excitement.
Resource Intensity Limitation: While having an image for every vehicle provided a nice visual reference and personalized feel for customers, the process of uploading all 690,100 combinations of year, make, and model proved to be time-consuming and exhaustive. Consequently, a placeholder was implemented in lieu of an image until a more efficient solution becomes readily available.
Performance limitation: Due to the extensive database of vehicle specifications, searching for items by a specific vehicle triggered sorting and filtering operations, resulting in slow loading times. This negatively affected the user experience. Addressing this, three weeks were dedicated to optimizing the performance and ensuring scalability for new car releases.
Challenges & Limitations
Solution
Transforming the “select your ride” function into a prominent CTA button labeled “add vehicle”, significantly improved the overall user interface and user experience and enhanced user engagement in several ways:
Reduced clutter and improved visual balance
Attention-grabbing hero banner
Freedom to discover
Greater sense of energy and excitement from tweaked colors
Better user control and flexibility with slider drawer
Reflections & Future Considerations
The challenge of uploading images for every vehicle highlighted the trade-off between visual richness and practical resource constraints. The time-consuming process emphasized the need for an efficient way to manage an extensive catalog of vehicle image data and find scalable solutions.
Continue to leverage data analytics tools to monitor user interactions. Continuously use data-driven insights to inform iterative design decisions, identifying areas for improvement on user behavior, engagement patterns, and conversion rates.