CP4-Portfolio-uniqlo-cover-page

Uniqlo’s Mobile Shopping  Experience Redesign 

 A CASE STUDY    

THE CHALLENGE

Tasked with the design challenge to evaluate the usability of an existing digital product by conducting a heuristic evaluation using the 10 Usability Heuristics for User Interface Design. My team and I picked Uniqlo's mobile app and more specifically the shopping flow, where we identified the pain points that may hinder the customer's shopping experience.

PROJECT DESCRIPTION

Timeline: 2 week

Team: 3 UX designers

My role: UI designer / copywriter / researcher

Skills: heuristic evaluation, UI design

​Tools: Figma

WHAT IS HEURISTIC EVALUATION?

Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. In our evaluation process, we used Nielsen Norman's 10 Usability Heuristics for User Interface Design to reveal insights that can help to enhance product usability from early in development.

nielsens-heuristics

INSIGHTS & FINDINGS

With the heuristic evaluation principles and our initial app look through, we decided focus on the shopping flow from the initial search through to check out.  We found our greatest areas for improvement on the Uniqlo app were stated as per the below: 

2 – Match between system & real world | 3 User control & freedom | 8 Aesthetic & minimalist design

Redesigned-Flow-Uniqlo-Mobile-App-3

Heuristic 1 – Visability of systems status

The app informs the user once an item is added to the cart. However it misses important details on the item added.

Redesigned-Flow-Uniqlo-Mobile-App-2

Heuristic 3 – User control and freedom

The app’s navigation is rigid and lacks flexibility, as there is no back button in the search journey. To venture back to the previous screen the user is required cancel their search, thus loosing their Search/Checkout progression. 

Redesigned-Flow-Uniqlo-Mobile-App-1

Heuristic 8 – Aesthetic & minimalist design

The mobile UI particularly on the home page appears to be the same as the desktop website version and at certain sections are not scaled for mobile view.

DESIGN ISSUE MATRIX

The design issue matrix was the step taken that guided us to narrow the focus on the most pressing issues, resulting in a focus of the shoppinger expereince. We used the severity ratings system for Heuristics issues which is a numeric ratings system from 0 to 4, with 0 representing no issue, and 4 being the most urgent to fix.

Screenshot-2021-09-17-at-17.36.13
Screenshot-2021-09-17-at-12.19.49

UI INSPIRATION

In our initial research, we felt it was important to take reference from exisiting competitors that are offering a seamless and pleasant user expereince for their users. In conclution we took inpiration from Addidas and H&M.

ADIDAS

H&M

From the Adidas mobile app, we have referenced the dropdown menu for the  Women/Men/Kids sections at the top bar. Additionally, we adopted the horizontal scroll carousel as an efficient way to access more categories.

On the product listing page, there’s a back button along with the number of search results and a filter icon.

From H&M, we noticed the back arrow buttons on each page which validated our assumption and allocated this to be on each  page of the search journey. 

We were also inspired by their floating CTA on the product detail page and adopted this detail.

Screenshot-2021-09-17-at-11.53.48
Screenshot-2021-09-17-at-11.54.07

THE REDESIGN - A COMPARISON

Here is a comparison of the before and after of the existing mobile app and our redesign. 

Screenshot-2021-09-17-at-12.15.28
Screenshot-2021-09-17-at-12.15.40
Screenshot-2021-09-17-at-12.16.11
Screenshot-2021-09-17-at-12.16.22
Screenshot-2021-09-17-at-12.16.35

HIGH-FI PROTOTYPE