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.
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
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.
Step 3: Concept Design
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.
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:
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
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.