— EA

My Role: Sole UX/UI designer

Methods: Interviews, usability tests, preference tests, card sorting, affinity mapping, wireframes, prototyping

Tools: Figma, Marvel, Balsamiq, OptimalSort, UsabilityHub

Course: Career Foundry UX Immersion

Duration: 6 months

Year: 2021

Context

Text

The Challenge

A lot of people with MS are quite active and might even look healthy. But they are not.

They have to see doctors and take medical treatments more often.

Common sports activities such as cycling are often limited to them.

Mental health is both a symptom and a cause of new symptoms.

Tools that are designed to help healthy people are not always adjustable for people with MS.

Proposed Solution

Olive Health is a health and well-being portal that helps young people with MS. It provides tools to store medical records and other relevant features.

Target Audience

My target audience is young people (between 18 - 36 y.o.) with MS living in the UK.

My Process

While designing the app, I used the Design Thinking Process as my roadmap.

In the beginning, I wasn't quite sure which features I should concentrate on. It was simply because there were many areas to improve people's experiences. Moreover, it wasn't clear to me how to draw fair conclusions since everyone's case was so unique. Therefore, during the discovery phase, I was looking in several directions hoping that I would understand which one to pick.

Competitive Analysis

The first thing I did was check what was there on the market already. I looked at the apps and the websites that were either dedicated to MS or could be used with a little tweaking.

Websites

The most famous websites in the UK are MS Society, Overcoming MS, and Shift MS. They are tightly connected to the health organizations and their main purpose is informative and educational. However, they don't have any personalization.

Native apps

I've checked 21 native apps. Their purposes are either educational (literature, ongoing trials, videos, etc) or tracking (mood, relapses, etc). Out of all tracking apps, only two stood out because they looked professional, and had customer bases.

I’ve analysed carefully their key objectives, overall strategies, marketing profiles, and market advantages. I put my findings in SWOT Profiles.

My main conclusions were:

Both apps were lacking important features for people with MS.
Flaws in UI, sometimes critical. For example, even I, a person with 20/20 vision, struggled reading font in both apps.

User Research

My next step was to understand real people with MS. I focused my research goals on:

Learning about users’ habits and pain points.

```
Identifying some similarities.
```

Figuring out which functionalities to include in the app.

I used 2 methods to hear as many people as possible: questionnaire and user interviews.

Online Questionnaire

I created an online questionnaire with 7 open-ended questions. From the answers from 23 participants, I was delighted to confirm that there were a lot of similarities. For example, almost everyone was doing some kind of activity, cared about their mental health and changes in wellbeing. The main thing people was missing:

personalisation in apps

“Being able to add my MS diagnosis so that the tracking isn't based on what a fully "healthy" person should achieve in a day, can make u feel defeated on bad MS days”

User Interviews

I interviewed 3 people. Interviewees mentioned things that were pointed out in the answers to the questionnaire.

“Who is that person all apps are designed for? Not me!”

“Not everyone is jogging!”

I collected a lot of information and placed it in the  Affinity Map. In order to make sense of it, I grouped the data into 12 clusters.

Wrapping up

At the end of the discovery phase, I didn't want to narrow down the list of prospective features anymore. I intended to include everything in the app!

With the new findings and ambitious plans, my next goal in this iterative process was to create design solutions. I started with formulating a Problem Statement:

Our users need a safe and supportive space to add various records about their wellbeing, keep track of health-related changes, have access to various activities, read useful articles,  try MS dietary, and take benefit of telemedicine.

User Personas, Journey Maps, and User Flows

Based on the user research, I created User Personas, fictional yet realistic representatives of some characteristics of the target audience. They were great helpers in keeping the user-first approach during the ideation. Meet Greg and Janine!

Greg accepted the disease and his disability. He had friends and supported others. Janine didn't accept her new condition and hide from people.

The user research gave me the list of needs or goals interviewees had. For each goal, I visualised how a persona could accomplish it using the Journey Mapping tool and supported it by creating Mental Models. The latter method allowed me to understand the person's experience and think of possible solutions.

After such a successful duet, the User Flows were ready naturally.

Card Sorting and Site Map

After I created a collection of the user flows, I got everything together and made a Site Map of the future app. Unfortunately, it wasn't possible to use the results of the closed Card Sort due to the small number of participants.

