UNIQLO CA

UNIQLO's Canadian mobile application receives a heuristic evaluation of its primary task flow, complete with recommended revisions.

(15 minute read)

Overview
Problem Space
Selected Task Flow
Evaluation Process
Suggested Revisions
Revised Task Flow
Key Takeaways

Overview

Project Type

Academic, November 2021

My Role

UX Designer in a group of 3

Timeline

16 days

Tools

Figma

Problem Space

UNIQLO, the popular Japanese casual clothing company, opened its first Canadian store in 2016. Two years later, they launched their Canadian mobile app, UNIQLO CA, to expand their reach beyond their 14 brick-and-mortar locations.

While sales from mobile shopping have been on the rise for several years, many retailers were unprepared for the surge in activity that came with the COVID-19 pandemic. Suddenly the value of a user-friendly mobile shopping experience had increased exponentially.

According to Salesforce's 2020 State of the Connected Consumer report, 68% of customers agreed that “COVID-19 has elevated [their] expectations of companies’ digital capabilities.” An even greater number of customers (83%) expected companies to be more flexible when it comes to order fulfillment and shipping, such as allowing for in-store pickup of an online order. The report indicated that this trend is not slowing down—a majority of consumers surveyed expect they'll continue shopping online after the pandemic.

So what does that mean for the usability of a mobile app like UNIQLO CA, launched pre-pandemic? Are there elements in the app's design that could be revised to significantly improve a user's experience? To determine where these opportunities might lie, my groupmates and I were asked to conduct a heuristic evaluation.

What Is A Heuristic Evaluation?

A heuristic evaluation is the process of inspecting a design to see if it incorporates key principles of usability. These principles are somewhat broad rules of thumb, such as how much control the user has during particular task flows or the consistency between similar elements across screens. But their presence ensures that whoever is moving through the design is able to do so with efficiency, confidence and little friction.

While there are a few different heuristic systems to choose from, we used Jakob Nielsen's 10 general usability principles to guide our assessment.

Selected Task Flow

The mobile app's main function is to allow customers to browse and purchase UNIQLO clothing and accessories, so it made sense to evaluate this task flow before any others.

For the purpose of the exercise, our user is looking to buy a pair of pants. This is the user’s first time shopping through the mobile app, though they’re familiar with the website and have a UNIQLO membership account.

Their journey through the app would be as follows:

Start at the Men's clothing landing page
Select the Bottoms sub-category to see the full list of available products
Select a pair of pants they like and add it to their cart
Log in to view their cart
Proceed through the checkout process

What pitfalls might the user encounter while moving through the app?

Six pages from the UNIQLO CA mobile application, numbered and labelled. One: landing page. Two: featured category page. Three: product page. Four: login page. Five: cart page. Six: check-out page.

Our selected task flow starts on the landing page and ends on the checkout page.

Evaluation Process

To begin, we moved through our chosen flow searching for moments of confusion, inconsistency and general friction. We tried to put ourselves in our user's shoes: Where would they think to start looking for pants from the landing page, and was that intuitive? How did the app make the search for pants easier or harder? How would they expect the app to respond when they added something to their cart? How many payment options were available to them, and did they all function? When they ran into an error, what kind of resources were made available to them?

Any violations of our 10 principles were noted, screen by screen. By the time we finished inspecting the task flow, we had 14 individual usability issues. They spanned the following key heuristic principles:

Visibility of system status
User control and freedom
Consistency and standards
Error prevention
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors

In order to proceed with improving the usability of the task flow, we needed to parse our findings and decide which of the issues had the most significant negative effect on the user's experience. We assigned each issue a severity rating using a heuristic evaluation scale, where 0 is not considered a usability problem and 4 is severe enough to warrant fixing before the design's release. As we rated each issue, we also determined straightforward solutions to them.

Not a usability problem at all

Cosmetic problem, only fix if there is extra time available

Minor usability problem, low priority

Usability catastrophe, must fix before release

Heuristic Evaluation Scale

Major usability problem, high priority

As we expected, there were no issues that we considered absolute usability catastrophes, but there were still several that we considered high priority. We knew that we did not have enough time to address every single issue, but which ones could we solve with the least effort and the highest positive impact on the task flow? Mapping our issues along a design prioritization matrix allowed us to identify the issues that required our attention the most.

The matrix y axis is labeled impact, one end being low and the other high. The x axis is labeled effort required to fix, one end being low and the other high. Issues that fall in the high impact and low effort category are 1 Not able to check cart from the app, 2 No category filters on landing page, 3 No way to proceed from Pay in Store option, 4 No help suggestions for Pay in Store error, 5 No exit on checkout screen, and 6 No state change to cart icon. All these issues are highlighted green. The issue of long, tiny text and tiny product shots is categorized as high effort and medium impact. The issue of no clear exit from product webpage is categorized as medium effort and medium impact. The issues of 1 inconsistent category sublabels and 2 inconsistent error text colours on login page are categorized as low effort, low impact.

