top of page
hero image.png

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 main navigation resulting in higher conversion rates.



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.


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.


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.


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


negative mark-red.png
negative mark-red.png
negative mark-red.png

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.




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


negative mark-red.png
negative mark-red.png
negative mark-red.png

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 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.

bottom of page