amir

GAP Inc.,

Role

UI / UX Designer

Duration

1 Month

Tools

Figma

Project Type

Design Audit

Year

2024

I conducted a heuristic analysis of Gap’s desktop web shopping experience, I discovered a significant user experience gap: the absence of a saving or favoriting feature.


This study explores:

  • Why I believe a favoriting feature would help customers

  • Why implementing this feature could benefit Gap's business

  • How I designed a solution

Context

Gap.com lacks a key feature that is standard among its competitors, a surprising shortfall for such a large retailer.

Constraints

  • I time blocked 1 month to complete this project

  • No access to design files

  • No budget for user research

  • No development team

"I hardly ever buy something right away when I'm shopping. I like to think about what I want before making a decision. So, having a way to add items to favorites is super handy for me."


-My Wife

What I Would Do Next

If I had more time, I would've like to have built a shopping comparison tool. That allows users to view products side-by-side, peruse through images, features and specs. This would further enhance the benefit of adding items to favorite which could increase engagement.

If I Worked at Gap

I would've liked to have research to determine my hypothesis that users do value a save/favorite feature. Through the research, I'd be curious as to:

  • What users expect to happen once an item is favorited

  • How they interact with an item that is favorited from the favorite list

  • How many items they tend to favorite in a shopping session

  • What information the customer needs to make a purchase from the favorite screen.


I would also be curious of the technical limitations, if any for implementing this feature. I would work with engineers to understand those constraints and adapt my designs accordingly.


Furthermore, understanding Gap's business goals would be crucial.

  • Does Gap see the benefit of adding this for their users?

  • Are my assumptions correct in by adding this feature it would reduce cart abandonment or aid with trending products and inventory management.

Conclusion

I enjoyed this project because it allowed me to build a very common feature for a big company. The nuances and sensitivity to IA and design system proved to be a bit harder to work with then initially thought. Creating new icons & typography hierarchy to new elements that didn't feel out of place was a great excercise.

Why Gap Should Consider Adding Favoriting

Since Gap is known for their affordable pricing, it can be assumed to say that users like a sale or discount on the products they buy.


A favoriting feature will allow users:

  • To save items without an immediate purchase commitment.

  • Easy product recall and navigation

  • Allows for easy product comparison


How could this benefit Gap

  • Reduces cart abandonment rates

  • Generates valuable customer data

  • Increases repeat purchases


This feature can also be used to help with inventory data and track trending items.

The Problem

Existing Gap Design

Providing a Modern Experience

Gap.com is a staple in retail. However, their e-commerce experience is lacking.


Considering IA

A solution should be integrated into the IA with minimal impact and ensure seamless navigation, clarity, and consistency for users.


Design System Constraints

Any solution must strictly adhere to the organization’s existing design system. My goal was to reduce development complexity and preserve the user experience.

What I Did Next

To create a new element in Gap's AI, I used wireframes to map out what a customer would expect from a "View Favorites" page.


Required functionality:

  • Preview Images

  • Ability to remove items from the list

  • Add to Bag/Checkout

Favorites Page

The feature also needs to exist on product tiles around the site. This will allow users to save items without leaving the browse page.

Favoriting hearts displayed over product tiles in Product List Page

Prototype

Interaction

  • Once the viewer lands on a product display page. They are able to save an item without having to navigate to any other page. Allowing for users to quickly add items to their favorite list.

  • In the favorite list they can remove an item by click on the heart and will be prompted with a confirm modal.

  • Users will be able to "Add to Bag" and make the necessary selections for checkout.

The Solution

My Proposed Design

Intuitive favoriting workflow

By providing a simple yet intuitive feature, customers can save items for later in a way that resembles other modernized shopping experiences.


Adhering to IA

The solution was implemented a minimal change in IA, by only adding one button and one page to view favorited items.


Design System

All solutions utilized or considered Gap's existing design system and user flow.

Understanding The User Need

Gap customers expect:

  • Balance between style, comfort and affordability.

  • Promos & sales are very important consideration when making a purchase.


Gap is aware it's customers are expecting quality products at affordable prices, so they often run sales and promos.


Can the assumption be made that:

Users want to track prices and see when their favorite items are being offered at a discount?

Why Gap Should Consider Adding Favoriting

Since Gap is known for their affordable pricing, it can be assumed to say that users like a sale or discount on the products they buy.


A favoriting feature will allow users:

  • To save items without an immediate purchase commitment.

  • Easy product recall and navigation

  • Allows for easy product comparison


How could this benefit Gap

  • Reduces cart abandonment rates

  • Generates valuable customer data

  • Increases repeat purchases


This feature can also be used to help with inventory data and track trending items.

Competitive Analysis

Uniqlo

J.Crew

American Eagle

Many of Gap's competitors offer an inuitive favoriting feature and a favorites page. Customers can view all of their favorited products at any time, once their logged in.

Designing a Solution

Standard & best practices for e-commerce websites that have favoriting include:


  • Heart icon next to the shopping cart in the main navigation bar, so customers can VIEW their favorited list.

  • Heart icon over product tiles in the Product List & Product Display page, to allow customers to SELECT items they want to favorite.


Since this feature doesn't exist, we would need to build a "View Favorites" page as well as the ability to favorite items from a product list page.

What I Did Next

To create a new element in Gap's AI, I used wireframes to map out what a customer would expect from a "View Favorites" page.


Required functionality:

  • Preview Images

  • Ability to remove items from the list

  • Add to Bag/Checkout

Favorites Page

The feature also needs to exist on product tiles. This will allow users to save items without leaving the browse page.

Favoriting hearts displayed over product tiles in Product List Page

Prototype

Interaction

  • Once the viewer lands on a product display page. They are able to save an item without having to navigate to any other page. Allowing for users to quickly add items to their favorite list.

  • In the favorite list they can remove an item by click on the heart and will be prompted with a confirm modal.

  • Users will be able to "Add to Bag" and make the necessary selections for checkout.

What I Would Do Next

If I had more time, I would've like to have built a shopping comparison tool. That allows users to view products side-by-side, peruse through images, features and specs. This would further enhance the benefit of adding items to favorite which could increase engagement.

If I Worked at Gap

I would've liked to have research to determine my hypothesis that users do value a save/favorite feature. Through the research, I'd be curious as to:

  • What users expect to happen once an item is favorited

  • How they interact with an item that is favorited from the favorite list

  • How many items they tend to favorite in a shopping session

  • What information the customer needs to make a purchase from the favorite screen.


I would also be curious of the technical limitations, if any for implementing this feature. I would work with engineers to understand those constraints and adapt my designs accordingly.


Furthermore, understanding Gap's business goals would be crucial.

  • Does Gap see the benefit of adding this for their users?

  • Are my assumptions correct in by adding this feature itwould reduce cart abandonment or aid with trending products and inventory management.

Conclusion

I enjoyed this project because it allowed me to build a very common feature for a big company. The nuances and sensitivity to IA and design system proved to be a bit harder to work with then initially thought. Creating new icons & typography hierarchy to new elements that didn't feel out of place was a great excercise.