Loading...

Tomoko (Temp Name)

UX/UI Design • IA Design
Client: (Global Pharmaceutical Company)

Company: McKinsey & Company

2018
*"Tomoko" is a placeholder name. The app's and company's real names can't be shared due to confidential reasons.

Tomoko, or "friendly child" in Japanese, is a helpful tool dedicated to patients who are suffering from atopic dermatitis (AD). They will be able to share with the doctor and understand more about their skin conditions through the tracking feature and educational contents.

The client, a global pharmaceutical company, was looking to launch an unbranded mobile app as part of their new drug release. They hoped for the mobile app to be a tool that would accompany those who will be using the drug. We were requested to develop the design from the ground up, using the design sprint methodology, before handling it off to their team of developers.

My responsibilities in collaboration with the team were to lead the UX design, UI conceptual design, and IA design, support client presentations and usability testing, as well as provide guidance to the UI designer and create content documents such as a UX documentation guide and a UI concept development guide.

Currently, Tomoko is being transitioned into the development phase.



Research & Analysis

Who are the users?
Atopic dermatitis patients are the mobile app's target. These people have been dealing with the disease for a very long time, with the maximum number of 100+ flare-ups per year. They are troubled by the idea of being different, alienated, and helpless.

What are the users looking for?
They were looking to have control over the disease, and to be heard. These needs could be met by using Tomoko to track their AD progression in order to see the pattern of what triggered AD, as well as remind them to do treatments and learn about new tips and articles.

How can we relate the UI to our users?
I developed two UI concepts by analyzing the ethnography research provided by the client. This analysis really impressed the client and they kept mentioning it during our meetings. There were six steps:
1. Find the top 10 keywords that are mentioned most
2. Define the keywords with patients' experiences
3. Associate the keywords with colors and symbols
4. Group the colors and symbols into moodboard directions
5. Develop moodboards, following by UI concepts
6. Test with the users and select the winning concept


Sources: Pantone Color Institure, Shutterstock



User Experience

Ones of the main concerns regarding a digital experience for mobile devices is making sure that you cover for both iOS and Android. For this design overall, the only point is the position of the bottom navigation in both operating systems. We decided to keep it at the bottom for Android phones, similar to how it is positioned on iPhones, as it is a pretty common solution.

Usability Testing
The UX was tested with nine patients: five women and four men. We guided them to interact with the wireframes InVision prototype on an iPhone and asked questions related to usability. The majority of the results was positive. They found the UX to be very easy to understand, tight, and straightforward. We also conducted a A/B testing on the two UI concepts in order to see which concept the users like best. I will explain about it more in the User Interface Concepts section below.

Key User Scenarios
1. Track the AD and take photos
2. Review the tracking summary
3. Review the photos
4. Read AD-related contents

Main Structure
From the key user scenarios, the main features are as following: Overview, New Entry, History, Photos, and Resources. These functions were then wired together to form the main structure flow as presented below. The following flow is the site map that represents all functional screens.


View the larger site map in PDF >

User Flows
In parallel with the wireframes development was the creation of the user flows for each feature of the app: bottom navigation, Onboarding, Overview, History, New Entry, Photos, Resources, and Notifications.

View every user flow PDF >

Wireframes
View the wireframes InVision prototype >



User Interface Concepts

The two UI concepts from the research were modifed based on client feedback and shared with the nine users during the usability testing in the form of an A/B testing. The users were asked which concept they prefer and why. The majority chose Concept 1, with reasons being it looks more professional, makes them feel in control, user-friendly and easy to the eyes, while Concept 2 was considered too bright although colorful. All of these matched the top keywords from the research, with "Control" being #1 and "Understanding" as #3.

After getting the results from the usability testing and client approval, I shared the selected UI concept with our UI designer and offered design guidance along the way in conjunction with minor UX updates.

UI Concept #1

UI Concept #2