The Challenge
Rothy’s was rapidly adapting to the times and simultaneously expanding their product catalog within every category. They had just launched a new category, handbags, when the coronavirus pandemic hit in March of 2020 and the company quickly started churning out masks. To keep up with its continual expansion and planning ahead for future product categories down the line, the navigation needed a redesign. Our team needed to find ways to allow customers to easily traverse this wider and deeper product catalog.
Role
User Research
UI/UX Designer
Approach
Competitive Research
Prototyping
User Testing
Target Screen
Mobile
Desktop
Tools
Sketch
Invision
Invision Studio
Usertesting.com
About My Role
I led the UX work for producing all major deliverables and was responsible for the final design and specifications of the redesigned navigation. I worked alongside an Associate Product Designer, Senior Product Designer, and Director of UX. Each of us were responsible for the research, prototyping, and user testing prior to the final selected design.
In addition, I worked closely with a Product Manager, Art Director, and Web Developer.
The redesigned navigation launched on January 26, 2021.
High Level Goals
Enable both people who browse and search to easily find what they are looking for and explore Rothy’s offerings
Create a navigation design that feels cohesive across devices, is easy to use and understand
Ensure that the navigation is flexible and scalable for future products and categories down the line
Target Audience
device: Mobile users and desktop users (Mobile users are priority because 85% of Rothy’s customers are Mobile users)
gender: Female and Male
age: 35-60 years old
household income: $100k-$150k+ per year
shopping habits: Shops online at least 4 times a year
Scope & Constraints
timeline: 6 weeks to research, prototype, design, write specifications, and hand-off to developers
limitations: Must include the same site architecture and taxonomy to meet deadline. Rothy’s had been working for over a year and half to reconfigure its e-commerce platform from headless to traditional. The business wanted to update the navigation at the same time the reconfiguration launched so that the team wouldn’t exhaust testing and quality assurance on an outdated navigation that would eventually need to be updated.
Prior Navigation
As Rothy’s was quickly diversifying and expanding its product catalogue, it was confusing and difficult to find a desired product. The navigation was a large menu of text links of product names that unfamiliar users could not understand (i.e. The Square and The Knot are names of shoes in Rothy’s catalog).
The navigation was also being used as a marketing tool, showcasing imagery within the navigation only on desktop. The reason for this marketing focus was that the brand invested heavily in its seasonal campaigns and these were pages that could be accessed underneath top level categories. Links to collection pages were also added into the navigation as an attempt to gain dual exposure to seasonal campaigns, but the result was an overwhelming tray of links that interfered with the user experience. We needed a better way to expose products and stories in the most organized and understandable way across all devices for users.
On top of all of this, there were design inconsistencies, a frustrating desktop hover experience, and no focus indicators in the navigation, which did not meet accessibility requirements.
Prior mobile and desktop navigations.
Initial Research
We knew what was wrong with the current state of the navigation. But in order to define the elements that were necessary to improve the user experience in the redesign, we researched multiple competitor websites. We discovered there were common design patterns and user experiences in their navigations that led us to 3 key questions. We began running a series of unmoderated user tests for each key question.
Full Screen vs Modal
User Test
Number of Participants: 29 / Device: Mobile / Gender: Male & Female / Age: 35–47 / Location: United States / Household Income: $40k-$200K
We noticed on mobile that competitors had either full screen or modal navigations. We ran an unmoderated AB test and observed whether users had any difficulty with the modal or not. The test consisted of 29 participants and they each were shown two different websites; Greats, which has a full screen navigation and Aether Apparel, which has a modal navigation. They were given a set of tasks to complete and at the end, they were asked for a preferred site.
Results
As we observed participants, we noticed there was no indication of users preferring a modal to full screen. All users used an ‘X’ to close out of the main navigation. During this test we also saw that users preferred Aether over Greats for the overall usability and amount of product offerings.
Icons Top vs Bottom
User Test
Number of Participants: 14 / Device: Mobile / Gender: Female / Age: 35–60 / Location: United States / Household Income: $100k+
We found an interesting discovery where a some competitors had navigational icons at teh bottom of the screen on mobile. We wanted to know if this was a new expectation from users.
We tested sites with varying mobile navigation menus. Participants had tasks to complete using the mobile navigation and we looked for usability, visual preference, and observed if they knew where to find the navigational icons.
Results
Participants unanimously agreed that they expected to see the menu in the upper left, and the cart in the upper right. Most users did not see the app-like menu at the bottom for Sephora.
Same vs Different Across Devices
User Test
Number of Participants: 28 / Device: Mobile & Desktop / Gender: Male and Female / Age: 35–55 / Location: United States / Household Income: $100k-$150K
Looking at competitors, we saw that some mobile and desktop navigations had similar appearances and experiences. We wanted to know how important it was for the navigation be visually similar across desktop and mobile devices and whether it helped the user experience.
Results
Majority of participants said it is important that website navigation be consistent across desktop and mobile devices because it provided clarity and consistency when shopping on either device. Both male and female participants found Aether more visually appealing, but M.Gemi easier to use.
Prototype Testing
With answers to our key questions in hand, we began prototyping. In our research, users agreed that mobile and desktop devices should be similar in design and interactions. So, we focused on mobile prototypes since 85% of our consumers are on mobile devices. From there we could design a similar navigation for desktop based on the test results below.
Usability Testing
Each member designed at least 1 to 2 prototypes and tested for usability. We each uncovered any problems and discovered opportunities during our tests. We then would refine our designs and test for usability again. We ended up conducting 41 usability tests before landing on 4 designs to move forward with and test against one another.
During usability testing we asked participants to “find” specific items by using the navigation in the prototypes.
We observed how participants interacted with the prototypes and reviewed how they used it; did they try to tap or swipe, whether they became confused, or if there was something unavailable to them in a prototype.
We considered how much time it took participants to find the specified items, as well as whether they knew where to go intuitively
At the end of the test they rate how challenging the tasks were and provide any additional feedback or comments.
AB Testing
Based on the usability results, we were able to select 4 winners to set up AB tests against each other. This helped us decide what was resonating most with users based on aesthetic preference and driving purchasing decisions. Each of the designs tested against each other had their differences in features:
Option A: Collapsible menu with a vertical scroll with on-figure product imagery.
Option B: Collapsible menu with text only
Option C: Non-collapsible menu with toggle button for gender categories and large top view product imagery.
Option D: Collapsible menu with toggle button for gender categories and horizontal scrolling for on-figure product imagery.
To reduce any bias, participants were shown two prototype designs in random order and given a set of tasks:
Explore the navigation and talk through likes and dislikes for a prototype.
Find specific products in the navigation
Participants then rate the prototype for:
Ease of use
Visual appeal
Confidence shopping site with this navParticipants then repeat the tasks above for the second prototype
The Final Design
Based on the results of our AB comparison prototype testing, my design was the clear winner for clarity, organization, visual appeal, and shopping confidence. The team moved forward with this design, and it shipped on our US site on January 26, 2021. Within the first 2 weeks of launch, we tracked users who used the new navigation design and saw an increase of click-through rate by 34.9% and an increase in conversion by 5.65%.
Navigation Header
The navigation header was now updated so that the icon and branding were consistent.
Collection Pages & Utility Links
The navigation is also used as a marketing tool. The previous design on mobile did not include the same one to one experience on desktop. Now, both desktop and mobile users have the same experience across all devices.
During testing we also discovered there were important links that were useful for the user and we named them the “utility links”. The featured collections and utility links are available for the user at all times in the navigation menu. Allowing them to easily access when necessary.
Main Navigation Menu
The main navigation menu is now more cohesive with the brand. The collapsible menu structure allows users to easily open and close their selections, rather than having to click back and forth to find their desired destination as seen in the previous navigation.
Menu of Products
The products are now organized visually and users can easily decipher what the products are with its visual cue.
Hierarchy
I defined the type styles used for the 4 different levels of the navigation. This allowed for a better visual and type hierarchy.
Top level categories are bold weight and all caps
Secondary categories are bold weight and sentence cased
Direct links are thinner weight and sentence cased
Non-clickable links are bold weight and a lighter color in all caps
Accessibility
The prior navigation did not have a focus state that met accessibility standards. The navigation redesign now meets accessibility needs. All text links have an underline that appears during hover or click. And all clickable links have a focus indicator.
Takeaways & Next Steps
During testing, we noticed that taxonomy still has areas of confusion when it comes to naming convention of the bags, which we hope will be mitigated by the use of imagery so users have more context. We have set up performance trackers and will be testing the site architecture and taxonomy in the upcoming quarter.