Uniqlo Redesigned
As a first time user of Uniqlo's online web shopping experience, I found several areas where the design was awkward and hard to use. To improve the user experience,
I decided to redesign the website with a focus on enhancing the product display and stock visibility.
Timeline: April 2023 (one week)
Role: UX/UI Designer
Tools: Paper, Pen, Figma
Team: Solo (Concept)
Context
I saw an ad on social media about a sale and decided to browse the website on my laptop without any specific item in mind.
While browsing, I noticed several areas where small improvements could greatly enhance the shopping experience for users. Therefore, I documented my process, challenges, and suggested solutions in this unsolicited redesign case study. Despite their seemingly minor nature, I believe these improvements can streamline the process and help users achieve their browsing/shopping goals more easily.
( Hint: You can click on any of the following links to jump straight to a specific design problem. )
Main Areas of Improvement:
Related Issue #1:
Clutteredness and Misalignment
Related Issue #2:
Product Display
Related Issue #1:
Clutteredness and Misalignment
The product display currently feels cluttered and overwhelming due to the presence of four distinct sections that serve varying purposes and utilize different image sizes and alignments.
Reference:
In the image on the right, I have provided an overview of the entire Uniqlo Product List page.
The main product display is highlighted in red, and the other three sections are framed in red. In addition, I have dotted the lines of misaligned elements in blue.
.png)
My Suggestion:
I recommend keeping only section #A to display the most relevant products to the category and filters users selected. The interface should be cleaner to reduce user's overwhelm and streamline their browsing process.
View my redesign in the prototype below.
Related Issue #2:
Product List Consolidation
I noticed that there were repetitive products listed (same product ID).
*It's worth noting that on Uniqlo's website, these products are not placed side-by-side but are dispersed across different pages.*
Additionally, out-of-stock items are listed with a small grey tag as the main differentiator. This is not the best user experience because users may get excited about a product, only to find out that it is sold out when they click on the product description page.
.png)
My Suggestions:
Repetitive products should be consolidated into one product & increase the different color selection. This prevents users from mistakenly assuming that certain colors are out of stock or having to search through multiple pages to find a desired color.
Out of stock items should not be listed.
.png)
Impact:
These two changes resulted in...
-
Reduces at least three clicks
-
Accurately reflects items still in stock (260 instead of 447)
-
Reduces total page numbers from 24 to 13, making it less daunting for shoppers to browse all products.
Original
My Redesign Suggestion
Stock Visibility
Unclear Statuses:
The process of checking store availability is confusing, with multiple pop-ups and grayed-out text statuses that are difficult to distinguish from one another.
Reference:
The short video on the right documents the process a user would have to go through to check the store inventory for a specific item.
Do you see the alarming/disruptive pop-ups?
And there are three of them!
The screenshot below shows the store inventory result, where three different inventory statuses are displayed together in the same way (grey text), making it difficult to decipher at first glance.
My Suggestion:
-
Remove the pop-ups!
-
To streamline the results, only stores with available stock should be displayed.
In Conclusion
These suggestions are based on my personal experience, and I understand that the redesign may not be constrained by limitations faced by designers who worked on this project. There may be reasons why they made the design choices they did. However, I do believe these small design changes could greatly improve the user's shopping experience, make it more intuitive, and reduce frustration.