Redesign, Uniqlo
Redesign of Uniqlo mobile app
PROJECT OVERVIEW
Project: Redesign of Uniqlo Mobile App
Team: Begum Oral, Scott Sobere-Yu, Vickie Chountalos
Date: March 2020
Industry: Fashion Retail
Duration: 3 weeks
Role: UX/UI Designer
Tools: Pen + Paper, Sketch
To redesign Uniqlo's mobile app, my team and I conducted a heuristic evaluation, which is a method for finding usability problems in a user interface design. The method was developed by Jakob Nielsen, with ten principles shown below.
PART 1 - HEURISTIC EVALUATION
Who is Uniqlo?
Uniqlo is a Japan-based clothing company that provides high-quality clothes with universal design and comfort, clothes that can be worn anytime at the lowest prices possible.
We, as a team, used usability heuristics to improve the usability of the app and redesign based on those heuristics.
We focused on only 5 heuristics:
Consistency and Standards
Error Prevention
Flexibility & Efficiency of Use
Aesthetic and Minimalist Design
Help & Documentation
After conducting the Uniqlo app’s interface design and testing the app, we found some usability problems. As we related those problems to each heuristic principle, we voted one by one and aggregated them to come up with a violation score that determines the severity of usability violation.
PART 2 - TESTING
Discovery of usability problems while completing a task on the app
Along the way, using the app and considering heuristics led us to the main task: purchasing a woman's parka.
For this evaluation, we focused on only the home and product page. The task starts at the Uniqlo homepage;
The user clicks on women's clothing
Selects product size and color
Adds the item to her cart
She sees delivery and payment options
She places the order
She receives a confirmation immediately
During the task, we collectively started conducting heuristics to measure the usability and user experience while completing the task. Heuristic evaluation was challenging, but we learnt a lot along the way. Our next steps include redesign based on determined heuristics.
PART 3 - IDENTIFYING HEURISTICS
Heuristic 1
Consistency and Standards: Users should not wonder whether different words, situations, or actions mean the same thing.
Heuristic 2
Error Prevention: A good design should prevent errors from occurring and should prevent users from having to go back to redo their steps.
This page doesn't comply with Error Prevention in heuristics.
Heuristic 3
Flexibility & Efficiency of Use: Design should allow for easy and quick navigation options. Users should be able to achieve frequent actions conveniently.
The below design doesn't comply with Flexibility & Efficiency of Use in heuristics.
Heuristic 4
Aesthetic and Minimalist Design: Design should not contain content that is irrelevant or rarely needed. Content should be direct and relevant to reduce the user’s cognitive load.
The below design doesn't comply with Aesthetic and Minimalist heuristics.
Heuristic 5
Help & Documentation: Help documentations should be easy to search and perform as users expect.
The below design doesn't comply with Help & Documentation in heuristics.
PART 4 - FINAL EVALUATION
After identifying usability problems, all data related to heuristics was gathered and considered to come up with an overall score. The score is 3.14.
PART 5 - REDESIGN
Redesign 1
Consistency and Standards: Users should not wonder whether different words, situations, or actions mean the same thing.
The below example shows both the original (left) and redesigned version (right).
Redesign 2
Error Prevention: A good design should prevent errors from occurring and should prevent users from having to go back to redo their steps.
The below example shows both the original (left) and redesigned version (right).
Redesign 3
Flexibility & Efficiency of Use: Designs should allow for easy and quick navigation options. Users should be able to achieve frequent actions conveniently.
The below examples show both original (left) and redesigned version (right).
Redesign 4
Aesthetic and Minimalist Design: Design should not contain content that is irrelevant or rarely needed. Content should be direct and relevant to reduce the user’s cognitive load.
The below examples show both the original (left) and redesigned version (right).
Redesign 5
Help & Documentation: Any help documentation should be easy to search and perform as users expect.
The below example shows both the original (left) and redesigned version (right).
PART 6 - UI LIBRARY
For the UI library, we created elements in different categories, including fundamentals, typography, atoms, molecules, and organisms.
PART 7 - PRESENTATION
Finally, we presented our work!
Working on heuristics and redesigning a more functional and user-friendly app with my team was a great experience. We all worked hard, shared, supported, struggled, and learned more about each other every day. We finally presented our work, received feedback, and answered questions at the end of our presentation.
Presenting my work with Scott and Vickie
Key Learnings
Heuristic evaluation is a unique and useful way to improve a product's usability and design aesthetics by only following ten principles, and I will for sure use this method when needed. My key learnings include:
Teamwork is even more important when it comes to conducting heuristics and redesign in a limited time while managing other design projects at the same time
Keeping things organized and simple helped us process each part faster
Heuristics can improve a product's usability and functionality most logically and securely
Always trust the process and your team
Thanks for reading!