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
Partners
Engineering, Product Management, Site Merchandising, and UX
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.
Competitive Patterning
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.
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”).
Created a more unified type usage throughout the main navigation, while maintaining a sense of visual hierarchy.
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.
Usability Testing
Using moderated user interviews and usability testing, we 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.
76%
Of users strongly preferred the new layout design for the mobile navigation, finding it easier to navigate and understand.
87%
Of overall users preferred name updates to shoppable categories that reflected industry-standard terminology.
31%
Of repeat users preferred original category names due to familiarity with terms.
Testing Takeaways
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.
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
Our key takeaway was that updates to the navigation, including naming, categorization, hierarchy, and placements, strongly influence where customers go on the site, but have less impact on purchase intent.
+0.4%
Increase in overall CVR.
+66%
Of sessions based on category name updates.
+19%
Increase in net orders for both new and repeat customers.
Updated UI Rollout
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 dream state designs (right), 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.