UX Design | Visual Design | Search | Tagging | Filter
How I made backpack search easier for The North Face store
Helping students and parents to find the perfect backpack for the new school year
OVERVIEW
Problem
Students and parents have difficulty finding school backpacks with the right features and capacity.
Because…
TNF has many backpack products to choose from.
It's hard to see the differences between many backpacks besides their front face design.
The website lacks information about the unique features each backpack model has.
It's hard to know if this backpack will fit all items shoppers would carry before purchasing and using.
Liter (L) amount in the product description doesn't help shoppers to understand the backpack capacity in a useful way.
Why this problem is important
Not finding the right product during the first purchase due to lack of information might lead to the dissatisfactory second purchase and customer churn. Customer's satisfying initial purchase leads to higher customer retention rate and sales growth.
Solution
I redesigned The North Face's website to provide more detailed guidance for users to find the backpack with the right features, capacity and fit.
My Role
UX Research, UX Design, UI Design
Tools
Figma: wireframing, prototyping
Timeline
Jun - Aug 2019
Refined in 2020.
My Approach
1. RESEARCH
Overview
Focus Group
User Research Analysis
Task Analysis
Interviews & Affinity Mapping
User Personas
Journey Mapping
My Contribution
The first phase of the research, the focus group, was done with my TNF design team which led me to discover significant pain points. From there, I owned the rest of the project.
UX Research
User Research, Comparative Analysis
UX Design
Wireframe Sketches, Screen Flow, High Fidelity Prototype
UI Design
Added Features during Redesign
FINAL DESIGN
Find a Right Backpack with our Expert Guide
Save time searching for the ultimate backpack with our backpack search guide.
Answer a few questions about you, and we will recommend you the right backpack.
Compare Desired Backpacks At a Glance
Quickly compare the important details on a single page
Select up to three backpacks of your interest, and compare every detail at a glance. No more going back and forth between product pages to narrow down your choices.
Reference Fit with Models Similar to Your Size
See how the model with a height similar to yours carry the backpack.
By selecting a model size, you can picture how the backpack would fit on your torso.
Try Packing Your Items Before Buying
Choose items you use and see how they would fit into the backpack.
Double-check if your belongings will fit into the new bag before the purchase. Selected Items are auto-placed in the recommended compartment for the best configuration with a gamified interaction.
RESEARCH
Background
As part of The North Face backpack design team, the initial objective of our research was focused on the physical product. To update TNF backpack product lines, we aimed to determine what students carry in their backpacks and what they look for when shopping.
During that early group research, I found pain points in users' backpack finding process using our website. Because enhancing the user experience of the website wasn't the priority of my team, I decided to dig deeper and redesign The North Face website as a personal side project in hopes to bring awareness of the current UX issue TNF website has among the product and sales teams.
Focus Group
Choosing High School Students as Research Group
We decided to focus on high school students as our main user research group because it is the biggest shifting point in teen life. Starting high school means a drastic lifestyle change. Today's high school students are notoriously busy. Some students get to school at 6 am for sports practice, then go to classes, eat lunch, extracurricular activities, or even part-time jobs, and don't get home until evening. They need a backpack that can keep up with them and will fit all the things they need throughout the day.
The transition from Middle to High school
A Shift in lifestyle leads to the need for a new backpack.
Conducting Research: Focus Group
My team and I visited a local high school to meet with students who volunteered to participate in our focus group. The purpose of the research was to hear about what they carry to school daily and what they look for when purchasing a school backpack.
I took the lead to come up with the focus group questions and agenda to help the research session stay focused on the goal. I asked the participants to bring their current backpack and share what they carry inside, what they like/dislike about them, and finally how they found and bought the backpack.
Insights on Backpack Products:
🎒
High school students need a bag that can carry books, electronics, and school supplies alongside whatever they might need for the gym, rehearsal, or practice. Every student's day looked slightly different, therefore the need for backpack features was also different.
Quotes Around Backpack Shopping Process:
🛍️
During this process, I discovered unexpected pain points in their backpack finding/shopping process. However, pain points around the shopping process were not my team’s main focus, because we were looking for insights to help designing backpack products and not a digital product. As a designer, I was part of the long process of research, design iterations, prototyping to put each product on the market. I found it unfortunate that users are struggling to find value in the backpacks and features that were designed with intentions. Below are a few quotes on backpack finding process from the focus group.
The insights gathered led me to see the need of the users and to explore ways to bring awareness/ direction within the brand. I decided to explore UX solutions to redesign The North Face website as a personal side project.
User Research Analysis
Key finding from focus group:
“Will it fit?”
Users want to know if a backpack would fit all their school items before buying which is hard to know until using.
Two Different User Groups Identified
As many students shared their backpack finding and shopping process, I learned that most of the time it’s a shared experience between the student and their parents. I identified the two main user groups, and their unique roles are listed below.
👩🏽🎓
Student
ROLE: Browse. Choose
👫🏾
Parents
ROLE: Browse. Approve. Make the Final Purchase
User Journeys of Purchasing a Backpack
When students and parents are involved in the backpack shopping process, It usually happens in these two steps.
👩🏽🎓 → 👫🏾
Journey Type A
Student browses and decides
Parent(s) approves and makes the final purchase.
👫🏾 → 👩🏽🎓 → 👫🏾
Journey Type B
Parent(s) browses and narrow down options
Student chooses
Parent(s) makes the final purchase.
Task Analysis
Based on the data collected through focus groups and exploration of TNF's website, I created a task analysis for each context to better understand and visualize each user group's needs when buying a school backpack. Here's the summary of the analysis:
Interviews & Affinity Mapping
To better understand the user journeys and needs we might have missed from the initial group research, I conducted structured interviews with students and parents from my personal circle. I asked about their most recent school backpack shopping experience and gained the below insights after analysis.
Affinity Mapping
I synthesized the results using affinity mapping and gained the below insights:
There are too many backpacks that look and feel similar and is hard to choose the right one.
it's hard to see the differences between many backpacks besides their front face design.
It's difficult to know if all school items will fit into a backpack before buying and actually using it.
The organization system is often the most important factor to consider when purchasing a backpack. A backpack that doesn't fit necessary items is likely to cause hassles of bringing a second bag.
The website lacks information about the unique features of each backpack product.
Parents see an added value if the backpack has more pockets and features for easier organization.
Parents look for comfort and support in backpacks, for carrying heavy loads daily.
Students usually browse for backpacks using their mobile device, and parents purchases either on mobile or with larger devices they use.
Additional Research
In addition to user interviews and analyzing data, I conducted contextual inquiries, analysis of product reviews, and frequently asked questions on TNF's website. I organized the findings with affinity mapping.
🙋
Users need assistance in the following areas when choosing the right backpack for school.
Capacity:
Liter (L) amount in product description is not intuitive for users to understand the capacity in a useful way.
Features:
It's hard to translate product features and imagine the compatibility with their use case scenario. It's difficult to know if all school items will fit into a backpack before buying and using it.
💁
When they need help, they look for resources from the following places:
Product reviews:
It is helpful to reference other shoppers' experiences with the product, but as every student's day would look slightly different, the need for backpack features might also be different.
FAQ:
It's hard to find specific questions regarding specific products.
Search Recommendations:
As recommended products usually vary in brands, the user is likely to leave the site and shop at different brands' websites, which results in losing a potential customer.
User Personas
Persona
I created the following personas based on the data gathered from interviews and research analysis. Since I learned there are two main user groups involved in purchasing school backpacks, I created two personas: a student who will use the backpack and a parent who will buy a backpack for their teenager.
Anti Persona
Since I'm focusing on TNF's online shoppers who want functional backpacks for school, I also created an anti-persona who shops for backpacks only by its aesthetics and prioritizes style over function.
Journey Mapping
Who Initiates?
I made journey maps for two personas, the student and the parent. The backpack shopping process involves both of them, but the details of each step vary depending on who initiates the shopping.
DESIGN
Brainstorming
I started brainstorming with two quick exercises. To make fast sketches of 'bad solutions' and 'good solutions' in a limited time. As I was brainstorming, I referred back to the needs discovered during the previous research stages to make sure that the solutions I sketched addressed some of the user needs. I also decided to design around a tablet screen, as It was the most commonly used device when the parents and high school teenagers used to shop together at home.
Design Concepts
I combined some of the ideas from brainstorming and sketched a set of wireframes to see the wide range of solutions.
Concept A: Search by Feature
In this concept, the user has an option to narrow down the search by selecting a few features displayed on the top part of the backpack page. The features such as '13 inch laptop sleeve', 'water bottle pocket' or 'tablet sleeve' are shown, and users can choose the ones they would need in their new backpack. Users are then presented with the search result of backpacks that has the selected features. This concept allows users to quickly find the backpack with the necessary features by asking users to answer the questions during the search, they would be otherwise asking themselves clicking every backpack available.
Concept B: Compare Backpacks
Concept B allows users to select up to 3 backpacks of their interest and compare the items. The comparison shows categorized information such as size, fit, capacity, and organization of each backpack next to one another, making it easier for users to see the difference in features and functions of the backpacks. This allows users to compare the interested backpacks at a glance without having to go back and forth between a few different product pages.
Concept C: Feature Recommendations
This concept helps users who are unsure about the backpack features they need and are overwhelmed by Concept A. Through a series of questions to verify the users' circumstances and priorities, the result provides users with a set of features that would best suit their lifestyle and the primary usage of the backpack. With the recommended features, users can find which backpack would work best for them.
Concept D: DIY Backpack Configuration
In this concept, users can try packing their backpacks before buying, which is one of the cons of online backpack shopping. On top of the regular internal organization photo with items already packed in, users can choose to try their own item configuration by selecting items they would carry and seeing how they fit into the backpack. It provides a gamified interactive shopping experience as well as giving users a chance to try the backpack's organization before deciding to purchase.
Concept E: Change Models
The last concept enables users to see the backpack carried by a couple of models of different heights and body sizes. Most of the TNF school backpacks are used by both adults and children. As one of the parent shoppers' common concerns is the fit on the shorter teenagers, providing fit photos of different models helps parent users to gauge the fit on their children by seeing the photo of the shorter models
User Survey
I conducted a quick survey and asked 5 target users about the above concepts and their feedback. After walking through each of the concepts, I got positive feedback on all of them from most of the participants.
DIY backpack configuration concept brought the most interest by both the parents and high schoolers, as it would allow them to understand how the new backpack would be used and fit their items in a fun way.
Search by feature was another well-received concept, but some of the users mentioned the terminologies used in features were a bit confusing to understand right away.
Compare backpacks & Change model brought the most immediate acceptance by the users since they are already commonly used in many different tech device/apparel shopping platforms. Some of them said that it would be more appealing if the comparison had fewer words and more visuals.
With this feedback, I decided to combine all of the features throughout the different stages of user flow. Most of the students used 10"+ screen devices/tablets for school. It was also the most commonly used device when parents and high schoolers are shopping online together at home.
High Fidelity Design #1
I made a set of wireframes using Figma to test the basic flow of the final design. Since I wanted to check the final design meets the users' needs before finalizing, at this stage the purpose of design is to see how the design functions, not how it feels visually.
EVALUATE
Usability Testings
To evaluate the user flow of the website, I conducted several usability testing sessions with potential users. Users first got to see the current The North Face website and confirmed that they need a new school backpack. They were given the following task for usability testing.
After they completed the task, they were given a short survey asking whether they would use this backpack search guide system next time they shop for a school backpack. 80% of the users said yes and that it would help them to find the right backpack for their needs. Despite the limited size of the user testing group, it confirmed that the new design is considered usable and beneficial for most target users. Referencing some of the insights I gained from usability testing, I revised the design.
| Backpack Search Guide: Encouraging to Use Help
Original:
User Scrolls Through Product Page or Uses Filter to Find the Desired Backpack
Progress
Select Desired Features to Find a Right Backpack, but Visually Text-heavy
After:
Promotes Benefits of Using ‘Search Guide’ for User Engagement
Added visual elements and values to get started
| Search Guide Questions: Answer to Get a Recommendation
Progress:
Text-heavy Questionnaires and Unclear Instruction Create Confusion
The process has multiple steps to get to backpack recommendations
After:
Straightforward Process with Direct Product Recommendations
Simplified the overall search guide process.
More straightforward recommendation.
| Compare Backpacks: Comparison at a Glance
Original:
User Has to Read Details on Each Product Page for Comparison
Progress:
Can Compare Selected Items, but Chart is Text-heavy for a Quick Comparison
Written in industry vocabulary and difficult to understand for users
After:
Comparison Specific Categories with Clean Accordion UI
Made the chart simpler for quick comparison
Written in a more straight-forward tone
| Gauging Fit: Option to Select a Model Size
Original:
Learn About Fit from Reviews and a Photo of a Model with No Size Info
Progress:
Select Model Size to See Fit Difference
Model size includes height info
After:
Switch to Preferred Viewing Option for a Quick Shopping
Tile view & carousel view are available
| Backpack Configuration: Try Packing Before Buying
Original:
User Tries Packing After Purchase
Progress:
Select Item Icons and Pack the Bag
DIY configuration feature banner needs more visual explanation for its functions.
After:
Select Photos of Items for Similar Experience to Actual Packing
DIY configuration banner communicates more effectively with an image of the unpacked bag with items.
Icons are replaced with photos
Selected Items are auto-placed in the recommended compartment
More Projects
