GapFit Navigation Update
UX / Web Design
Project Overview
Role: UX research, testing, prototyping
Team: Gap Online Leadership, Content Management, UX, Consumer Insights, WCD
Duration: Jan—Mar, 2019
GapFit is an affordable athletic-wear off-brand from Gap. Not to
get confused, it is Gap brand athletic-wear and not Athleta, which
is a brand that belongs to the Gap Inc portfolio. However, we found that engagement was close to none. This was a problem with significant impact to the business.
Objective: Increase engagement by improving the usability of gap.com main navigation resulting in higher conversion rates.
Challenge
The Gap website receives over a million visits per day making the main navigation a crucial business driver. Data showed that the GapFit tab was getting close to zero engagement. We needed to make a change big enough to boost engagement and conversion but small enough to not disrupt the most important thing which is the customers’ shopping experience focused on mobile.
First, we needed to find out why engagement was low to get a better idea of how to solve for this.
Research
First, we wanted to learn about the key words people were searching for when shopping for exercise apparel so we set up a survey to retrieve this information. Our target audience was 100% female due to GapFit being a women’s only brand.
Activewear was the most used word to search workout clothes amongst the group of ladies we surveyed.
Familiarity
Next, we wanted to know how familiar customers were with the GapFit brand so we surveyed two groups: People that have shopped at Gap before and people who have not.
Previous Gap Shoppers
1 in 3 are familiar with GapFit
New Gap Shoppers
1 in 15 know what GapFit is
Total of Shoppers
Of people surveyed are
familiar/know what Gapfit is
Oh yeah, isn’t GapFit like a FitBit but with bands made by the Gap?
-Emily, Connecticut
These were two of the most notable quotes received in our user interviews during the research phase that pointed out the lack of brand knowledge both of our previous and new customers have.
So if...
Engagement & conversion is down
SEO is not suited
for GapFit
Majority of shoppers
don’t know GapFit
Does GapFit have to live in the main navigation?
Key points to keep in
mind were:
1. Data shows that over 50% of our audience is female.
2. The “Women’s” category is the most clicked part of our navigation
3. Most conversion comes from the sub-categories in Women’s
Based on the data we had gathered, it made the most sense to remove GapFit from the main navigation and place its content in the Women’s category.
User Flows
The idea was to run two A/B tests to then run a final A/B test between the journeys that were chosen from the initial rounds to cover all bases before making a final business decision.
A/B Test 1
We set up user interviews with customers from all around the country and ages ranging from between 17-40 years old to test the prototypes I built. First, with A/B test 1 from the user flow above.
Here we learned that the word Active was favored vs GapFit but that less scrolling would be beneficial to the overall experience.
JOURNEY A
The word Active caught
testers’ attention quick
Easy to know where to find the right product
Neatly spread out
Too much scrolling
A bit confusing compared to other categories
JOURNEY B
Many testers skipped over GapFit
It was confusing as to what GapFit means
Some asked “why don’t
these just live within their respective categories?”
Too much scrolling
A/B Test 2
In this second test we learned that by keeping the GapFit products in its own category under the Activewear title, it was easiest to find because the users knew what to expect from this tab. This was the strongest performer out of all four journeys we tested.
JOURNEY B
JOURNEY A
JOURNEY A
Activewear stood out immediately very clearly
While in this subcategory, users knew that this product is for working out
Neatly organized
Clearly labeled
User friendly
JOURNEY B
Neatly organized
Some testers still skipped over GapFit
It was still confusing as to what GapFit means
Once in the subcategory, “active tops” was the only clear indication that this is an activewear section
Final Deliverables
We ended up running the two top performing prototypes with journey 2A (Activewear Subcategory) being the preferred flow by 100% votes.
Finally, we integrated our learnings into desktop and showed improvement made from the former experience.
New Nav Look & Feel
The Activewear subcategory’s final look that is live on the Gap website for both desktop and mobile. To see the live result, please visit gap.com and explore for yourself!
Insights & Results
In the first four weeks after this update, we saw engagement slowly grow and remain steady.
This is the lift in conversion that we saw in the same four week period.
In retail, these small percentages make big differences to our quarterly results. This positive return continued to grow over time which lead to GapFit merchandise gain more demand compared to recent years.
Learnings & Takeaways
In this project I learned the power of testing at scale. In order to get stakeholders to buy into a new idea, data always rules. Gap being a large and established corporation, it can be hard to persuade people to make changes to the live site. Thankfully, the results aligned with our ideas which turned out to be a positive change.
I also learned that sometimes, in order to have a large impact on the business, I don’t need to re-invent the wheel. Small changes like the final result in this project turned out to have a significant positive impact. At times, projects like this one feel like an opportunity to thing big and redesign an entire journey when the answer is much simpler than that.
*Due to NDA made with Gap Inc, I cannot provide exact numbers in data in regard to the research, business gain/loss, and or results that may still be ongoing.