Overview

My goal was to improve the customer’s shopping experience on Uniqlo’s mobile website. By discovering and identifying potential areas that could impact customers’ experience, led me to redesign their size guide. 

This mobile web project was created as part of my UX Design course at RMITO University.

Role: User Research, Design, Prototyping, Testing.
Duration: 6 weeks.

View Prototype

Hypothesis

My friends and I have been shopping online increasingly in recent years which got me interested in exploring e-commerce. I’ve chosen a mobile web project as I tend to browse from my phone and learned that more than half of the internet shopping traffic comes from mobile devices*.

Uniqlo has been one of my go-to shops but when it comes to shopping online, I feel that finding a product and making a purchase decision has been a little less fluid compared to other sites and contrasts to their in-store experience. Curious as to why I felt this way, it led to my hypothesis:

Customers might find it difficult to browse and make informed shopping choices because of the time and effort it takes to navigate through their website.

 

Process

 

Research and Usability Heuristics

I did desktop research to compare the website experience with other similar clothing stores. From a quick review, there was a noticeable amount of scrolling because the product listing had a lack of focus as information was spread out. There were no search suggestions. There are a lot of navigation links. Wishlisting only floats on top of the main image from the carousel. This meant if I viewed other images, the wishlist button won’t be there.

To further validate my hypothesis, I benchmarked the website against the 10 usability heuristics. 

The main insights were the lack of intuitiveness when it comes to consistency and standards throughout the website. There is room for improvement in navigation, hierarchy and error prevention.

Assessing the website against the user experience standards and scale has been informative. This helped me saw potential to improve customer’s online shopping experience at Uniqlo so I was curious to explore further.

 

User Interviews

My goal with user interviews explores two parts: To learn how customers discover a product they like and to understand how users inform themselves to make a purchase decision.

I conducted interviews with 5 participants of mixed genders, diverse backgrounds and are all frequent online shoppers.

This research interview was about:

  • Learning user general shopping habits.
  • Observe participants browsing the Uniqlo website, with prompt tasks provided,
  • Understanding hearing how they make decisions for purchase and whether expectations are being met.

 

Affinity Mapping and Synthesis

After listening to individual’s experiences and reviewing the recordings, I grouped common themes and pain point areas.

Insights generated from affinity mapping show that:

  • Users want to feel confident with shopping decisions by being well-informed about product information specifics such as sizing and filtering reviews.
  • Users weren’t aware of additional featured products because they weren’t displayed in the spotlight.
  • Users don’t want to spend too much time on the website because of search and navigation.
  • Users may not find a product even if it exists because of the lack of search suggestions, naming of products and information architecture.

Based on insights, my top three time and effort related recommendations are:

  • Explore ways for users to quickly discover products in navigation with less attempts and more confidence.
  • Consider how to add more product information in detail.
  • Help users fluidly browse what they may be interested in with the Search function.

At this stage, I did an update to the proto persona after the research interviews to have a better reference of the target audience and their shopping preferences.

 

Ideation

Based on recommendations, I sketched 16 ideas and narrowed them down to 4 best ideas to evaluate and prioritise with the UCD Framework.

Prioritisation

DVF score card: Looking at the table, there was a score tie between 2 ideas, I wanted to visually compare these on the impact-effort matrix to determine which of the 4 concepts should be prioritised.

I choose to address the area which is low effort and high impact value to “Creating a visual and responsive sizing guide to improve customers confidence in product fit.”

From qualitative research:

  • All 5 interviewees mentioned size being a main consideration when choosing a clothing product.
  • 2 interviewees spent some time looking at the size chart.

Uniqlo’s size chart had a popup scrolling page which spans about 4 mobile screens in length. The page also doesn’t have a responsive design.  Viewing the size chart on mobile requires scrolling and zooming into small text to find the metrics.

This presented usability inconveniences for mobile web shoppers as they try to search for relevant sections in the chart. From user observations, some individuals were trying to read small text and pinch to zoom into a section of the long page. While there is basic hierarchy, the information presented is cluttered and can be better organised. One interviewee mentioned they had purchased less online due to uncertainty with sizing metrics.

Creating a visual and responsive page for size guide aligned with my hypothesis. By improving one of the most considered product information – size, customers will have a more seamless and improved fluid online shopping experience. This will save time and improve shopping confidence.

 

Prototypes and User flow

Quick paper prototype

This is a user flow snapshot of a customer searching for a product, clicking into the product and viewing the redesigned size guide, clicking on another tab within, closing the guide and adding the product to cart.

Followed by a lo-fi digital prototype

Usability Tests

With the lo-fi digital prototype ready for usability testing, my aim was to:

  • Test whether it’s easy for users to navigate and find relevant sizing information with this new concept.
  • Observe the intuitiveness of user flow between the product page, the size guide and everything in between.
  • Test whether users understand how to read their own size metrics with this change of layout.

 

Results and Findings

After reviewing the usability testing notes, I created a table to track the results of participants completing task prompts. This provides clarity on areas that participants generally struggle with which require attention.

One participant wasn’t able to locate the correct tab so this brought attention that categories and tabs needed iteration.

User testing insights were grouped into themes and clustered into each area of issue:

  • Tab categories.
  • Scrolling.
  • Table size chart.

All insights were labeled for reference as either an action, usability issue, opportunity, frustration, confusion, and negative or positive feedback.

Learnings:
Reflecting back, I could have populated all insights and findings into a table to filter usability issues and feedback types. Insights would be clear, distinguishable and organised which benefits situations when sharing with a team.

 

Iterations

From clustered insights, three themes were found:

  • Less options for navigation tabs might be clearer.
  • All users didn’t look at more than one type of size metrics,
  • Amount of scrolling is noticable to the user.

Changes implemented:

  • Reduce category tabs by nesting in the hierarchy.
  • Improve micro-copy for clarity.
  • Hide irrelevant size metrics.
  • Reduce scrolling by switching the table axis of size chart.

 

Usability Test after iterations and Usability Scale Feedback

After iterations, the same participants from the usability testing were able to do test the iterated prototype and provide a some feedback.

I wanted to understand:

  • Microcopy and nested hierarchy made sense?
  • How they felt about toggling size metrics?
  • How they felt overall compared to the previous version.

Individuals noticed that this version was an improvement compared to the previous and was pleased that only relevant information is displayed. 1 of the participant wasn’t sure about switching the table axis to read size variations vertically.

2 participants also answered the System Usability questionnaire Score of 85 and the other participant had a score of 92.5.

 

Before and After

Before:

After:

 

Outcome and Takeaways

Some takeaways from this project:

  • Research interviews: I had to remind participants that there are no right or wrong answers. That way they won’t be conscious about trying to be helpful or being bias towards my project which could impact findings.
  • Project scope: After each round of user feedback, there are new iterations to consider. I had to question whether these decisions for changes are valid and how these are prioritised to stay in scope.
  • A challenge specific to this case study is breaking up a large amount of unmodified size guide content to fit with this new concept. Even a small section of the web user flow can require more rounds of testing and iterations.

View Prototype

Credits:
Icons are from Figma Wireframing Kit.

*e-commerce traffic source from Statista