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.
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?
To serve the rapidly increasing traffic, make it easier and faster to shop on mobile and tablet devices.
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.
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.
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.
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.
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.
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
After various iterations and following a mobile first approach, I documented the entire behavior, information architecture across break-points for the product page.
Snapshot from the behavioral spec document
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
Final visual design
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.
fig: diagram capturing pricing business rules
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.
Interaction to accommodate complex pricing markdown use cases
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.
Interaction to simplify picking quantities
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.
Interaction to accommodate complex pricing markdown use cases
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.
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.
