Making shopping experience for clothes more enjoyable: A UX design case study with UNIQLO US
A personal project influenced by my friends’ love for the shop on UNIQLO in their US version brought me to a new level of thought with user-centered design.
“Made for all began with rethinking and having empathy.”
Background
UNIQLO has reinvented the way it lets customers shop for clothing. Despite all of that, people get frustrated when out-of-stock items are not listed and checkout is too complicated, so I began working on the redesign and rethinking the sales channel using UX design methodology.
Executive Summary
Over four weeks — from research to prototype — I identified and loved the pain points within check-out pages and the navigational process, finding the solution through an out-of-stock notification, and rearranging the layout design.
Live Website:
Details
Project type: Personal project
Role: UX Designer
Category: E-commerce, Retail
Tools: JustInMind, Adobe Photoshop, Miro
Timeframe: May 2020 — June 2020 (4 weeks)
Role
My major role as a UX designer began with helping identify UNIQLO’s strengths and weaknesses; this included conducting competitor’s research, along with understanding the business’s objectives, users’ groups and then determining thee empathy maps, personas, and designing information architectures. I then reached a finalized result after developing my designs through prototyping and wireframing.
Problem
“Too many options when I just clicked into the main page, which makes me feel confused and wonders if I want to continue.” — Kelly, Regular Customer
Using feedback from customers (users), I found that confusion related to landing pages, poor out-of-stock announcements, and difficulties with the checkout process caused transaction failures and conversions:
Process
01 Strategic market analysis & meats
Based on the market research between other apparel retailers & UNIQLO, I uncovered the ways in which they differ and the advantages UNIQLO possesses:
Shared functional features
- Measurements (Uniqlo doesn’t have age optional)
- Recommendations with wear with
- Review section
- Overwhelming information
UNIQLO Advantages
- Uniqlo has a service (GiftNow) to help users to choose their gift, design the card and deliver it to the recipient.
Features that Uniqlo may need to be improved
- Out-of-stock email notification & display
- Payment/shipping & delivery/ returns & exchange/ packaging section (in the product page)
- Kid and baby can be a combination
- Home page -clear/ section distinction and simplicity
……………………………………………………………………………………….
02 Real-world opinions with surveys
In creating this survey, I also hoped to find out what other people’s experiences have been with UNIQLO, how they feel, and what they are most frustrated with:
The users’ quotes provide an in-depth perspective at the product, helping me to better comprehend the users’ pain points when using the product:
“Checkout process is way too confused.I don’t know how these option works and what’s the difference between guest checkout and regular checkout…”
“Selecting subcategories of products (size, color, price, features) opened up a separate table that covered over some of the products when scrolling, so it felt difficult to be sure whether I was seeing all the possible product options available.”
“If it’s out of stock it can be notified via SMS when it comes in stock.”
“There would have been benefit in seeing the top selling products in a category displayed more prominently, rather than having to sort through large lists of products first.”
Empathy map
Following the interview, I tried to map the responses and thoughts of the users to understand their conditions and emotional connection:
Here are the messages we learned about the pain points our customers have based on what I gathered and organized:
- It is unclear when the products will be back in stock, and the out-of-stock display is lacking
- For customers, being presented with details that are not relevant to their product finding and which are related to the products is overwhelming
- The content with the “Guest checkout” and “Member checkout” confusing the clients who are getting into the process
……………………………………………………………………………………….
03 Getting to know real users
My persona reflects the data I gathered from the surveys and researches, the age range from 15–50 years so I chose a middle in this range:
……………………………………………………………………………………….
04 Objectives with users and the business
Following the persona creating, I attempted to define the business goals and user goals using the competitive research and the results of the surveys:
After helping to define our goals, I developed a checklist focusing on the following points during the redesign process:
- Consumers/Users connect with communities/people who share the love of fashion
- User-friendly and efficient check-out with clear and easy-to-comprehend information with the clothing
- Notification or reminder of in-stock, out of stock, or restock products
……………………………………………………………………………………….
05 Fiddle with the Information Architecture
Once I had organized all of the information and elements, I prepared an information architecture diagram explaining the website’s information structure:
An added feature in the pages
Having visualized a sitemap, I arranged the content lists inside each example page that is going to be redesigned with the new feature:
Green ones are the added features:
……………………………………………………………………………………….
06 Sketching with wireframes
Having taken the pain points, customer feedback, and the results of the IA into consideration, I started the sketching process following the design thinking:
Video version
Solution
In the design phase, I was able to learn about the difficulties customers run into and the methods they perceive to be frustrating. Here is a list of the design prototyping initiated to solve their challenges:
Landing & Category pages:
Content specials and important categories are organized on the landing page and use graphics for clear navigation. Moreover, the subcategory pages and the related products can be reached easily through the navigational bar by using the main categories page.
……………………………………………………………………………………….
Product detail pages:
On the product details page, I created the photo section for people to view other customer’s wearing experiences with the particular product. Furthermore, if customers click on the timeout option, they can sign up to receive a notification when the product is back in stock.
……………………………………………………………………………………….
Cart & Checkout pages:
Design a clear direction and navigation that guides users through the order checkout process and differentiates between returning customers and guests.
Whole Process Design
Video version
Design system
Prior to prototyping the final product, systematic design increases visibility for the user and enhances the aesthetic appearance
“The next big thing is the one that makes the last big thing usable.” Blake Ross, Co-creator of Mozilla Firefox
Reflections after the finalization
While participating in the design thinking process, I have gained insights into conducting interviews and conducting surveys using the techniques discussed.
Additionally, I gained knowledge regarding how to interpret feedback I received from users from an objective point of view and to recognize the frustrations with the current website.
Further, I understood the importance of a well-crafted information architecture before doing the wireframing and designing.
In conclusion, what now matters most is that I’ve learned how an e-commerce website system works or how navigation works within the website. I’ve also learned how to plan out a design from research and surveys, especially from real users’ feedback and usability test results.
