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.
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
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
Outfit ideas and recommended products
Effective interstitial modal(?) and added-to-bag confirmation
Showcase wide range of sizes and body inclusivity brand messaging
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.
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.