top of page
Wildlife Background

Old Navy Product Page Redesign

Old Navy is biggest revenue generating brand from the Gap Inc. family. To further improve their business, we took on this "visioning" project - where we re-designed and re-imagined their Product Page. (We also worked on visioning for the Category Page at the same time but that is not covered here.)

Step 1: Hypothesizing

Starting questions, ideas, & beliefs:
What's the value?

Throughout the journey - home page, category page, product page, bag and checkout - what are the users looking for? Pay extra attention to not lose sight of what that page exists to do.

Fewest clicks to achieve the goal

Minimize friction, lose the distraction, let the customer shop asap! We want to make the shopping journey efficient and easy.

Install confidence

Give the customer confidence to shop with us. Design to promote their faith in the quality of the product, the sizing and fit, and no-surprise pricing.

Think ahead and personalize

What would complete their outfit? How much more until they qualify for a promotion? What do we already know about them to make this shopping experience better for them?

Other things to keep in mind

The design has to be flexible enough to be adaptable to other brands.

We need to keep the customers' privacy in mind and give them full-control of their information.

What are the business needs and must-haves?

Now, how do we translate all that into tangible design concepts?
Some key feature ideas and things that I considered:

  • Large product images

  • Easy way to view all product images to compare

  • Information "drawer" to keep the page tidy

  • Easy to understand and transparent pricing (esp important because the pricing system at Old Navy is really complicated)

  • Showing valuable information like customer reviews in a pleasant way

  • Size/fit finder/helper

  • Outfit ideas and recommended products

  • Effective interstitial modal(?) and added-to-bag confirmation

  • Showcase wide range of sizes and body inclusivity brand messaging

Step 2: Research Phase

After writing down our assumptions and ideas, we dove into competitor analysis and research. We also looked at Baymard studies and sought for inspiration from different industries (and not just retail). This gave us ideas of new features and unique UI solutions for a better user experience.

Competitor.png

Step 3: Concept Design

Diverging

Next was the "diverging" exercise. We used the double-diamond approach for this fast-paced project to get as much creativity in at this step of the process. This meant myself and the other two designers wireframed our own ideas separately, intentionally not collaborating. We then presented our ideas at a review session that included our managers and directors of UX.

​

We would then "vote" or give thumbs-up on the concepts by placing stickers on the print-outs of the designs.

double diamond.jpeg
Converging

Once the concepts were voted on, we began the ""converging" portion of the diamond. At this point, we aimed to bring together all the different ideas and distill them into a handful of designs. Here are the concept mockups:

PDP Desktop.png

Step 4: Testing and gathering feedback

Presenting it to the stakeholders

Once we were happy with our concepts, we presented these designs to all the relevant stakeholders: brand and business leaders, product managers, and developers. They provided valuable feedback on feasibility, brand expression and business goals. 

User research and feedback

And of course, we had to get our users feedback. We used Usertesting.com to get general impressions and design preferences. These were moderated remote tests and we were able to hear what our users liked + dislike to further clarify our designs.

Step 5: Final Design

Many iterations later...

Everyone agreed to try out the following two designs. The brand leaders approved them to fit their brand identity and business goals and product managers and devs agreed that it was build-able in the time frame we had. And when we tested it with users, these two designs tied; so, we all agreed to test these two out via live A/B test against the existing product page.

 

I'm VERY happy to say that BOTH of these new designs out-performed the old product page. Then, after testing them for more time, our "Bricks" layout won over the "Thumbnail" layout - which is what you can see live at oldnavy.com today!

Design 1: "Thumbnail" layout
Design 2: "Bricks" layout

Notes

  • This product page redesign was one half of the Old Navy Visioning project; the other half being the category page redesign. 

  • This project was tackled by me + two other sr designers. While we shared some responsibilities, I focused primarily on the product page half; the other designer did the category page, and the last did most of the prototyping work. 

  • We worked closely with our UX manager and director on a daily basis throughout the duration of this project (roughly two months). 

  • Not pictured here: the mobile version. 

bottom of page