Revamping Uniqlo.

Less and More.

About

Uniqlo’s vision of providing high-quality, minimalistic, yet affordable everyday wear attracts a wide range of customers to shop there.

In 2019, the eCommerce sector of Uniqlo USA contributed to about 25% of the revenue (~$230 million). Its eCommerce business was estimated to grow well over 30% in the next few years, making it essential to ensure the customers are satisfied with its online shopping platforms.

Problem

Uniqlo is failing to provide a seamless mobile shopping experience.

Between May 2020 to June 2020, 34 iOS users reviewed the app with an average rating of 1.35 stars out of 5 in the app store. It is alarming to see such low ratings when statistics are proving that mobile commerce is rapidly growing and will soon be dominating the eCommerce market.

Therefore, I decided to redesign the Uniqlo app as my first UX design project, a brand that I have been loyal to for more than 8 years.

*Side note: I do not work for Uniqlo. This is a project solely for personal development to allow myself to understand UX design through a practical project. The perspective of this case study is strictly my own and does not reflect Uniqlo’s opinion.

Project Overview

Duration: April 2020 - June 2020

Role: UX Designer, UI Designer

Goals:

Personal development:

  • Complete my first ever UX design project from beginning to end

  • Learn how to use the design thinking process and design sprint process to solve a problem

  • Become proficient in using Figma

Questions that I hope to solve:

  • Can we provide a seamless mobile shopping experience?

  • Can we spark interest for customers to try the app and make a purchase with the current promotion?

  • Can we win the trust back from old customers to try the app again?


Criteria:

  • Redesign UI entirely

    • Align with brand values, simple and effective

  • Streamline the buying process

  • Provide all aspects of account management

Target Users:

  • 21 to 30-year-old male and female

  • Urban professionals

  • Medium income

  • Seeks affordable, comfortable, good quality, casual clothing

 Kickoff: Research and Data

Statistics are showing eCommerce is more substantial than ever before especially with the prevalence of the pandemic. Online shopping has become part of the norm for many Americans.

Key Market Insights

  • 78% of users would rather access a store via a mobile app instead of a mobile site

  • 50% greater chance that eCommerce app users will return to an online store within 30 days

  • Competitors have mobile apps, not web wrappers

“To simply have a web wrapper as the mobile shopping platform, not only Uniqlo is behind compared to its competitors, it is causing Uniqlo to lose a considerable amount of potential revenue.”

Personas

Who are we appealing to?

Izzy, a recent college graduate who loves fashion. She is already a regular Uniqlo shopper but would like to better utilize her transit time to shop and explore her latest style through various clothing apps. However, she wants to give Uniqlo’s app a second chance if it has made any significant improvements.

Alex works in the tech industry and does not have a particular interest in fashion. He looks for clothes that have both quality and practicality. He has only heard about Uniqlo and never bought anything from it. He is interested in the current promotion for first-time customers.

Results & Deliverables

Customer Journey Map

After synthesizing 30 recent reviews from the app store and 10 user interviews, I created a customer journey map to understand the pain points of the buying process when using the current app. From it, I am able to pinpoint what, and where are the issues, allowing me to create specific and meaningful actions to fix them.

Two major pain points during the buying process:

  1. Browsing phase: The users realized the app is just a web wrapper. They felt like they had been deceived and the whole process of using the app to explore clothes was not enjoyable. Thus, feeling angry.

  2. Final payment phase: Many users faced difficulties when completing the transaction. It raised concerns about payment security. Such malfunctions dramatically decrease the confidence for users to use the app to make purchases and hurt the brand overall image.

Customer Journey Map

Affinity Map

After recognizing the pain points from the customer journey map, I created an affinity map to organize my findings. These are the recurring frustrations customers had mentioned…

Majority of the frustrations:

  • App is unreliable and has poor usability

  • Web wrapper

  • Disorganized UI

Affinity Map

Deciding the features

Before I started brainstorming for ideas, I used How might We questions to keep myself focus on the challenges that I was trying to solve:

  • How might we convince old customers to try the app again?

  • How might we improve the user flow of the app?

  • How might we improve reliability during the payment phase?

  • How might we realign brand vision with the app?

I separated my ideas into three different categories based on their similarities. Then, I combined some of my ideas together and picked the top four features that are most tailored to the users’ needs based on the affinity map.

Feasibility & Impact Analysis

In order to understand the effects of each feature, conducting a feasibility and impact analysis was necessary. I was able to determine the priority of each feature’s implementation.

Feasibility & Impact Analysis

As you can see above, UI update, account management, and promotion tab were able to gain quick wins and confidence back for Uniqlo. Since most of the users’ complaints were surrounding those subjects.

However, setting up a virtual fitting room sounded a good idea on paper, but its feasibility was not high enough. The users need the most right now is a reliable app that they can seamlessly shop on.

Now that I had a holistic view of each feature, these were the features I decided to implement:

  1. UI update

  2. Promotion tab

  3. Account management enhancements

Site Map

After the analysis, I created a site map to better organize the user flow of my design. I was able to organize my thoughts in a clear way of how I want my prototype to proceed step by step.

*You can view the site map via the hyperlink if you’d like.

 Sketches & Wireframes

From the site map, I had the structure to start sketching out my ideas and eventually turned them into wireframes.

Feature #1 & #2: Redesigning UI, Promotion tab

Problem: Current UI design is overloaded with content.

Current Landing Page

Solution: Simplify UI to re-align Uniqlo’s vision

Redesigned Landing Page

 Realign with Uniqlo’s brand vision, “design to improve everyone’s life”.

Feature #3: Account management enhancements

Problem: Lack of account management functions

Users could barely perform any of the account settings that are available on the web. There’s no reason to download the app if none of the functions are available

Current Account Page

Redesigned Account Page

Solution: Provide users with what they wished for

I mirrored all the functions that are currently on the web and made them be available for the app as well.

Users will never have to switch back and forth between the webpage and the app.

This will increase the usability of the app and incentivize old customers to try the app again.


 Remote usability testings

This was the mission that I had my five users accomplish:

  1. Navigate from landing page to add a men’s pink polo to shopping cart

  2. Apply a coupon to checkout from the account page

  3. Successfully submit payment

 

Iterated Prototype

What has changed?

After I gave the iterated prototype to the same five users to test again, instead of 80%, 100% of the users thought the whole shopping experience was seamless.

The driving force that led to such a great result was the navigation tutorial screen. At first, I assumed most users had experience using a clothing app before this app. However, some users have rarely used a clothing app. Therefore, the quick tutorial immensely helped them to understand the navigation of the app.

 Learnings

  1. Research, research, research. Set your path to success by genuinely understanding the root of the problem. It will keep your workflow focused and create a solution that effectively solves the problem.

  2. Usability testing is king. Without users giving me feedback, I will never know if my design met their needs or required iteration. It is the most important part of the process. For example, I would never have noticed that I missed to include a remove item option on the checkout page.


Style guide

Uniqlo Spacing.png

Final Design

Previous
Previous

On-Demand Meal-kit Service (Personal Project)