Watsons Mobile App Re-design

Contributors: Ain Sahimi, Alicia Tan, Edward Han, Intannur Ain

Tools: Figma and Miro.

Overview

Watsons is a health care and beauty care chain store in Asia. The mobile app was launched on both Google Play and Apple store on 2nd August 2018 and since then it has collected some reviews online.

It was rated 1.9/5 on Apple Store and 3.4 on Google Play. The team decided to focus on iOS version of the app.

User Persona

We created a persona to aid us with the user key tasks. Below are the brief details about the persona;

Emilia is a 24 y/o clinic clerk. Who enjoys the convenience of shopping online via apps like Shopee, Watsons and Lazada.
On her way home , she remembered she needed to buy a shampoo and went to Watsons. To her shock, there was a long queue due to a sale running in the store.
She then decided to make the choice of just ordering online via the Watsons app.
While searching for the shampoo, Emilia finds it hard to navigate through the app.
She wishes the app could be cleaner. Alas, she found her preferred product and purchased it via the app.

Key Tasks

Our user had to successfully checkout via the Watsons app with 1 shampoo and 1 facial wash.
Be able to properly navigate the app till the last step, which is checking out.

User Journey

In this exercise, we lay down the user journey and its tasks to reach his end goal. We then identify potential issues that could be improved in each task and further discuss on how we can solve or improve the overall experience.

UI Style Guide

Our mission was to retain Watsons key branding but yet introduce an improved usage of typography and stylized iconography for a clean and welcoming touch.

Identifying Opportunities

🚨 Duplication of membership cards shown on homepage.

💡 Move membership card to profile.

🚨 Homepage is too cluttered with advertisements.

💡 Have lesser advertisement section and focus on categories of products.

🚨 Watsons logo should not represent "Home"

💡 Use graphic Home icon to represent "Home".

🚨 Help/Chat can be least priority.

💡 Have the help/chat section under "More".

🚨 #ColourMe can be least priority.

💡 Have the #ColourMe section under "More".

🚨 Campaigns can be part of the ad banner

💡 Replace this section with product categories so that its easier to let users get to what they want to look for.

Solutioning

To solve the current problems, we first established the most important Job-to-be-done for the user. To be able to select the product she wants and buy it efficiently.

Then the required features of the pages are ranked in terms of importance, starting from most important features such as clear banner, search bar, product selection, down to the least important items.

Then we explore 3 options for improvement.