PROJECT / UNIQLO REDESIGN

MY ROLE / UI DESIGN / RESEARCH / COPY

SUMMARY / Redesigning the implementing usability heuristics across the Uniqlo mobile app for improved shopping experience.

PROBLEM STATEMENT

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. 

WHAT IS HEURISTIC EVALUATION

Heuristic evaluation process is a set of standardized guidelines for evaluating the usability of an interface design so that they can be measured and improved as part of an iterative design process.

As part of our evaluation process, we used Nielsen Norman's ten usability heuristics as guidelines to identify insights that could help to enhance product usability.

INSIGHTS & FINDINGS

During our walk through of the Uniqlo app, by applying the heuristic evaluation principles we identified a series of opportunities to improve the user experience from shopping through to check out. The most notable infringements on the guiding principles included:

VISIBILITY OF SYSTEMS STATUS

The Uniqlo app informs the user once an item is added to the cart. However it misses important details about the item that they added.

STATUS USER CONTROL AND FREEDOM

The Uniqlo app’s navigation offers the user no back button within the search journey, making it a rigid and inflexible experience.

To venture back to the previous screen the user must cancel their search, thus losing their progress towards checkout.

AESTHETIC AND MINIMALIST

The Uniqlo mobile UI (particularly on the home page) is nearly identical to the desktop version with certain sections not formatted correctly for a ‘mobile first’ experience.

The design issue matrix was referenced to guide our team to narrow our focus on the most pressing issues. This resulted in a focus of the shopping experience. 

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.

DESIGN ISSUE MATRIX

UI INSPIRATION

During our initial research, it was important to learn from the competitive landscape and gain inspiration from other fashion and ecommerce brands who offer seamless user experiences. Our final UI incorporated the following best practices, lifted from industry adjacent brands:

ADIDAS / MOBILE APP

We 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.

H&M

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.

THE REDESIGN - A COMPARISON

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

FINAL PROTOTYPE

Next Project