The Story Behind Redesign
In order to improve creativity, I redesign the Uniqlo mobile app
By Zeshu Zhu
Roles
Product Designer
User Researcher
Data Analyst
Tools
Figma, Photoshop, Excel
Introduction
I decided to evaluate Uniqlo’s Iphone mobile app. Uniqlo is a unisex casual wear store originated from Japan. By adopting fast retailing and collaborating with global fashion brands, it has been among the top five global clothing retailers. Before making the decision, I spent a lot of time to think about which website should I redesign. However, I realized that in my future careers as designers, I may not start with complex application design, such as Instagram or Facebook. Perhaps starting from clothing application is more helpful for me to think about how to make a website more practical and more user-friendly.
Some limitations and biases
There are some limitations and biases for us when I evaluate the Uniqlo app. First of all, different genders have different views on how to choose clothes, and this may lead to biases about whether an interface or function is effective. At the same time, I use the Uniqlo app for different purposes. Sometimes look for the latest news and discounts, sometimes only use the app to make purchases. These biases may make it difficult for me to determine the focus when evaluating different functions. Also I’m an expert user who has already used this app, and may have stereotypes or different opinions for this app about its functionality than novice users.
“Proper planning and preparation prevents poor performance.” Stephen Keague
The User Research & Data
Before starting the redesign project, I interviewed 15 Uniqlo users to better understand my design goals: What is a typical Uniqlo user? Why do they use Uniqlo? How to use them to make them more comfortable? These interviews can be conducted in person or through web forms.
Target audience demographics
Of the 15 people using the Uniqlo app I interviewed, 8 were men and 7 were women. Male users are 21 to 29 years old, while female users are 21 to 37 years old. And most people are dissatisfied with the Uniqlo app the numbers are ≤ 5.
In order to understand what specifically made users dissatisfied with Uniqlo software, I interviewed 67% of the users to show their reasons for dissatisfaction specifically.
I asked the 15 Uniqlo App users to describe something which affect their shopping experience.
Top 3 problems mentioned: Slide function, aesthetics, and layout
I also analyzed what kind of Usability Heuristics those would be. The most appeared:
(1) User control and freedom
(2) Aesthetic and minimalist design
(3) Flexibility and efficiency of use.
#Part 1 of problem
Users can scroll into the home page from the blog, but after entering the home page, users want to continue to scroll into the message but they can’t. Users scroll the page as before, but they can only scroll the pictures of the home page, but not the sections.
Such inconsistencies make it difficult for users to judge what to do next, and users may even question whether the system will have such inconsistencies again.
> For the solution, I choose the easiest button for the user:
- Now, users can choose to enter the next interface by clicking “Next Page” or “Back Page”.
- Many times we cannot avoid the situation where a mobile phone interface displays a lot of content. Even if we try our best to beautify or compress the information, in most cases it is better to prompt the user directly, so that the user can avoid errors quickly according to the prompt.
- By adding an operation method, users are allowed to select an operation. Sometimes users can slide to the next page, and if there is a lot of information that is prone to errors, the user can also click the button to enter the next page.
Note: When users are not using the button, the button will remain in a translucent mode to avoid affecting the normal use of users.
##Part 2 of problem
Users enter the home page, but cannot find necessary information. Users can only see a picture which is not complete, and there is no prompt what users should do.
This error is because the current framework is too large, or because it is not adapted to the mobile phone. It makes it difficult to realize that there are more contents to slide down. And the web page does not give the user a hint, making it difficult for the user to know where they are.
>>The picture is smaller, but information is still there:
- Many users make a lot of mistakes because the picture of the “Home” interface is too large (such as sliding the picture by mistake, I don’t know there is still a lot of information below)
- I hope I can not only retain the important information, but users can also avoid this type of error.
- So I keep important promotional information (Limited-time Offer, and More info) to ensure that users can still not miss important information, and the space saved at the same time can ensure that users can see more effective information at a glance.
Note: Now users can easily find the status bar to know what’s going on.
###Part 3 of problem
From interviewed 15 Uniqlo users, I found that a lot of users think that the Message and Blog functions do not help them. Many users even think that blog as the first page they see when entering the app is very useless.
Most users hope that the main interface can better help them make purchases faster, while not having too complicated operations. In other words, the user wants to make the main interface have more information that can help users to purchase when the interface is simple.
>>>All users want in the Home page:
- In the past, blogs and messages had a lot of useless information flooding the user’s homepage. Not only did it make difficult for users to find a way to start buying clothes, but also a lot of information was useless.
- Now, I have streamlined the page and integrated blog and message into the home page. Although it has been streamlined, users can still easily find and access the content they are interested in.
After thinking for a long time, I decided to put the blog in the shape of a small ball on the top of the Home page, so that users can easily find the picture containing the outline of the content, and click to view more information.
This way not only make the page more beautiful, but users can also browse more information in a limited interface.
At the same time, I made the message page into an icon that can represent it, hovering in the lower right corner of the home page. So that users can click to view it at any time. When users clicks, they can simply preview the top 3 message(can help users save time). If users still want to continue view, they can click “view all” to enter the main message interface.
Recommendations
How can we use our research to create better information architecture for Uniqlo?
Creating a method of including blog articles at a place where it is easy to access as well as being minimalistic will improve usability of the site..
Uniqlo should work to increase the effectiveness of promotions on the home page by considering visual hierarchies and minimizing the amount of words users need to read to emphasize what needs to be advertised.
Creating measures for staff to observe user behavior with what users use most frequently in the app and placing emphasis on making those more accessible will inspire better solutions to increase user satisfaction.
Reflection after redesign
I was a student of machine learning major before this fall, and it seems that it has nothing to do with design and interaction. I am grateful that I can find my hobby from the Usability & Info Architecture class this fall. It took me about a month from the beginning of this redesign to the end. During this month, whether it was an investigation, considering the draft of the design, learning to use tools, until the birth of the work, I genuinely felt from design to interaction is an enjoyable process. I have taken into account the mistakes that many designers may be faced learned in the lecture and how to avoid them. It can be said that as a student in machine learning, I can’t understand that redesign will have such high energy. After the redesign, I first realised how to feedback the user experience to the software. Secondly, I understood what I should avoid if I needed to design an interface. Of course, the most important thing was that I learned how to efficiently and systematically complete a task. Maybe redesign is just an assignment that I challenge myself, but learning never stops
Sketches of solutions & Figma wireframes