High impact, low effort issues are coloured green.

At the end of our evaluation process, we had identified 6 usability issues that made the most sense to solve to improve our chosen task flow. Each of these issues had received a severity rating of 3. We could now start mocking up our suggested revisions while adhering to UNIQLO's existing branding.

Suggested Revisions

HEURISTIC SOLUTION #1

Flexibility and Efficiency of Use

Problem: No category filters at the top of the landing page.

Users are forced to choose a main product category as their home page but are unable to filter more narrowly unless they scroll halfway down the page. This is an obstacle to users who know what type of product they're looking for.

Solution: Add sub-categories to the top lefthand menu to improve navigation.

Before and After mock-ups of the landing page. The Before mock-up displays the landing page’s simple drop-down menu of the main clothing categories (Women, Men, Kids, Baby and the UNIQLO home page). The After mock-up shows the new sub-categories added to this menu (All, Outerwear, Tops, Bottoms and so on) with a back button.

HEURISTIC SOLUTION #2

Visibility of Status

Problem: No state change to the cart icon.

Users are unclear as to whether the app has registered that they've selected a product to buy.

Solution: Add an active state to cart icon to indicate when a product has been added to it.

Before and After mock-ups of the cart icon when a pop-up modal confirms the user has added an item to their cart. In the Before mock-up, the cart icon has not changed. In the After mock-up, a red circle appears at the top right of the cart icon.

HEURISTIC SOLUTION #3

Consistency and Standards

Problem: Mobile users must log in to view cart contents.

First-time mobile app users are forced to log in or create an account in order to check their cart. This is jarring because it's inconsistent with the experience on the company's website.

Solution: Adjust the task flow by providing a user with the option to see their cart and ask them to log in when they decide to finally check out.

Before and After mock-ups of a product page when a user clicks on the cart icon. Before, clicking on the cart icon takes the user to the log in page. After, clicking on the cart icon takes the user to their cart.

HEURISTIC SOLUTION #4

User Control and Freedom

Problem: No exit on the checkout page.

Users who wanted to review their cart would often select X , which closes the entire cart page, leaving them feeling confused. They did not realize that the back arrow button would take them back to their cart.

Solution: Enhance the back arrow button with a label to make it larger and easier to select.

Before and After mock-ups of the check-out page. At the top of this page in the Before mock-up, there is a small back arrow button on the left and an X button on the right. In the After mock-up, the back arrow button is larger and is labelled View Cart. The X button has not changed.

HEURISTIC SOLUTION #5

Error Prevention

Problem: No way to proceed from Pay in Store option on the checkout page.

If a user selects Click & Collect in step 1 of the checkout process, and then selects Pay in Store in step 2, they cannot proceed any further. It’s unclear why Pay in Store is an option in step 2 if it’s not compatible with the Click & Collect option in step 1.

Solution: Add a Next or Continue button to the bottom of the Payment Option step. This button stays inactive until a valid delivery and payment combination is selected.

Before and After mock-ups of the check-out page at the Payment Option section. In the Before mock-up, the Pay in Store option is selected and the prompt to search for a store using their current location has resulted in the error message “No store matches your current search criteria.” In the After mock-up, an inactive Continue button appears below a revised error message.

HEURISTIC SOLUTION #6

Help Recognize & Recover from Errors

Problem: No help suggestions are provided for the Pay in Store error on the checkout page.

There is no explanation for how users can fix the Pay in Store problem or why it isn't a viable option during checkout.

Solution: Add error text explaining why they cannot select the Pay in Store option. Provide a link to Help documentation or contacts.

Revised Task Flow

Six pages from the revised UNIQLO CA mobile application, numbered and labelled. One: landing page. Two: featured category page. Three: product page. Four: cart page. Five: login page. Six: check-out page.

Our revised task flow still starts on the landing page and ends on the checkout page, but our updates as the user travels between them result in a smoother and more positive experience.

Key Takeaways

Companies of any size (not just those valued in the billions, like UNIQLO) can design customer interfaces that do not incorporate key heuristic principles, and thereby drive away potential sales revenue. Focusing the heuristic evaluation to a single task flow in the UNIQLO CA mobile app allowed us to bring focus and efficiency to the process. We were able to increase the user's control, clarify key functionality and provide a consistent experience with UNIQLO's website, all of which made a significant impact on the usability of the app's main task flow: browsing and purchasing goods.

When applying recommended revisions, we were careful not to introduce new obstacles to users, opting for small changes where possible, as they can often make the largest improvements to a user's experience.

As with any design project, there is always more to be done. It would be prudent to validate our suggested revisions with user testing before resolving the lower-priority heuristic issues that we uncovered during our initial evaluation. Once those were completed, the next task flow in the app could be chosen for heuristic evaluation.