top of page

UNIQLO APP REDESIGN

OVERVIEW

UNIQLO is a Japanese casual wear designer, manufacturer and retailer, established in June 1984. The UNIQLO App enables smart shopping and allows users to join special promotions online or in-store through the app. It serves as a convenience for the users but we have found many problems with the app that frustrates the current users. 

This was part of a grouped UI/UX module where we had to conduct user research and create a final working prototype. 

End Product:
User Research, Heuristic Research, Low and High Fidelity Wireframes, Style Guide, Prototype

MEET THE TEAM, GOOD DAY!

Sandy.png

Sandy

Researcher/ Documenter

Fish.png

Jie Yu (Me)

UI/UX Designer

PeiYee.png

Pei Yee

Researcher/ Documenter

Cole.png

Nicole

Producer

My role: I was in charge of overlooking the wireframes and also created most of the high and low fidelity wireframes, mockups, as well as the style guide. I've also created the prototype animation and also helped with the user research.

Mockup02 – 1.png

THE PROBLEM

The main problem with the application is that it causes customers who struggled to use the app to have a frustrating shopping experience. They find it difficult to navigate around the app to find the information that they need. The goal of this revamp is to tackle the problem and help improve the experience for users. Some of the key changes include:

  • Change it so that there are no pop-ups when users click on anything

  • Change the icons and buttons to make them more consistent

  • Improve page layouts that are confusing

  • Improve the notification pop-ups

THE PROCESS

We first did research on UNIQLO app users to identify the heuristics. We then identified competitors and also researched their heuristics to find out what works that keep their users from continue using the application. We then started by identifying the current user task flow, from there we refined the task flow and proceeded onto the User Personas, User Empathy Map, Business Model Canvas and Customer Journey Map. 

Good Day - User Task Flow (Current).jpg

Current User Task Flow

Good Day - User Task Flow (NEW).jpg

New User Task Flow

persona1.jpg

User Personas

ue1.jpg

User Empathy Map

business-model-canvas_orig.png

Business Model Canvas

Good Day - Customer Journey Map.jpg

Customer Journey Map

Web 1920 – 11.png

LOW FIDELITY

We then proceeded on to create two versions of low fidelity wireframes to conduct AB testing on which version that users prefer. After another round of user testing, we created a final low fidelity wireframe based on the feedback collected. 

Artboard – 1.png

STYLE GUIDE

We then moved on to creating the style guide so at to make sure the high fidelity wireframes are of the same style and design for consistency. 

01Cover.png

HIGH FIDELITY

Finally, we move on to the high fidelity wireframes.

Loading_01.png

Loading Screen

Login_01.png

Log-in

Signup_01.png

Sign-up

Onboarding_01.png
Onboarding_02.png
Onboarding_03.png

Onboarding

01 Home – 5.png

Home

01 Item – 3.png

Item

03 Home – Banner – 1.png

Sales Banner

01 Catalogue – 1.png

Catalogue

02 Catalogue – More – 1.png

Catalogue (Item)

Catalogue_03.png

Catalogue (Filter)

Item_02.png

Add to Wishlist

Item_03.png

Add to Wishlist (Prompt)

Wishlist_01.png

Wishlist

Wishlist_02.png

Wishlist (Edit)

Wishlist__04.png

Wishlist (Removed Prompt)

Wishlist_03.png

Wishlist (Empty)

SearchStore_02.png

Location Prompt

SearchStore_01.png

Search Store

SearchStore_03.png

Search Store (Confirmation)

Item_04.png

Add to Cart

Item_-1.png

Add to Cart (Prompt)

Cart_01.png

Cart

Cart_02.png

Cart (Select Quantity)

Cart_04.png

Cart (Confirmation)

Cart_-1.png

Cart (Empty)

Checkout_01.png

Checkout (Delivery)

Checkout_05.png

Checkout (Payment)

MyOrder_03.png

Checkout (Order Details)

Checkout_08.png

Checkout (Error Message)

Checkout_07.png

Checkout (Confirmation)

MyOrder_01.png

My Orders

MyOrder_03.png

My Orders (Details)

MyOrder_02.png

My Orders (Empty)

Membership_01.png

Membership

Points_01.png

Points

Points_02.png

Points (Empty)

Membership_02.png

Redeem Points

Profile_01.png

Profile

01 Notification – 1.png

Notification

Web 1920 – 11.png

PROTOTYPE

A video prototype of the final product animated using Adobe XD.

Web 1920 – 8.png
bottom of page