Disclaimer: This project summary is de-branded to align with NDA compliance.
[Automotive] Website Navigation
Designed the navigation to help customers finding what they’re looking for in their car purchasing journey quickly and easily.
ROLE
User Experience (UX) Designer
TIMELINE
July 2022 to December 2022
TEAM
2 Experience Leads, 4 Designers, 1 Content Strategist, Client Stakeholders
SKILLS
Card Sort, Comparative Analysis, Competitive Analysis, Cross-team Collaboration, Figma, Interaction Annotations, Prototyping, Site Map, Wireframing
Customers leave the website after unsuccessful clicks through the navigation.
UNDERSTANDING THE PROBLEM
The client, [Automotive Company] is well known for its long-standing reputation of being the All-American car brand. The client desired to re-brand, allowing their reputation to keep up with changing trends. While pursuing the path rebranding, [Automotive Company] discovered a usability issue when reviewing internal analytic data. The client found that many of their customers leave the website after a multiple clicks, caused by frustration with not being able to find what they’re looking for.
Bringing in an additional focus to solve areas of friction while re-branding, the client asked my Publicis Sapient team to refine the navigation throughout their website and reduce the friction that causes customers to abandon the [Automotive Company] experience.
💭 How might help customers intuitively and easily find what they’re looking for on the client’s website?
UNDERSTANDING THE CURRENT STATE NAVIGATION
Understand the functionality of the site’s current navigation.
To understand how customers currently (as of July 2022) navigate the [Automotive Company] website, I conducted a Current State Analysis. I assessed the header, as well as in-page navigation, looking to identify clear areas of confusion and inconsistency.
Through the Current State Analysis, I found discrepancies between the mobile version and desktop version of the website. Because of each viewport size showing different navigation options, the customer is unable to begin their search on one viewport size and transferring to another. Realizing this finding helped me identify the opportunity to ensure internal consistency across multiple viewport sizes.
Identify usability successes and shortcomings within the current state navigation.
ASSESSING CURRENT STATE USABILITY
After gaining an understanding of how customer navigate the current state website, I conducted a Heuristic Evaluation to identify additional areas in the experience where customers experience friction.
Following my assessment of the header and in-page navigation experience using the 10 Usability Heuristics, I found multiple shortcomings regarding consistency and standards, match between the site and the real world, and recognition. I spotted additional opportunities to ensure navigation-related elements function the way customers expect them to and components have both affordances and signifiers to communicate available action.
Analyze how competitors handle header and in-page navigation.
CONDUCTING MARKET RESEARCH
I carried out Comparative Analyses and Competitive Analyses to examine how out-of-category companies and other automotive companies utilize navigation on their websites. These analyses aided me in recognizing the standard patterns, interactions, and components prevalent in automotive and e-commerce experiences.
I found that customers expect to find representative photos associated with distinct category names and find descriptions for specific products. Considering these aspects are standard across multiple experiences familiar to the client’s customers, I referenced these common patterns when designing so that customers will have access to a familiar navigation experience that does not require a steep learning curve.
Organize the content of the central navigation.
EXPLORING HOW CONTENT RELATES
With my gained knowledge of the experiences customers expect to have on the [Automotive Company] website, I explored the organization of site’s content. I brainstormed multiple versions of a Future State Site Map, as well is multiple Card Sort groupings, to map the relationship between pages and content in a way that aligns with customer expectations and their current, real-world shopping patterns.
After aligning on a version of the site map with my internal Publicis Sapient team, I ideated concepts of how the site map may manifest on the [Automotive Company] website. I considered patterns that align with experiences customers are familiar with, such as listing categories as image-label combinations and accordions. Though, I also imagined innovative concepts, such as search navs, scrolling interactions, and feature-highlight patterns.
Visualize the layout of the website’s navigation.
EXPLORING THE NAVIGATION
Deliver the final designs for production.
FINALIZING THE DESIGN
Following multiple iterations and design reviews with the client and internal Publicis Sapient team, the accordion interaction pattern for the global navigation proved to be the most intuitive, understandable, effective, and successful in User Testing sessions.
Before handing off the final designs to the [Automotive Company] engineering team, I notated the navigation designs with Interaction Annotations to prevent implementation ambiguity and to ensure a smooth handoff. In the notes, I specified the default states, intended behaviors, and clarifying descriptions of components.
I efficiently designed a website navigation experience for the [Automotive Company] website that:
Lowers the number of clicks needed to find information.
Categorizes content in a way that aligns with customers’ mental models.
Follows standardization, removing the need for customers to learn an unfamiliar interaction pattern.