Divcars
Revamping Search Experience and UI
Revamping Search Experience and UI
Divicars is a platform that uses AI and NLP technology to understand users’ search, scans thousands of reviews across Cars.com, KBB and J.D. Power to find the best matching and unbiased results.
As a product designer, I managed the entire UX process from research to design & test, handoffs to design audits, communicated with stakeholders and developers to understand requirements, and resolved problems as they arose.
The goal is to understand user experience on Divicars, identify user pain points and expectations, and provide relevant component based scalable design solutions that improve engagement and acquisition for the product and its partnered clients.
3 weeks
GT Games
2 designers
Figma
Miro
Adobe Photoshop
In the wake of Divinia acquiring Autoweb, Divicars became a priority among the four verticals. I then pushed for implementing research findings for Divicars in Phase - 1, outlined in a separate case study Divinia, and designed solutions for enhancing the user experience.
When I started to work as a designer, the challenge was driven by the business's need to provide a good user experience when they typed a query and wanted to see matching results. Like, most companies, the search feature was simple, with a search box input for a query with 1 or 2 keywords and a basic results page. But the universe of user discoverability with search evolves much more, which can be tricky.
Quoting Peter Moville and Jeffrey Callendar in their book Search Patterns:
"Search is a defining element of the user experience… Unfortunately, it's also the source of endless frustration. Search is the worst usability problem on the Web."
I went deep into understanding patterns specific to search interfaces that predict user interactions and behaviors to help us build a complete and powerful user experience.
Search Box & Navigation
We realized that expecting our users to rely only on the search box as a solution wasn't enough for their discoverability journey. Here are 5 whys from a Nielsen-Norman group study about the topic:
-Search requires knowledge of the search space
-Search increases memory load
-Search has a higher interaction cost than browsing
-Specific site search can often work poorly
-Users have poor search skills and don't know how search works
Navigation is essential because it gives users an idea of what they can find and teaches them about the search space's structure and what they can search for. Showing upfront content, they can recognize substantially improves usability because it reduces their cognitive load.
"Using the navigation categories is often faster and easier for users than generating a good search query."
Through navigation, we can improve usability by reinforcing one important usability heuristic defined by Jacob Nielsen: Recognition over recall. Therefore, for an effective search considering different user behaviors, I recommended a balanced initiative between specific search and navigation through browsing.
Baseline UX
I also researched design patterns to help us build a good search experience for users. Autocorrect, auto-suggest, recent searches, related searches, sorting are some patterns that are already used by many players like Google, Amazon, and many others, that we already know works and we can apply in our product gradually to shape a new vision for our product.
I conducted a competitive analysis to understand how these design patterns work in different scenarios like zero input and active query for first time users and returning users. Keeping general design principles in mind, I began to think of this effort as a Baseline UX.
- Unify search boxes: size, position, and visual treatment
- Unify icons: style, stroke, color, size, and alignment
- Unify fonts: font-family, size, color, weight, hit-highlight treatment
- Unify vertical spacing for clarity and better targets
Weight and color of typography
I used a single color, #292929. With hit-highlighting, used a higher contrast font-weight which also rendered the same way across all platforms—bold/600.
Number of suggestions
To help discoverability a combination of suggestions like history, trending queries, popular cars and most viewed lists were added.
Line-height and touch target sizing
To help users scan and read the list easily, the list item height was kept 40px which will also make it an easy target to hit on touch-based interfaces.
Revamping Homepage Experience :
- Added navigation categories on homepage that lead to result page based on user preferences related to cars.
- Designed a more immersive experience ensuring accessibility.
- Implemented MUI library for consistency, scalability and optimizing resources.
- Designed responsive assets.
- Provided a clear and concise value proposition.
Result Page Experience :
- Experience nav bar to help users browse and select their topic of interest effortlessly.
- Search tag carousel based on the selection or input to keep users engaged on this page.
- Implemented autocorrect UI.
- Marking the the most popular result with a banner.
- Added review sources’ information to gain trust.
Insight :
According to GA, 85% of users were using Divicars on mobile devices and there is 46% bounce rate on mobile devices.
Problem :
Current design do not respond well to screen sizes which is costing Divinia potential customers, as well as damaging brand reputation.
Solution :
Implemented layouts, grids and media queries for responsiveness and usable touch targets.
To help Car.com with lead generation, I designed a lead form that was added to the user journey on the website which took them to client's website. Usability testing revealed that 80% of users were reluctant to share their personal information without getting much in exchange.
In addition, there was a lead generation flow through result cards. Users who click "FIND LOCAL DEALER" are interested in the car & dealer and would like to learn more.
User Problem :
SEO Problem :
The current pages are hosted under the client’s website(Car.com) resulting in :
- No tracking results at our end
- How many sessions and clicks
- How user behaves
- Which step they exit
Iteration :
With the primary goal of increasing the conversion rate the solution needs to :
- Address users’ pain points
- Maximize their benefits
- Increase their sunk costs
- Provide consistent experience
Instead of asking all the information at once, asking of information is split into two steps and an inventory page was introduced in the user journey.
To demonstrate Divinia's expertise and keep prospective customers coming to the website, I proposed an automated list generation of cars. Research revealed that most users find cars based on vehicle type. Keeping this user habit in mind and helping them navigate through such massive content, I designed the page with lists based on experience, which are further distributed into types of vehicles. A 'Featured List' carousel of lists showcasing the top 3 items placed on top to instantly give users an idea of what to expect from these lists. Sticky menu navigation to make a smooth journey through the content on the page in a manageable way.
The post page was created with the goal to optimize the content, so that Google chooses to use it as the featured snippet, giving us the opportunity to get more organic clicks.
Engagement overview after Phase -2. Overall increase in Avg. engagement rate and new users and especially on mobile devices over a period of 90 days after launch compared to preceding period.
I loved working with Divinia. I enjoyed being a part of forming the vision that would help this company grow. I learned so much about search experience. Studying search patterns was very important for me to design a better experience for our users. Those patterns helped us to shape a new vision for our product based not only on our business and users' insights but also on market insights from many benchmarking and studies based on their user experience.
My skills in designing for responsive web grew enormously. There are so many screen sizes used by a variety of different consumers. If you don't consider how designs react to changes in those screens, you risk the site looking cluttered and awkward — a massive turnoff for users. On this project, I saw firsthand what could be created with a strong working relationship between design and development. The quality of the final product was greatly enhanced by our team's efforts to collaborate, reach an agreed-upon understanding, and communicate openly.
This redesign was a continuation of the design I created for my trial project when I applied for Divinia. Watching my trial design get launched and perform successfully was an achievement. This helped my confidence grow as a designer. I enjoyed learning what worked best and was most productive for the business.
