Navigation and IA Redesign for FIGS
As part of a Site Simplification initiative, the e-commerce pod was tasked with redesigning and exploring both blue sky and low engineering scoped work for updating our on-site navigation and information architecture.
Role
Lead UI / UX designer, UX Researcher
Touchpoints
E-commerce website navigation and information architecture
Timeline
2 months
The Problem
FIGS utilized brand-specific terminology, architecture, and product collection structuring that was not commonly used throughout the e-commerce industry, leading to lower engagement with possible revenue drivers and difficulty navigating to key products, especially for customers unfamiliar with brand terminology.
What’s more, the UI of the navigation version in production struggled to create a sense of visual hierarchy and separation between differently prioritized areas of the navigation.
Goals
Increase the usability of the navigation through information architecture and UI updates, enabling users to identify desired collections more efficiently.
Discovery & Design
Competitive Patterning
The process began by conducting competitive patterning to compare industry-standard nomenclature for products and product categories against our own verbiage around these areas.
We were largely inspired by brands like Everlane and Patagonia for how they both structured their IA as well as presented their products verbally. From our learnings, we were able to identify the following areas of opportunity:
Areas of Opportunity
Visually Separate Navigation Types
Create clear visual hierarchy between our product navigation, and “courtesy” navigation.
Highlight Main Product Navigation Over Themes
Allow users to find the main categories they’re looking for before seeing options for branded categories.
Use Pages for Categories and Not Accordions
Simplify the amount of information on any single page by using pagination and not accordions to expand on options.
Use Industry-standard Nomenclature
Substitute themed category phrasings or names for titles users immediately recognize.
Utilize a Consistent Category Pattern Across Collections
Ensure the structuring of each collection is consistent to match user expectations surrounding navigating a category.
Reincorporate Promo Tiles Into the Mobile Navigation
Use promotional tiles intentionally to add variety to the visual language of the navigation and feature launches.
Wireframing
Before creating a dream state version to be used in user testing to compare the updated experience against our existing navigation, designs were generated exploring different avenues for the areas of opportunity that we defined. Explorations circled largely around how best to use the hierarchy of the UI, home and gender navigation, link styling, as well as responsive designs for desktop experiences.
Dreamstate Ideation
Mobilizing our defined areas of opportunity, the team reached a blue sky version of the navigation to be used in comparison to its live production version in moderated user interviews and usability testing.
Created a more unified type usage throughout the main navigation, while maintaining a sense of visual hierarchy.
Audited FIGS-specific brand terminology to reflect more commonly used category names across other e-commerce websites (i.e. Footwear instead of “For Your Feet" or Jackets & Lab Coats instead of “Layering Essentials”).
Promotional visual tiles were added to the navigation to add increased brand opportunity for predominantly visually driving campaigns and launches.
For links with larger collections, instead of using accordion dropdowns to reveal subcategories, the user is brought to a separate page to view the collection to remove accordion closing usability issues.
Visually separated the “courtesy” navigation (Men’s Home, TEAMS Orders, etc.) to establish a more logical sense of importance when viewing the navigation.
Using moderated User Interviews and Usability Testing, we then had users compare our existing on-site navigation against the dream state, allowing users to guide us through their navigation experience using both of these designs. What follows is the summation of our findings from this qualitative research:
Terminology impacts our customers
“Under Underscrubs” / “ATGT” / “FREEx” / “FIGSPRO” / “EXTREMES” / etc. all garnered confusion, hesitation, and misclicks from tested customers. These terms negatively impacted product wayfinding and created difficulty for customers prompted to find specific items. Customers did positively respond to the branded terms once they were explained.
The new layout held favorably
Interviewed customers strongly preferred the new layout design for the mobile navigation, finding it easier to navigate and understand, with minimal preference for the old accordion-style logic.
Certain terms held more favorably than expected
“For Your Feet” was universally favored by interviewed customers. Socks under Accessories struggled to be found at an expected rate. Additionally, customers had favorable views of ‘Necessities” over ‘Accessories.’
Layout is secondary to information architecture
Layout did not impact or impede users as much as product catalogue naming (i.e. IA) did. The new layouts did tend to improve recognition of the changed IA and success rates for finding products and featured collections, especially on web.
Solution & Rollout
Our team worked with our project management and engineering partners to establish a realistic timeline for rollout. Using the existing UI, we aligned on first tackling the IA problem, before then AB testing this solution against the live navigation.
Updates to the IA
Only Sale links can be colorized in this section moving forward, all other links will be Black.
Color launch links will always be Obsidian going forward, with their “New” badge backgrounds becoming the launch color hex code.
Addition of "Featured" as a new category. Any launches or new items that are not shown in the bolded section towards the top of the nav would be placed here.
Loungewear as its own category.
Renaming of “Necessities” to “Accessories.”
The addition of an "All ____" collection at the forefront of each category (i.e. All Scrubs, All Underscrubs).
Renaming of Underscrubs to “Underscrub Tops”
AB Test Results
The two-week test yielded outcomes largely as expected — overall performance remained relatively flat, and we observed a slight decrease in CVR balanced by a slight increase in AOV. As such, the product team recommended the new variant be rolled out and published.
Looking forward to 2025, the team has added the complete UI redesign for the navigation to the 2025 roadmap, where we will begin to iteratively update the navigation using the below dream state designs, and AB test our solutions.
Project Challenges
Largely, the UX team was incredibly supported by its adjacent teams, including Engineering, Product Management, and Site Merchandising. The struggles that did arise were largely from a brand perspective, with a desire to hold onto certain terminology in order to create a brand distinctiveness from competitors.
As such, in both our user interviews and AB testing, we focused on these areas to better understand what the user preferred and what the data would tell us, allowing the team to make a stronger recommendation for change. Ultimately, we compromised by pushing for terms we felt most impacted the user’s journey, while reverting other terms to their original branded states.