UI UX Case Study: Ease Users to Shop Uniqlo’s Products Online by Revamping Uniqlo Application and Create In-app Purchase
Disclaimer: This is a personal final project at Dibimbing.id. Here I share the process to complete this project.
Introduction
Hello, My name is Shintia. Currently, I’m studying UI UX at Dibimbing.id Bootcamp. As I dive deeper into UI UX world, I have learned a lot of things such as design thinking, wireframing, usability testing, and many more.
In my final project, I want to discuss a case study about the Uniqlo application.
Overview
In this pandemic era, many people tend to buy things online. Uniqlo also took the opportunity by developing an application. Uniqlo application is an application that provides information about the latest products and promotions.
Problem Statement
But, after I research and read Uniqlo’s application feedback reviews on Google PlayStore, this application gets many bad reviews and comments. Many users criticized this application for only provides information about the latest products and promotions, with many bugs, not being user-friendly, and an ineffective ordering system.
Roles & Responsibilities
For this personal final project, I make end-to-end processes from UX research, UX design, UI design, A/B Testing, and Usability testing.
Challenges
The challenge is that it is difficult to find participants who have used Uniqlo’s application.
Processes
To make applications that are useful for users, I applied design thinking in making this project.
Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions.
By David Kelley and Tim Brown, IDEO founder
Step 1. Empathize
I empathize with users to know their motivation and pain points, so I can find solutions to help them reach their goals.
Comments’ observation
In this step, I observe the Uniqlo application comments from the google play store to find users’ motivation and pain points. After I collect some feedbacks, I group feedbacks into categories.
After that, I make a research plan and questionnaire guide to help me validate the data.
Research Plan
Questionnaire Guide
Based on the research plan, I distributing questionnaires and wait for three days to maximize the results of insight. From the questionnaire that was filled out by 96 people, there are 25 responses from Uniqlo’s application users. Some respondents said that they download the application to get a discount. Half of the respondents said that the application is good, while the other half validates the comments that the application is not useful, confusing in purchasing, the UI is not good, and wish to have an in purchase in the application.
User Interview
To find out more clearly the steps to buy Uniqlo products online, I did an in-depth interview with four users who had used the Uniqlo application. But there are just two users who have used the Uniqlo application to buy Uniqlo clothes.
Step 2. Define
After getting insights from users, I create an empathy map to define user behavior when using the Uniqlo application. I also create a user journey map to find what opportunities can be implemented in the product. The next step is to create prioritization matrics to decide what main opportunities are to be implemented in the product based on the user journey map. To develop the product, I also do a competitive analysis to find more insight that is useful for users.
Empathy Map
With an empathy map, we can understand how users’ behavior when using the Uniqlo application.
User Persona
Meet Jessie, a Uniqlo shopper who hopes the Uniqlo application can be better, so she can buy Uniqlo clothes easily.
User Journey Map
With a user journey map, we can understand how users experience when using the Uniqlo application, and we also can define opportunities based on users’ pain points that are useful to develop the product.
Prioritization matrics
From the summarized opportunity which has been found in the user journey map, I create prioritization matrics to consider which opportunities will be implemented into the product. I prioritized creating an in-app purchase, search features, search filter, and detailed sizes.
Competitive Analysis
In analyzing competitors, I took 3 brands, ZALORA, PULL&BEAR, and H&M. Based on these 3 brands, it is found that there is a similar hierarchy where there are promo banners, products search, and in the navigation bar, there are categories, charts, wishlists, and profiles.
In the H&M and PULL&BEAR application, the product has a description of the color, size, details, stock availability, the total number of products purchased, and price. Products can also be added to the shopping cart and then check out.
Same as H&M and PULL&BEAR applications, Zalora has more product details like the size and how to take care of the product. The desired products can be added to the wishlist or directly check out.
Step 3. Ideate
I start ideate by creating a user flow, information architecture, create wireframes, guidelines, and mock-ups.
User flow
User flow is used to describe the user’s steps to complete the task using a product. There are three main user flow: register/login user flow, add product user flow, and order system user flow.
Information Architecture
From Dibimbing.id Bootcamp class, Information architecture is a method used to make documentation of all flows, contents, and design requirements of an application or website.
Wireframe
I make wireframes based on information architecture. To enhance efficiency, I make wireframes on papers with design alternatives.
UI Design
Homepage & Search
The homepage is divided into gender sections. In every gender section, there are banners, categories, limited offers that tell users when the offers end, and also Uniqlo News as an article section. There is an example of the tops category. On tops’ category, users can search for the clothes they want by selecting categories or by the sort & filter feature. The categories contain about types of clothing. Users also can sort their search by low-high price, price range, colors, and sizes with the sort & filter feature. Search feature used to help users find the clothes they want. The most search section gives input for the user to see what most searched items.
Clothes Selection
On the clothes selection page, users get detailed information about their desired clothes such as the clothes’ category, clothes’ name, the description, what colors and sizes are available, and users also can see each store's stock. The sizes also provide size details to ease users for buying clothes. Users can put these clothes into a wishlist or basket to check out later, or they can check out directly by clicking on the order now button.
Wishlist
If there is no wishlist, users are invited to fill in the wishlist and directed to the homepage to start shopping. Users can easily enter a wishlist by pressing the love button on the item search results. Wishlist items will be accommodated in the wishlist feature, from here the user can add in the basket or direct checkout.
Basket
Same as wishlist, users are invited to fill in the wishlist and directed to the homepage to start shopping if users still don’t have the desired item. The checkbox is useful for selecting several items that you want to check out. On this page, users can apply coupon codes and see the estimated price to be paid.
Login/Register
Before proceeding to the checkout stage, users who have not logged in or registered will be directed to the login or register page.
Checkout
On the checkout page, users can get information about the order recap to make sure whether the clothes ordered are correct or not. To proceed to the order stage, users must fill in the shipping address, shipping method, and payment method. After filling in the ordering requirements, the user gets the total price to be paid and be directed to the orders feature to track their package.
Guidelines
Step 4. Prototype
I make prototypes using Figma. This prototype covers the user’s journey in finding clothes by search box feature and in-app purchase feature. Please click the italic link below to try the prototypes.
Step 5. Test
A/B Testing
I did A/B Testing to find out user experience preferences in checking out items from the basket feature by maze.co web application with four participants. After participants did the testing, I asked their reason for choosing their preferable journey.
Please click this link to read the A/B Testing Report
Test Result
Mission: Imagine that you already put your desired clothes in the basket feature. Please tell me how you check out the clothes in the basket.
Usability Testing (UT)
“Usability testing aims to evaluate a solution for a product by testing representative users in order to solve problems effectively.”
By Dibimbing.id class
I did usability testing on the search and buy clothes feature by maze.co web application with four participants. After participants did the testing, I asked about the difficulty and participants’ purpose for clicking on other sections.
Please click this link to read the Usability Testing Report
Test Result
Mission: Imagine that you want to buy a new t-shirt. You want to buy womans’ orange T-shirt size M with gosend instant and pay with gopay. Please tell me how you search for an orange t-shirt and how to buy it.
Closing
That’s all the explanation of my case study project. Through all the data and the application of design thinking, I got a lot of insight and made several opportunity ideas in the hope that Uniqlo application users can find and buy Uniqlo clothes they want more easily. I also learn to make mission testing more clear and validate with participants after testing. Even though it already meets users’ standards in buying Uniqlo clothes easier through applications, I continue to iterate developments for producing applications that give more favorable experiences.
I got a lot of new knowledge in completing this project, hope will be useful for me in the future. Feel free to comments, I am very open to receiving feedback and suggestions. Thank you for your time and attention to read :)
References
Let’s be Friends!
You can find me on Linkedin shintia lim :)
