*This project was a part of the University of Washington's Human Centered Design and Engineering (HCDE) MS program
SKILLS
Usability Testing
User Interviews
Prototyping
ROLE
Researcher
Designer
TIMELINE
3 months (2025)
TEAM
4 HCDE Students
How easily can users find items under both product and thematic categories without having to use the search or filter functions?
*Example of a product category is "shoes", while a thematic category is "designer"
What pain points do users encounter while browsing the Nordstrom mobile website?
For 8 weeks we worked closely with our UX research mentors from Nordstrom to conduct a total of 8 usability tests. Each 1-hour session tasked users with finding products that were nested within thematic and product categories to evaluate how they navigate through the website. These sessions took place in-person on the University of Washington campus and consisted of an interview, usability test, and post-test debrief with each participant.
By the end of the 8 weeks, we presented our findings, recommendations, and prototypes to the Nordstrom UX team. As a researcher and designer for this project, I worked on creating the study kit and plan, conducting usability tests, calculating lostness metrics, analyzing data, writing the final report, and designing the prototypes for the Horizontal Navigation feature.
HORIZONTAL NAVIGATION v1
Consolidated content from the horizontal navigation into visual categorical icons with an expandable "View More" option for better discoverability
HORIZONTAL NAVIGATION v2
Limited swipes to three and added an additional "View More" link to avoid endless horizontal scrolling
SHOP BY OCCASION
Added additional options that are displayed on the hamburger menu to better meet shoppers' expectations when browsing for various occasions
HOMEPAGE
Featured "On Trend" categories on the homscreen to increase visibility
We invited eight participants to join us for our usability test. Each session consisted of a survey that was distributed during the recruitment phase, initial user interview, usability test, and debrief. But before we started our tests, we wanted to put ourselves in the shoes of a shopper browsing the Nordstrom mobile site.
PARTICIPANTS
We recruited 8 participants who were all women aged 20 to 39 years old and were considered to be new online Nordstrom shoppers. We narrowed our user group to women only as women make up a significant portion of Nordstrom's current customer base. Additionally, to ensure that we were evaluating products that were most reflective of the users' Nordstrom shopping experience, we selected products that were under the women's shopping categories for consistency's sake.
We define new online shoppers as those who haven't purchased an item from Nordstrom online in the past year. This includes shopping on their mobile website, desktop, and mobile application. "Active shoppers" were also defined by Nordstrom as someone who has made a purchase within the last six months to one year. Based on this criteria, we decided to invite women who had not shopped at Nordstrom in the last year to find people with minimal experiences with their mobile site.
COGNITIVE WALKTHROUGH
In order to better understand the browsing experience and website structure, we conducted a cognitive walkthrough of Nordstrom's mobile website individually. We selected wallets as our test product category and mapped out all of the possible routes a user could take to reach this page without using the search feature. This exercise helped us better understand the site's key features, such as their horizontal navigation and categorization methods, while also allowing us to empathize with users' frustrations. These insights guided us while creating our usability test sessions. Below is a snapshot of one of the paths a user could take while browsing for wallets.
We conducted 8 test sessions in total, with 2 of them being our initial pilot studies. Each session was conducted in-person inside of a private study room located on the University of Washington's campus and were video recorded for data collection and observation purposes.
PROTOCOL
We provided each participant with a consent form for their permission to record the session. Sessions were organized with an initial pre-task interview, a usability test, and a post-task debrief. After each task, participants were also prompted to fill out a five-point likert scale questionnaire to gauge their ease of use.
Three tasks were assigned to each participant, each focusing on a specific part of the mobile site:
We analyzed our data with a combination of quantitative and qualitative analysis methods. This included calculating lostness, success rate, and ease of use ratings, in addition to analyzing interviews through affinity diagramming, click journeys, and erroneously tapped links.
LOSTNESS
Lostness is the user's state of confusion when trying to complete a task on a mobile website. It can be calculated by finding the number of touch points the user made compared to the minimum number of clicks, swipes, and scrolls required to complete a task. Our team modified the variables in the formula to better suit our specific study.
This metric was an interesting one for our team to calculate because it was the first time any of us had tried to quantitatively measure this insight! It was also rewarding to be able to introduce this metric to the Nordstrom team to further support our recommendations.
L = lostness
N = number of different touch points
S = total number of touch points used during the task
R = minimum number of touch points that must be used to complete the task
Sources Smith, P. A. (1996). Towards a practical measure of hypertext usability. Interacting with computers, 8(4), 365-381.
To synthesize the data we collected during the sessions, we created a user journey map to visualize participants' tendencies while browsing through the site. We also further broke down our findings based on whether they were observed throughout all of the tasks assigned, or if they were only observed during specific tasks. Finally, we utilized Nordstrom's specific severity rating system to assign the respective severity rating for each insight, which allowed us to prioritize our recommendations when presented to the Nordstrom team.
DIFFICULT HORIZONTAL NAVIGATION
Users had a difficult time finding the horizontal navigation, complained about the length of the scroll, and also didn't always recognize that it was scrollable.
*Horizontal navigation here is the scrollable bar with the list of categories for the user to browse through
I feel like the bar is really long, especially for a mobile website. It's like forever.
Users expected to see different occasions under this category, due to their own preconceived connection between occasions and themes. The hamburger menu also only displayed three occasions at a time, which led users to believe that there were only three available, missing the "All Occasions" option.
I think skiing is an occasion…But I kind of thing of doing something as an occasion as well.
HOMESCREEN DIDN'T MATCH EXPECTATIONS
Users expected to find the featured categories to be on the homescreen instead of under the hamburger menu. This led them to feeling confused and frustrated as they couldn't find it while browsing.
I thought it would show me the most recent items added to the site…or at least let me easily click to the latest trends.
TOP 3 INSIGHTS
We prepared 7 recommendations for the Nordstrom team, but below are the recommendations we prepared for the top 3 prioritized insights.
SHOP BY OCCASION
To match the shoppers' expectations, we recommended to include other occasions, in addition to the current ones, that align with their understanding of "occasions". Additionally, since most users immediately gave up after only seeing three occasions displayed in the hamburger menu, it's important to list additional occasions there to help the user realize there are other occasions they can browse through.
Before: Only displayed three occasions in the hamburger menu
After: Include additional occasions
HORIZONTAL NAVIGATION
We provided two alternative recommendations to help resolve the issues faced with the horizontal navigation during our tests. The first method was to replace the horizontal navigation with the current content navigation to help address the lengthy horizontal scroll and missable location. The number of scrolls should be limited to three swipes and at the end of the three swipes, a "View more" link should be available for the user to view the remaining categories in a pop-up window that would allow for vertical scrolling. Vertical scrolling is more natural to users and the use of images makes it easier for users to browse through.
The second method was to keep the horizontal navigation, but limit the swipes to three with a "View more" link at the end for the user to view the remaining categories in a dropdown list with vertical scrolling. The last category that's displayed on the screen should also be partially cut off to indicate that it's scrollable, and be consistent throughout different pages.
Before: Long swiping through the horizontal navigation and both content navigation and horizontal navigation are available.
Content navigation
HOMESCREEN
Since it was important to Nordstrom to promote the latest and trendiest products, we recommended to feature the "On Trends" pages on the homescreen to grab the users' attention immediately and increase its visibility.
Before: No section featuring "On Trend" categories
After: Addition of an "On Trend" section near the top
After: Consolidated horizontal and content navigations with an expandable "View More" option for better discoverability.
V2: Limit horizontal scroll to three swipes with a "View More" option for better discoverability
My team and I presented our research insights, recommendations, prototypes, and lostness metrics to the Nordstrom UX research and design teams during their UX Team meeting. We were excited to introduce our lostness metric to the team, as it was one they had not utilized in previous UX research projects, so we were able to provide a new quantitative data point to further support our findings. This presentation raised awareness of new usability concerns, such as difficulties discovering the "On Trends" section, while also raising priority to existing concerns, like the horizontal navigation. From our recommendations, an additional category for the "Shop by Occasion" tab has been added in their latest design release.
TAKEAWAYS
ALIGNING BUSINESS GOALS WITH USERS' NEEDS
Nordstrom's goal for this project was to increase the number of customers who successfully place products in their shopping cart and check out on their mobile site. The users needed a mobile site that would be intuitive and easy to browse through. By identifying critical usability issues, we were able to provide recommendations that would improve the mobile shopping experience, thus promoting more online shopping.
QUANTIFYING QUALITATIVE DATA
Lostness always seemed like a qualitative insight observed during usability testing, but during this project, we were able to quantify it to further support our observations. We modified the formula to account for gestures used on a mobile device instead of a computer, like how it was originally calculated. By introducing this additional metric, we were able to not only show example video clips of our participants getting lost during the usability tests, but also show them the numbers that supported this issue.
MODIFYING ON THE GO
When we planned the test scenarios, it was in January when winter was at its prime, so our scenarios for the trends category were tailored to winter themes. But by the time we conducted the sessions it was already the end of February. During our pilot study, we quickly discovered that people no longer associated winter with "On Trend" because they felt that spring would be the latest trend instead. This led to an increase in mistakes while the user was browsing for this page. We had to be quick to adapt our scenarios after the pilot study to ensure that we wouldn't introduce biases into the rest of our sessions.