Imagine this..
It’s about to be Christmas time, and you are buying your favorite niece new clothes.
As you open Macy’s website, you are lost in the ocean of navigation tabs, struggling to find something she will like.
Macy’s Context Hierarchy
Long story short
OVERVIEW
As an e-commerce website, Macy's offers various features to enhance the online shopping experience. With a website this large, my team and I noticed too many people were becoming overwhelmed with information overload and would click-off of the website to save their mental space.
Evaluate and reformat the site to reflect how users find information.
Tools: UX Metrics, Notion, Miro
Duration: February-March 2023 (4 Weeks)
Context
Diego Marierose | UX Researcher
Jennine King | UX Researcher
Team
Project Manager
Research Analysis
My Role
Increase the findability and reduce the cognitive load when searching for products on the website.
GOAL
THE PROBLEM
Increase the findability and reduce the cognitive load when searching for products on the website.
Complete redesign of the information architecture of the e-commerce website, with focus on Men’s, Women’s, Kids’ clothing and accessories.
SOLUTION
With the time constraint for this project, our first tasks completed was creating a proto persona. The proto-persona helped us to describe the target user and audience based on real-life experiences we have had with people in our lives. By starting off our research by creating a proto persona, we were able to align our assumptions about the user.
INITIAL RESEARCH
The empathy map was made on Miro for ease of collaboration.
To create our proto persona, we first completed an empathy map. This allowed us to outline what we each believe the user would say, feel, think, and do. It helped us to define elements for our User Persona.
Meet Melissa Sanchez, a 47 year-old HR Manager from San Jose, CA.
She is a mother of 3 girls, with the oldest being 17 years-old.
Typically a busy women, by being involved in all her girls; activities.
Doesn’t have the time to shop in stores, so mostly does her shopping online.
Macy’s Credit Card holder
Loves finding the best deals
With our user persona clearly defined and researched, we were able to start the groundwork for the website itself.
With a large e-commerce website, we needed a visual diagram of the current website navigation. We felt a sitemap was the best way to organize the vast amount of content and section each subcategory off by color. With each of us living in different area, we utilized Miro because of its ability to create simple diagrams to iterate on in one shared workspace.
SITE MAPPING
Each category was split up by navigation type and color coded.
When we finished creating the sitemap, we realized we had a monster of a project ahead of us if we decided to simplify the full website. With the time constraint for this project, it was not possible.
Instead, we decided to prioritize sections we agreed could be condensed and reorganized for a better user flow.
Each color box highlights the areas we chose to prioritize for the remainder of this project.
The categories we aimed to focus on were sections that appear multiple times in each subcategory, areas that could be condensed together based on similarity of products, and areas that could be condensed together based on similar age.
These navigation sections were :
Based on Gender and Age
Shoes
Women’s/Men’s/Kids’ Clothing
Appeared Multiple Times
Discover
Based on Similar Products
Handbags
Accessories
Beauty
Using the prioritized categories we decided on earlier, we were able to create 36 cards for the targeted sections. My team and I wanted to note the behaviors of our research participants in how their mind maps organized these sections in their head. A card sort was the best way to map this data out.
Using UXMetrics.com, we imputed our cards and categories and shared the survey link with 25 participants, who passed a screener survey to be eligible for the test.
CARD SORTING
Cards were created on Miro for collaboration purposes.
While research participants were completing their card sort, we asked them to also complete a sample tree test of the current structure of the website.
This was aimed to asses the current usability of the user flow on the website. We wanted to answer the question,
“Where are users getting stuck when they search for products?”
To set up the tree test, I worked with Jennie to create the user flow of the current navigation on the website in the areas we were focusing on. We created 5 detailed scenarios and tasks to have participants complete.
We utilized UXMetrics.com to create a digital tree test to send to research participants. These tree tests had 5 tasks for participants to complete and tracked their decision flows based on time on the task and where they clicked on the screen.
TREE TESTING
Sample look at the tree test given to participants.
We found our participants naturally grouped gender label’s with the gender specific category.
CARD SORT ANALYSIS
Image pulled from data results showing grouping based on gender.
Interestingly enough, we found our participants less sure where to categorize the Juniors section, as it can relate to young women and older kid’s.
Image pulled from data results showing unsure grouping.
With the broad titles for accessories, our participants were more likely to group Watches and Accessories under Jewelry, showing due to the similar product usage, they believe they should go together.
Image pulled from data results showing grouping based on similar products.
Following the card sorting survey, our participants confirmed our suspicion of having a hard time deciding which category Juniors falls into : Women’s or Kids’
TREE TEST ANALYSIS
Image pulled from data results showing significant incorrect clicks to find All Juniors.
Our participants had a hard time deciding which category to find Watches in, while it was under Jewelry.
Image pulled from data results showing significant incorrect clicks to find All Juniors.
KEY INSIGHTS
Clear and effective label names are essential for users to find items they are searching for.
With too many options, users have a hard time understanding the different category sections.
Many current labels repeat and are found in multiple places.
Based on the data gathered from the card sort and tree test, we knew we had some work to do on the sections we decided to prioritize.
Starting off with simply renaming a few sections, we were able to simplify the confusion between genders and product preferences.
We also made the Discover categories, their own primary navigation. This will declutter the categories having less elements in the menu.
SOLUTION
Image shows the revised site map with annotations in the areas that were revised.
We made annotations to clearly identify the areas we changed. This was to help us stay organized and visually see where what was redesigned and why. This helped us maintain clear communication throughout the project.
Close-Up of the Annotations
With the revised sitemap, we created a new tree test to gather insights from participants to see if the simplified redesign solves the problems users are having.
TESTING THE SOLUTION
Originally, our participants has a hard time deciding which category to find Juniors in, for this we created 2 Juniors section.
Found under All Women’s
Found under All Kids’.
This changed proved to be successful.
Image pulled from data results showing successful results to find All Juniors.
With a broader category name, participants were more successful at navigating to the correct selection.
The Accessories tab would hold : bags and wallets, jewelry, and sunglasses.
This changed proved to be successful.
Image pulled from data results showing successful results to find Accessories.
We also made a new section on the primary navigation called Face & Body to be more inclusive to all beauty products.
The Face & Body tab would hold : Cologne & Grooming, Face Care, Hair Care, and Styling Products.
This changed proved to be unsuccessful.
Image pulled from data results showing unsuccessful results to find Face & Body.
Reflecting on this project, I can confidently say that it was an incredible opportunity for me to gain a comprehensive understanding of the intricacies of an e-commerce website's architecture and navigation. By constructing a detailed sitemap, my team and I were able to enhance the user experience by streamlining complex categories and implementing more intuitive labels. Working collaboratively with my team was an absolute pleasure and allowed me to hone my time-management abilities, as well as showcase my leadership skills. Overall, this project has been a rewarding experience that has enabled me to develop both professionally and personally.
Go Back to The Drawing Board
Despite the progress we have made, it is clear from the results of our final testing that there is still room for improvement in the website's navigation. To ensure that we are implementing the most effective changes, I recommend conducting additional card sorting and tree testing. This will allow us to gather more comprehensive data and insights that can inform future modifications. My goal is to ensure that the website is as user-friendly as possible before it is handed over to the development team for implementation. By prioritizing data-driven decision-making, we can create an even more seamless and intuitive user experience.
