Responsive Redesign – Product Page

Gap was one of the first apparel retailer to responsively redesign their experience


Over the years, Gap’s product page had become bloated with information and hard to browse for users looking to evaluate the product, especially on smaller devices. Problems ranged from low quality product imagery to superfluous navigation on the page and discrepancies in information on the web and mobile site.

My Role

UX Lead

Collaborators:  Product Management, User Research, Visual Design, Front-End Engineering, Brand leaders, Brand marketing


How might we provide all the information and tools a shopper needs to make purchase decisions on smaller devices?

Business Goal

To serve the rapidly increasing traffic, make it easier and faster to shop on mobile and tablet devices.

Stakeholder interviews to determine redesign goals

I interviewed my collaborators to establish a set of objectives for this redesign effort from multiple perspectives


The next step was to partner with consumer insights team and look at all the historical and competitive data available on the product page. I also looked at industry trend reports for m-commerce.

This helped inform a competitive benchmarking study to hone in on the best in class mobile product page experiences.

Co-Creation studies

Next critical step was to take a closer look at existing Gap Inc customer behavior and bring clarity to brand leaders about what their customers value on the product page.

I worked with user researchers to do card sort like co-creation study with users who shop the Gap sites.

Collaboration Workshops

I led workshops with brand marketing and creatives to collect their inspirations and get their vision of the product page articulated, independent of the overall design.

Insights based journey map and conceptual model

I visualized the emotional journey of a shopper browsing for products, how they go from a casual to a committed mindset and what role the product page must play in this journey.

Triangulating information from all the research and co-creation studies, I mapped the decision making journey a customer goes through after landing on the product page. The decision goes from being very emotional to transactional.


I followed this up with some free-form concept ideation.

A/B testing to validate direction

I worked closely with my product manager to validate the design direction. Chiefly we were looking at whether removal of the navigation from the page affected conversion and what the best layout for the P1 image would be. Segment C was the leader after a 3 week test.

Design Principles

These are high level grounding principles for the design which help with storytelling, decision making and rationale.

Design for emotion

Capitalize on the demonstrated strong intent to reach up to the product page

Design for evaluation

Guide customers through the process of evaluating a product. Prioritize information and disclose it progressively

De-emphasize Functional Elements

Function and action enablers (color/size pickers etc.) should be noticeable but play a supporting role in the experience

Preserve Existing Information

Retain rich product information that customers find valuable in making decisions

Design for Performance

Customers start seeing actionable information as soon as they land on the page

Behavioral Specs

After various iterations and following a mobile first approach, I documented the entire behavior, information architecture across break-points for the product page.

See full behavioral spec Responsive Product Page

From wireframe to design

Working closely with the visual designer, the wireframes were converted to final visual designs that were modular in nature and worked for all five Gap Inc brands

Few design details

Product prices across brands and categories vary a lot and require a tremendous about of flexibility. In addition these went hand in hand with marketing and promotional messages varying based availability, clearance, new arrivals, temporary markdowns etc. The systems to make these happen have been in place for years and there was no single source of truth across the organization about how many scenarios actually existed.

A major pain point for customers was not knowing what the actual final price of the product is. This could due to a slew of reasons including different colors having different prices, some colors of the product being on promotion while others were kept on regular price, confusing marketing copy.

Pricing business rules PDF
Starting with these system hidden or undocumented rules were uncovered:

All pricing on the site now follows a finite set of displays with a clear logic of how that display was arrived upon. Not only is this being used to simplify things for the backend systems but most importantly customer complaints around product pricing online has reduced significantly.

Along with this, significant customer research based improvements were made to:

One the biggest challenges was overcoming a huge number of color choices that could be at various different price points. Micro-interaction shown below delighted users as well as marketers.

Quantity field interaction

All examples that were researched online either used the the native mobile dropdown (cumbersome to scroll and takes a lot of attention away) or the +/- type of interaction that requires the user to tap till the desired number is reached in addition to taking up more space on the UI.

In short, there was ample scope to improve upon the existing interaction patterns for picking quantity.

Given that a typical user doesn’t have the need to update quantity too often, I wanted to make a much more tap friendly interaction that doesn’t take up a lot of UI space. After a bit of sketching, I came up with the following pattern that can today be seen on all Gap products online.

The field takes up a small amount of space on UI and the user can select their desired quantity with just two taps. This was one the most loved interactions by users during testing.

Working with a visual designer and a prototyper each of these design decisions were tested again before rolling out  the new Gap product page design. In directing detailed research like this, I like to document the framework for the moderator.

After a few rounds of visual design explores to ensure layouts worked for all pricing and color availability use cases the final redesigned page was implemented by heavily pairing with the front-end development team.

Today, due to the modular nature of the design, many more features and improvements have been designed in seamlessly like product video, additional marketing messages, product recommendations,  third party modules like fit finders and gifting etc.

These designs formed the basis of the organization wide design system. And the most important internal stakeholders i.e the Gap brand teams have more defined structure to make daily or seasonal changes they desire without disrupting the overall user experience.

This was one of the pioneering responsive designs in apparel retail.

Usability report

An independent moderator was contracted to conduct extensive interviews for user acceptance. Below is a screenshot from their final presentation made to business, design and product leaders at Gap.