UX / UI Design
Uniqlo
Through design thinking methods, we evaluated the Uniqlo app to better fit user needs during COVID-19.
Time: 2020 / 2 months
Team: Billy Chen, Aimee Batiste
Tools: Figma, Miro
01
Design clutter impedes navigating the app.
Create a cleaner and more airy interface with simplified navigation.
02
Simple customer reviews lack rich information.
Implement more filters and make customer reviews more comprehensive.
03
Lack of size guidance and saved preferences for users.
Add a personal size profile feature to help guide users through their size when ordering online.
Process
Discover
Research
Competitor Analysis
Empathy Interviews
Affinity Map
Persona
Journey Map
HMW
Define
Site Map
Task Flows
Wireframe
User Testing
Design
Prototype
Design System
01

About

Japanese fast-fashion giant, Uniqlo, offers cool basics and collection pieces at affordable prices. Known for their performance-driven brands such as AIRism, Uniqlo dominates a large portion of the market. They practice a private-label strategy meaning they produce and sell their own clothes exclusively.
02

Research

To inform our research, we first evaluated the app's heuristics. From an initial dive, the app appeared confusing and cluttered. We used this as a tactic to inform our desk research.
Consistency & Standards
Two separate navigation bars with repeating information creates confusion.
Aesthetic & Minimalist Design
An overuse of red cretes a chaotic design feel. Further, there is a lot of repetition and unnecessary ads/features.
03

Competitor Analysis

We were able to identify weaknesses, strengths, and delighters between brands. Uniqlo fell short in design innovation when up against their competitors.
Gap
Pros:
  • Visibility of system status
  • Well designed icon system
Cons:
  • No clear home button, design not intutive
  • Too many pop-ups
  • Stale UI design
Zara
Pros:
  • Beautiful imagery
  • Minimalist, well-designed aesthetic
  • Barcode product search
Cons:
  • Inconsistent menu and categories
  • Images only in single view on PDP
H&M
Pros:
  • Extensive filtrs
  • Flat product view option
  • Search by image
Cons:
  • Lack of branding
  • Disorganized categories
04

Empathy Interviews

Customers shop to enhance their identity and feel good about themselves however, they often run into sizing issues. Further, customers miss the social aspects of shopping in person. We interviewed 12 people age 20-31 years over zoom.
Focus Questions
What do you like about shopping?
Would you rather shop at a retail store or online?
How have you been shopping since COVID-19 and has it been a positive or negative experience?
Insight
How can we bring the benefits of in-store shopping to the app?
05

Affinity Map

Through affinity mapping, we were able to discover patterns within our interviews. We used these insights to develop clear perspectives. Through this our personas came to light and we could hone in on better meeting specific user needs and refining tasks. The key insights were that customers favor a clean design, easy navigation, and in-person shopping.
Prefer clean interface
‍
Shop to boost confidence
‍
Enjoy filters

‍
Easy categories to navigate
‍
Brands with shared morals
‍
Methodical shopper
‍
Struggle with
sizing
‍
Love promo codes
‍
Brand vibe
‍
‍
Personal experience
‍
Dislike
browsing
‍
Shopping in-person with friends
06

Persona

Misha, 26
Occupational Therapist
Brooklyn, NY
Needs
Detailed and accessible customer reviews
Variety of filters to cut down browsing time
Goals
Order the right size and do it efficiently
Buy from brands with aligned values
Pains
Products on bodies that do not reflect her own
Long browsing time and mis-ordered sizes
Gains
Ability to get the right size through helpful features
Clear product details, reviews, and filters
07

Journey Map

User
Misha
Scenario
Misha gets invited to speak on a panel about female empowerment in the Lower East Side. She wants to find the perfect outfit to boost her confidence.
08

HMW

How might we ensure customers get the right size and style for their body while creating a positive shopping experience?

Through this process, we discovered ways to add more product detail. We also explored guiding shoppers through saved history which could be stored in a profile and guide users on sizing.
Products shot on diverse body
types
Guided advice
on fit and
silhouette
Software
enabling digital
"try on"
Size suggestions
based on
previous history
Positive
feedback
at check out
Calm playlist
for when
users browse
More
comprehensive
filters
Presets for
size and
silhouette
09

Site Map

We reorganized for simplicity and eliminated the secondary top navigation and focused on the bottom navigation. Reorganizing the site map helped us maintain consistent structure when working through individual task flows.
OLD NAVIGATION
UPDATED NAVIGATION
10

Task Flow

The objectives for the task flows were to aid in selecting a size. I added product filters, review filters, and a better size feature.
01
Add Measurements
Search Style
Recommend Size
Add to Cart
02
Filter Reviews
Browse Reviews
Go to My Size
Upload Photo
03
Add Filter
See Results
Select a Product
Check Out Reviews
11

Wireframe

I started with pen and paper to work through my initial task flow of selecting a size and ensure that all the crucial elements were present. Then I moved onto Figma to create a prototype for testing.
VIRTUAL SCAN FEATURE
Allow user to scan their body for measurements.
SMART FILTERS
Additional filters to cut down browsing time such as reviews by people who share a similar body type to you.
PREVIOUS HISTORY
Suggest a size based on previous similar purchases.
12

User Testing

Key insights were that most users wanted privacy and that they loved additional features.
VIRTUAL SCAN
Most users didn't want to take
the time or share their personal images/information.
PREVIOUS HISTORY
Users were fearful when too
much of their data had
been collected.
SMART FILTERS
Users appreciated efficient
filters and suggested
additional category filters.
VIRTUAL SCAN
Most users didn't want to take the time or share their personal images/ information.
PREVIOUS HISTORY
Users were fearful when too much of their data had been collected.
SMART FILTERS
Users appreciated efficient filters and suggested additional category filters.
13

Prototype

Initial Filters
Filter preferences visible and easy to remove. More filtering options, such as silhouette and occasion, were added to minimize browsing time.
Size Profile
User's can create a personalized account to save photos, measurements, and order size history. There is an option to upload a body scan with sizing software. User's can also opt out if this feels too invasive. When signed in, users can get size recommendations based on their profile.
Customer Reviews
We added the ability to filter reviews by size, body type, or sort. Adding a photo upload option for reviews helps give customers more product insight.
To help users sort though reviews, we have given them a body type input field when writing as well as filtering reviews. Friendly and direct illustrations and descriptions guide them in picking their body type accurately.
14

Design System

#222222
#666666
#D9D9D9
#F5F5F5
#EB3323
Reducing the amount of red allowed the app to feel calmer and lighter. I implemented the use of light gray for a touch of color that was complimentary to the red, but less intense. Darker shades of grey helped to group information in a neutral way.
Aa
Roboto is a modern type that embodies Uniqlo's minimalist and accessible design vision.
A B C D E F G H I J K L M N O Ö P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y å ä æ ñ ö ø é
15

Final Thoughts

Throughout this project, we faced several challenges. One of them was being able to give user's a fast and personalized experience without making them feel like their privacy was invaded. It was important to empathize with customer's human needs aside from just focusing on making the app more efficient. Striking that balance proved to be challenging and is something that I would like to keep exploring within e-commerce apps.

If given more time, I would continue to search for more ways to create a "virtual dressing room" for users. How to keep the best parts of in-person shopping when the world is moving more remote. 
Next