INDUSTRY
Retail & Fashion
COMPANY
School Project
PLATFORM
Mobile App
DELIVERABLES
User Research
UX Design
UI Design
Prototype
DATE
March 2022
DURATION
4 Weeks
TEAM
Me, Myself and I
TOOLS
Adobe Illustrator
Figma
The global pandemic drastically transformed consumer behavior, particularly in retail and fashion industries. With stores closing or operating under strict regulations, consumers were compelled to turn to online shopping.
UNIQLO, a global apparel brand, saw a shift in its customers’ shopping habits during this period, which led to new opportunities and challenges in its e-commerce platform. This case study explores how UNIQLO adapted its UX design to cater to the evolving needs of online shoppers during the pandemic.
• User Feedback
• User Story / Problem Statement
• Heuristic Evaluation
• Competitor Analysis
• User Flow
• Wireframing
• User Test
• High-fidelity
• Prototype
• Design System
• Takeaway
– As a consumer, I want a clean and simplified interface so that I can find products easily
– As a consumer, I want to know the latest deals, promotions, or new season products so that I can shop smart and responsibly.
– As a first-time consumer, I want to have uncomplicated checkout so that I checkout faster and with convenience
– As a consumer, I need to have multiple payment methods available so that I can choose the most suitable option for me
How can we effectively organize content and have easy shopping navigation?
To strengthen the research, I have made a competitive analysis of the top fashion retail apps on how they design and strategize their content organization and checkout process.
The current app of Uniqlo has both of its strengths and weaknesses. However, major flaws appear to be the overwhelming content of the homescreen, limited payment method options, login options, and no cross-selling opportunity.
Uniqlo Canada, Zara, ASOS, Lululemon & Urban Outfitters
Furthermore, I conducted a heuristic evaluation to assess the structure/layout of the app and identify usability issues of the user interface.
For this case study, we are going to focus only on the Men’s Home screen, Product Screen & Checkout Process.
The objective of this user flow was to understand how users scan information when shopping. 3 major changes were to address:
1. The navigation design, (adding news/articles page for their collections and latest tips, evident shopping opportunities and account)
2. When viewing the shopping cart. What do users see and can interact with
3. Having a Checkout as Guest option
I started making my low-fidelity design using Figma with the important elements, using space wisely and making sure it is easy to navigate
Products are only shown 2 per row to make it more visible
news/articles-related content are moved to another screen to simply the homescreen
Well-organized product catalogue
Improving information hierarchy
Intergrating cross-selling that user may want to buy before checkout
Adding Checkout as Guest Option
Diverse payment options giving customer preferably way to complete the transaction
Finalize their orders and information before confirming
The test was conducted among peers, and the key insights that needs to improved on were:
"Can't find collections in the homescreen and too many products displayed for one category"
"Some texts appears to be small to read. Buttons were not evident enough."
"There seems to be a wasted use of space. Navigation isn't efficient enough. It's taking so much space "
Applying the user test feedback and my own research and evaluation, I have iterated the product design.
A clean and simple layout with only the essential categories are shown. Intuitive navigation like the evident Shopping button is visible, as well as account for users who wants to directly register to the app
Adding News increases community engagement and awareness of the latest releases with Uniqlo
The obvious filter & sort, option to view as 1 or 2 products per row, adding to wishlist label, as well as clear visual hierarchy will get the information the user needs.
The fixed bottom with add-to-cart button allows users to focus each tasks, and will still be visible when scrolling back and forth in the product page
Integrating cross-selling opportunity before checkout can boost sales growth.
Checkout as guest option was added, more payment options are available for to accelerate the shopping experience. Checkout process is simple through minimizing steps, and focusing on what’s needed to fill out.
As a one-man team, this project taught me the importance of research on how it can contribute to the project, and knowing the purpose of why it is designed that way. Moreover, empathizing with users’ needs helps the overall efficiency and ease of use of the app, but integrating the business aspects of it.
If I had more time:
– Further explore the boundaries of shopping/purchase opportunities as a user and for the business
– See different perspectives on the visual flow and design like e.g. the arrangement of content
– Test out the product design further to know its effectivity and efficiency
Whether it’s a logo, collateral design, website, or a full branding, I’m here to bring ideas to life, and make your brand stand out.
