Transforming Watsons

A UX Case Study For Watsons’s iOS App

Tasks

Research
UX design
UI design
Prototyping
Usability testing

Timeline

May - Jun 2024

What is Watsons?

Watsons is a well-known health and beauty retail chain that operates primarily in Asia. Watsons offers a wide range of products, including skincare, cosmetics, personal care items, healthcare products, and other wellness goods.The store is popular for its affordable pricing, frequent promotions, and loyalty programs. It also often provides pharmacy services in some locations.

Why did i choose Watsons...

I'm motivated to redesign the Watsons app after encountering navigation difficulties during my recent use. The user experience was lacking, and the user interface felt uncomfortable. I also noticed similar issues mentioned in app store reviews.

Additionally, there are many e-shopping apps offering good experiences and visuals. This got me thinking about what sets these apps apart and whether redesigning the Watsons app could be a worthwhile challenge to undertake.

Reviews from iOS app store:

Reviews from iOS app store

Problem

Goals

Improving the information architecture, user flow and UI of Watsons's app to enhance user experience.

Outcome

Who are  target users?

Desk Research

Watsons targets middle-class women aged 18 to 35. This consumer demographic values individuality, personal charm, and seeks a comfortable shopping environment.

Design Process

For understanding user experience...

Usability Testing

To gain a thorough understanding of user experience, I conducted surveys with individuals who have and haven't used the Watsons app, totaling 4 people. I asked them to complete typical e-shopping tasks using the iOS app, while recording their phone screens to minimize bias and pressure. Additionally, I observed closely how they interacted with the app. Here are the tasks I designed:

Here are the testing screenshots and testing results.

How did i prioritize which problems to address first...

User Experience-Cost 2x2 Matrix

Based on the testing results, app store reviews, and my observations during user testing, each sticker revealed different issues. While some issues were either out of my control or not urgent, I used this tool to understand the relationships between user experience and cost metrics. I utilized it to map the issues important to Watsons’ customers against the costs incurred by Watsons’ business, helping me prioritize which issues to address first.

Affinity Map

After employing the 2x2 metrics tool, I utilized it to categorize several key issues among participants and online reviews.

2X2 Matrix
Affinity Map

Based on the previous data, I depicted user personas...

Persona

To understand target audience, creating user personas provides valuable insights into their needs, behaviors, and motivations. This process helps in making informed design decisions, ensuring that products align with user expectations and enhance their overall experience.

How should I improve the design to increase the user’s success rate in locating the wishlist and collecting coupons?

Start to IA Redesign

Current Information Architecture (IA)

First, I built the information architecture to understand its structure. Since most users were confused about the navigation, they spent a few minutes lost between pages, unable to understand the hierarchy.

I tried to re-categorized. The same color boxes from the current IA are categorized under the same color in the revised IA. Some word using has changed.

Revised IA

The revised IA rearranged the hierarchy, prioritizing more important features to increase visibility, making it easier for users to spot the main features.

Current IA
Revised IA

Flow of My Favorite Redesign

User flow improvement

I tried to find a better flow to reduce the steps needed to reach the goal, including how to locate the wishlist feature and the right coupons.

Based on the interview, I assumed that putting “My Favorite” page on the tab bar might increase the accessibility.

Here are the things:

Flow of Finding Coupons Redesign

Next, I assumed the reason users can’t access the right coupon is due to the unclear distinction between in-store and online activities. There are two types of coupons, but users don’t notice that immediately. So, I tried separating the store into two pages using a segmented bar, based on whether I was shopping online or in-store.

Additionally, I placed the high-utility “online coupon” on the homepage.

Here are the things:

Finding "My Favorite" Flow
Coupon Collected Flow

Time to do usability testing

Validation Testing

After reducing the steps to reach the goals, I also measured the success rate of completing tasks-locating wishlist and collecting coupon before and after the changes.

Here’s what I found:

User testing

More Design Details...

Reflections

Engaging in this project has made me realize that usability testing is incredibly fascinating. It's like an extension of my daily life, where I find joy in observing people's behavior on the MRT. By observing how users interact with apps unexpectedly during testing, I've come to deeply believe in the notion that "my pain point is not your pain point." This experience has allowed me to provide unique insights into user behavior and preferences.

End of this project,
Next

Let's get in touch!

Hello there, I am currently available for both full-time positions and freelance projects. If you are interested in my work, please feel free to reach out, whether the opportunity is remote or on-site in Taiwan.

E-mailLinkedinInstagram