CarGurus®
Native App UI
CarGurus® is the largest auto-shopping site in the US, and the place to go whether you want to buy a new or used car or sell your current car. With unbiased car reviews and over a million opinions and photos from real people, users choose CarGurus to find the best car deals nationwide.
Team
Native App Team
Role
Sr. UX/UI Designer
Dates
2022 - 2023 (5 months)

The newly launched Cargurus native app appears to be an adaptation of the existing website, which results in a more web-like experience rather than a native app feel. As the UX/UI Designer newly added to the team, my task was to carry out extensive exploratory UI enhancements for login, registration, and the typeahead & browse search features, following the established brand guidelines and supplementing them with new components to enhance the limited design system.
My Task.
Deliverables
Hi-Fidelity Mockups
Interactive Prototypes
Design System Components
Design Tools
Figma
Adobe CC
Productivity Tools
Jira
Miro
Slack
Process
Flows
The user flow demonstrates a high-level view of how users can quickly search for cars using typeahead or browse tabbed search, view listings, and connect with sellers. The design prioritizes ease of use, efficient communication, and a streamlined transaction process.
Grid System
Choosing a structured grid that aligned with the existing design system was key in providing consistent layouts and improving user experience. It simplified design and development while maintaining a cohesive and visually pleasing interface.
Type
Fluid/Stretched
Columns
4 / Auto
Margin/Gutter
24/16
Colors
The thoughtful inclusion of a color scheme established a consistent and visually appealing palette throughout the interface, enhancing the aesthetic and user experience.
Typography
Incorporating a well-defined typography guarantees a consistent and aesthetically pleasing text style across the entire interface, promoting readability and a polished appearance for users.
Design System Elements
Here are a few examples of some basic components and a handful of their variants from the CarGurus Design System for native app.
Iconography
Incorporating "Font Awesome" for consistent icon usage ensured efficiency, user understanding, uniformity, and streamlined design/updates for the UI & Development team.
Login & Registration
A user-friendly login, registration, and onboarding process, ensuring a smooth user experience. This straightforward approach allowed users to easily access the app, create accounts, and set up profiles. It streamlined user engagement, simplified data management, and maintained an efficient and intuitive onboarding process.
Search Userstory
“As a user of the CarGurus native mobile app, I want to have the option to choose between type-ahead search and browse search functionalities to improve my search experience, enabling me to find the perfect car listings with ease at the location of my choice.”
Current-state Browse-only Search
Current-state familiar Browse-only search functionality that users are accustomed to. UI is dated vs. Dev React Native Design System and also rigid/clunky visually.
Test-state Typeahead-only Search
The user feedback received indicated dissatisfaction with the new type-ahead-only search feature, highlighting specific pain points and usability issues.
Not-so-great User Feedback
Recent live test implementation of a new Typeahead-only search feature in the CarGurus native app resulted in negative user feedback and 3.5% drop in conversion rate.
To address the challenge of replacing the browse search functionality with type-ahead search in the CarGurus native mobile app, a solution is proposed. Create a combined type-ahead + browse search approach, offering users the choice between the two options ensuring a comprehensive and flexible search experience.
Design an intuitive interface with a prominent search bar supporting real-time type-ahead suggestions.
Integrate a browse option within the search interface, allowing users to explore categories alongside type-ahead.
Implement smart search suggestions based on user input and behavior.
Design supporting screens in addition to the home screen as needed for location and tabbed browsing.
Remove and separate “Sell My Car” and “Finance” tabs from Browse search.
1. Competitive Research (Carmax)
Typeahead/Browse Search Combo
During our competitive research, we discovered that the Carmax native app utilizes a combined typeahead search and tabbed browsing UI, which could inspire our goals of improving the home screen of our CarGurus app. Drawing inspiration from Carmax's UI and functionality, we can leverage their successful approach as a starting point for enhancing our own app's user experience.
2. Hi-fidelity Iterative Mockups
To meet the project's timeline and leverage the existing design system components and styles, the preferred approach was to work directly from a high-fidelity level. The main focus was on designing a typeahead + browse search component option that aligned with the capabilities of the existing native app platform (React Native), the current Cargurus brand, and the familiar UX/UI that users were accustomed to.
Additionally, supporting screens and improvements to location functionality were considered/iterated.
The goal was to deliver an improved and intuitive search experience within the constraints of the project's requirements and resources.
Combo Typeahead + Browse Search Component Iterations
Component Iteration 01
Component Iteration 02
Component Iteration 03
Component Iteration 04
Typeahead + Browse Search Combo
The integration of typeahead and browse search features in our car buying and selling app greatly enhanced the user experience. It provided users with the flexibility to either quickly find specific listings by typing in keywords or explore a broader range of options through category-based browsing. This dual approach catered to both targeted and exploratory user needs. It streamlined the search process, simplified listing discovery, and ensured a versatile and user-friendly experience, accommodating a wide range of user preferences.
Dealer Contact
A user-friendly login, registration, and onboarding process, ensuring a smooth user experience. This straightforward approach allowed users to easily access the app, create accounts, and set up profiles. It streamlined user engagement, simplified data management, and maintained an efficient and intuitive onboarding process.
End.
The completed deliverables (Specifically the interactive prototypes) were prepped for use in upcoming usability testing, which was the next phase in the project.