Old Navy Product Page & Category Page Redesign

Old Navy is one of the five brands under the Gap Inc., and by far the best performing of the five. To maximize their earning potential, we poured our energy into improving their shopping experience with the mentality that if it does well, we would roll out the design to the other brands. So this is the "visioning" journey of Old Navy's product page and category page.

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?

So let's talk features! Here are some key feature ideas and things that I considered:

Category Page -

  • Easily accessible and discoveable product filters 

    • Can we save personalized filters?​

  • Product grid size adjuster

  • Quick Add

  • Quick View

  • How to best utilize the above of the grid 'banner' area (e.g. jump link, subcategory navigation, mass size filtering)

Product Page - 

  • 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

Research Phase

At this point there was a lot of researching that was done. That meant looking at competitors, reading Baymard studies and getting inspiration from different industries. 


Wireframing and Concepting


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

And so began the ""converging" portion of the diamond. At this point, we needed to bring together all the different ideas and distill them into a handful of designs. 

Final two designs
PDP in Browser.png
PDP Thumbnail in Browser.png