HuggOPTix
Sitemap

E-commerce navigation based on user mental models and industry best practices.

Project Overview

Role
UX Researcher, UX Designer
Timeline
Two weeks, Spring 2023
Challenge
HuggOPTix is a family business that does the majority of their sales online.
In order to maximize sales on their website, HuggOPTix needed to update their navigation because the legacy site left users confused.
Project Outline
  1. User Research
  2. Market Research
  3. Card Sort
  4. Sitemap
  5. Usability
  6. Final Product
  7. Takeaways
The HuggOPTix website, showing the top navigation bar as well as the footer navigation.
Legacy top and bottom navigation
Jump to Final Product

User Research

01

Interviews
I began with unstructured interviews with HuggOPTix customers and stakeholders in order to get an idea of where the site needed to improve.
Problem Areas
  1. Confusing and repetitive links in the navigation
  2. Contact information was missing and difficult to find
Goals
With these interviews in mind, I set the goals for the project:
  1. Improve navigation usability
  2. Surface contact information in a logical place
An icon featuring an arrow in a circle, representing navigation.
Navigation Usability
An icon featuring an "i" in a circle, representing Contact Information.
Contact Info Availability

Market Research

02

Understanding the Space
I targeted three direct competitors, Chums, Croakies, Pilotfish, as well as one indirect competitor with strong UX, Goodr.
Takeaways
In analyzing their sites and content, I had two main takeaways:
  1. Top-level navigation leveraged progressive disclosure through drop-downs, even if the links were not signified as drop-downs.
  2. Some common links were available in multiple places to decrease the need to hunt them down.
Screenshots of four eyewear companies' navigation menus, with annotations showing which buttons are drop-downs and which contain links repeated elsewhere on the site.

Card Sort

03

Open Card Sort
Using categories from the HuggOPTix site as well as categories seen on the competitors’ sites, I ran an open card sort to better understand user mental models.
A dendrogram showing the results of an open card sort.
Dendrogram to show best-fit groupings
A similarity matrix showing the results of an open card sort.
Similarity matrix to visualize groupings from the card sort
Findings
The results of the card sort were relatively mixed, but the similarity matrix combined with the best-fit dendrogram helped discern some patterns
The main takeaways were:
  • User grouping largely followed groupings seen in competitor sites, validating the industry best practices.
  • Some cards had moderately strong relationships to multiple groupings, such as "Reviews" and "Contact".

Sitemap

04

Take One
I combined the results of the card test and the competitive analysis to create a revamped sitemap based on user mental models and industry best practices.
A sitemap of the HuggOPTix website after being adjusted for the card sort results.

Usability

05

Tree Test
I performed a tree test to verify the usability of the new sitemap.
Participants were faced with the updated sitemap, and asked to complete tasks designed to test the findability of certain categories as well as reveal user mental models of where content should be housed.
A pietree showing the results of the tree test for finding reviews.
Pietree of paths for "Reviews"
A pietree showing the results of the tree test for finding contact information.
Pietree of paths for "Contact"
Findings
The results of the tree test led to some small changes to the sitemap that improve usability:
  • Reviews are available via the Shop dropdown as well as the About dropdown.
  • Contact information is available in the About dropdown as well as the Footer menu.

Final Product

06

Updated Sitemap

Take Two
I used the results of the tree test to update the sitemap into it’s final version. The key points include:
  • An industry-standard drop down for "Shop", including individual products, reviews, and a "Shop All" option.
  • Company and product information listed under the "About" dropdown.
  • Policies group based on user expectations in the bottom navigation.
  • Contact information available in the top and bottom navigation in order to match user mental models.
A sitemap of the HuggOPTix website after being adjusted for the tree test results.

HuggOPTix.com

Implementation
HuggOPTix uses Shopify to power their website, so I was able to implement the new navigation easily.
The screenshot below displays the new top-level navigation that leverages drop-down menus, as well as the new bottom navigation that is significantly cleaned up a categorized bast on industry best practices.
The HuggOPTix website, showing the top navigation bar as well as the footer navigation, after being updated based on research results.
HuggOPTix.com

Takeaways

07

Goal Recap
The final product does an excellent job of addressing the initial goals that were set at the beginning of the project.
An icon featuring an arrow in a circle, representing navigation.
Navigation Usability
The navigation was improved across metrics of Findability Rate, Time to Find, and User confidence.
An icon featuring an "i" in a circle, representing Contact Information.
Contact Info Availability
As directed by both the user research and market research, Contact information is now available in the Global Navigation as well as the Footer Menu.
Next Steps
The next steps for this project would seek to collect data from site users to measure the impact of the navigation changes, and then perform testing on changes to navigation to see if HuggOPTix can make their site even more suited to their users.
  1. Data Collection
  2. A/B Testing
More Case Studies

Contact