top of page

Old Navy App Redesign

Through meticulous user research and user testing, I identified and addressed issues such as confusing information architecture, inefficient navigation bar, and low usability of customer reviews in the Old Navy App. 

My Role

UX Designer

Project

Personal project

Duration

Sep - Nov 2023

O1.png

Old Navy

Project Review

  Background

2.png

​- Homepage was repetitive and cluttered with information

- Full-page navigation hindered quick transitions between product categories

- Customers expressed anxiety about not being able to track their delivery via a map

- Users desired the ability to share their reviews in pictures

By reviewing the interviews and survey
截屏2024-02-26 下午9.54.06.png
  Wireframe

- Designed the hamburger navigation with a filter feature that allows users to browse products under multiple categories at once, which is very important for users who need to buy multiple kinds of clothes

- It was important for both users who had already purchased and potential users to share/view product images in reviews

- Helped ease users' anxiety of waiting for delivery by accessing the map tracking interface.

arrow.png
  Journey Map

- Old Navy Target Audience: 90% female, ages 35-44, having children, being married -- Persona: Linda

- Map the user journey, based on Persona's characteristics and pain points, from the moment the user starts browsing the Old Navy APP to the completion of the purchase.

- Identify and describe the key touchpoints, emotional states, and behaviors that the user encounters at each stage of the journey

p1.gif
2.png
IMG_2559.heic
 4  User Testing

Testing scenario: As winter approaches in New England, you'll be shopping for yourself and your husband some warm clothes. Explore the Old Navy App to purchase discounted coats for both you and your husband.

p2.gif
arrow.png
截屏2024-02-27 上午12.37.11.png
 5  Next Step

01

Seamless Integration of "Add to Cart" Button

The logical progression in UI design is to seamlessly integrate the "Add to Cart" button at the bottom of the product detail page. This strategic adjustment aims to enhance the overall user experience, aligning precisely with user expectations and UI standards.

02

Constant "Hover" Effect for Cart Button

Implementing a constant "hover" effect for the shopping cart button aligns with UI guidelines, encouraging increased user engagement with the shopping cart and positively impacting app usage.

p3.png
p4.png

03

Intuitive Slider Button for Price Ranges

Introducing a slider button for price ranges maintains UI consistency and harmonizes with users' intuitive mental models, offering an enhanced and efficient means for product filtering.

04

Strategic Relocation of Filters

Strategically relocating filters from the navigation menu to the homepage has surpassed user expectations, significantly improving filter discoverability.

bottom of page