The app underwent serious changes after the Usability Testing. However, at that moment it contained the following features: storing medical docs, telemedicine (video, text conversations), various exercises, personal exercises, tracking progress in exercises, various articles, and videos about MS-related subjects, mood diary, diary of gratitude.

With the sitemap as my navigation, I was ready to start building a prototype of the app. The process was iterative - iterations at all stages from low-fidelity to high-fidelity prototyping. Such an approach made it possible to step back after each change and see the interfaces with a fresh eye.

Low- to Mid- Fidelity Wireframes

I, as a sole designer working on the project, didn't have an opportunity to share my paper sketches with colleagues during brainstorming and discussions. So my low-fidelity prototyping looked like this. I was putting notes to myself, doing quick simple sketches with pen and paper. Several times I re-drew the screens in Figma to make them nicer and to not lose them. During this process, I was following 2 goals: getting to know the method and preparing drafts for mid-fidelity prototyping.

Shortly after (and in parallel), I made mid-fidelity wireframes with Balsamiq. I made several screens, placed them in Figma, and tested several User Flows mirroring prototypes on my smartphone.

High-Fidelity Wireframes

The next step was creating high-fidelity wireframes and clickable prototypes. I added more details to the mid-fidelity prototypes. For example, features started having proper layouts, more interactions had been added, navigation had been tidied up. The B&W prototype was ready to be tested!

I conducted remote moderated usability testing with 6 people from my target audience. The goal was to understand how user-friendly the app was and whether there were some flaws.

My tasks were dedicated to testing:

```
understanding the navigation    
```
```
finding features (articles, exercises)
```
```
filling profile with medical data
```
```
understanding how to upload files
```

With participants’ consent, I recorded the tests. For better organization and visibility I used Affinity Map again and used the Rainbow Spreadsheet method.

I noticed that all steps in the test-flows were straightforward for participants except for the first one. The majority (4 out of 6) didn't understand where to click to start performing the tasks.

I could try to conclude that the problem was in the wrong titles and the missing onboarding. But unfortunately, the real problem was in the fact that the app was simply confusing. And as a result, people were worried and uncertain if and how the given tasks could be performed within the app.

Sadly, the best description of my finding was the quote of participant Xana:

Do people know what this app is about?

In a couple of days, I was ready to fix this.

PIVOT!

I concentrated on making the app more understandable. I decided that the way to go was to keep fewer features and present them clearly. I referred back to my user research and I checked the competitors again.

I removed the telemedicine feature.

Usually, this feature was the main, and apps were built around it. But since online consultations weren't highly requested by my interviewees, it didn't make sense to keep them.

I changed the way health information was organized.

Before health records were stored in two places in the app: Profile and Consultations. Instead, I introduced the functionality of My Health. This is where all health records are stored now.

I removed several trackers: activities, mood, symptoms, food diary.

I strongly believed that each tracker had to be made with some goal and be supported with the rest app. This version of Olive Health couldn't provide this.


Since the other steps of the user flows were user-friendly, recognizable, and expected,  I adapted and re-used them.

Updated Sitemap

Wrapping up

Olive Health app became clear and user-friendly. It still offered the solutions to the majority of pain points:

```
Latest news
```

Articles and videos on various MS-related subjects

```
Various workouts
```
My Health - a health history! NEW

Design Evolution

In the next iterations, I fine-tuned the app. Some examples of the major changes in the evolution of the user experience are shown below.

Style guide

I created a design document and design language system for Olive Health in order to maintain consistency within the whole app and for coherent updates.

Final Prototype

At the end of my work on this project, I've put the final versions of the screens together.

Curious to see how the Olive Health app works? Feel free to play around with the prototype:

Promotional Video

Here, I gladly present a short promotional video I've made.

Challenges

My biggest challenge was to design a health app that is not overloaded with serious features. During the usability test, participants were confused about my first version of the app because features competed with each other and puzzled people.

What’s next?

I will finish the Settings and the Profile pages.

My next big step is designing the visual representation of health records over time and their correlations. This is a very exciting and challenging project because making graphs user-friendly is tricky!

Whilst doing my UI CF course, I will refine the look of the app.

In all cases, I will follow the iterative design thinking process.

Appreciation

Since this was my first project working as a UX designer, the learning curve was extremely steep and sometimes winding! During this journey, I've gained a lot of experience and looking forward to growing more as a UX Researcher and UX Designer.