UNIQLO: Redesign Landing Page & Clear check-out process
" Online shopping has become a part of the mainstream in our daily life. Fast check-out process and point-browsing are essential to users who are looking for finer user experience."
A personal project inspired by my friends, who loves to shop on the UNIQLO website in the US version, has brought me to a new level of User-centered Design. It is a fashion brand that gives users a collaboration collection, redefine by focusing on quality and textiles. However, many of them mention how difficult for them to get the notice if the “out of stock” products will be back, and the checkout procedure is confusing, which triggered me to attempt to redesign the layout of the essential pages.
Target Client
UNIQLO
Year
2020
Duration
May 2020 - June 2020
Roles
UX Design (Research, interaction design, visual design)
"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
Project Goals
Acknowledge the users’ needs and potential feature of attraction
Understand the young generation’s shopping habits
Resolve user’s frustrations when shopping with overflown categories
Research user’s habits with feedback and review
Determine faster shopper’s behavior and habit
Problem Statements
I surveyed a few people about their shopping experience with UNIQLO.com, here's what the difficulties they mentioned.
" There is too much information on the same page, it's confused, and I wonder where I can start "
"Check-out is difficult to use, should I log in first and then proceed to check out? or can I do without signing in as a member?"
"I didn't see "notify me later" option if the products I want are out of stock."
Challenges
Highlight the bestsellers and latest products, with using the simplest design feature and contents to attract the client
Short period od research and limited resources with surveying a small group of people
Design Process
Through the Design Thinking approach, I figured out and understood the needs of the target user and balanced those with the company’s objectives and technological capabilities.
Tools : Adobe Xd, Photoshop, Illustrator
Customer Feedbacks
Marketing Research
Persona
Information Architecture
Prototype/Wireframe
Usability Testing
Icons made by Freepik @ Flaticon
Major Key Takeaways
Community Sharing
Customers want to share some of their wearing style with their friends and people who also love fashion, through stories and Instagram feeds.
Comprehensible navigation
Customers need a clear direction and navigation to guide them what the content or products they’re looking for or interested in when they are browsing.
restock notification
Customers need to know if the product is in stock, out of stock or has been restocked with a special notification.
Low- fidelity Video
High-fidelity video
“The next big thing is the one that makes the last big thing usable.”
Blake Ross, Co-creator of Mozilla Firefox
Results & takeaways
Figured out a specific way to survey and interview users, understanding user's feedbacks with a more objective and critical thinking
Executed Wireframe designing with the knowledge of Prototyping and Information Architecture
Planned before you started to do the whole design, it's efficient that the researches of building the structure make the designer has a more logical view of the design procedure.