“As a user, I would like to have some guidance before booking an appointment with a therapist.” (Eva)
My roles: UX Researcher, Information Architect, UX Designer, Interaction Designer, UI Designer.
Project Duration: 10 months.
Tools: Figma, Usability Hub, Optimal Workshops, Balsamiq, some never out of fashion Pen & Paper.
Team: Individual with the supervision of a Mid-level and a Senior UX designer.
N.B: You can scroll inside the mockups (like the one above) for a better experience.
The Challenge
To design a web responsive app that lets its users keep on top of their health and/or wellbeing needs.
Using a Human - Centered Design (HCD) approach
Where was I to start and what process was I to follow? As a designer, my job was to advocate for the user. For this, I applied a Human - centered approach that makes the user the centerpiece of the design process.
Discovery Phase
Defining a first hypothesis: Applying the Double-Diamond Strategy
With such a broad challenge and before conducting any research on competitors, I wrote a first problem statement using the Double-Diamond Strategy.
First Hypothesis:
People need a way to access a variety of information on their health that is easy to understand.
In order to take the steps needed to improve their health and wellbeing.
We will know this to be true when our users will use the app regularly to check on their health and also more users with different health issues will start using the app.
Analysing the competition
I started off my research by analyzing what other apps in the market had to offer and conducting a competitor analysis with the elaboration of SWOT profiles for each competitor I wanted to research. One such competitors was Moodfit, whose Strengths and Weaknesses extended to many other apps of the Mental Health sector:
Strengths
Free tools and activities to help you track your mood and state of mind and to help relieve negative feelings.
Weaknesses
Like many apps dedicated to mental health, they have good tools like tests and diaries but lack access to professional help.
Opportunities
The mental health sector is really untapped territory right now, with no real strong contender(s).
Threats
With meditation apps like Calm and Headspace taking the limelight along with regional appointment-making apps such as Doctolib in Germany and France, mental Health apps seem to struggle to gain a clear foothold in the market.
User Interviews
But the user research part of my project really took off with user interviews. 4 user interviews were conducted with the goal of uncovering people's frustrations, behaviours and needs with their health, the health system and health apps.
"I find it hard to understand my test results, they just sound gibberish to me."
"Sometimes I have to go twice to the doctor before he starts listening to me."
"Oh, I feel really anxious so I subscribed to Psychology Today."
Creating an affinity map was helpful as to make sense of the data. Once this was done, I could put together my insights and findings into a report. But things weren't always as linear as I thought.
4
Interviews
14
Open-ended questions
38
Findings & Insights
11
Cups of coffee
I was struck, most people wanted above all to be heard and understood.
Personas
It was time to reconsider my first hypothesis. Much more could be gained from helping people to communicate with a specialist when they most needed it. But how? Additionally people could also be interested in knowing more about themselves. Should I be designing for the general user or for a more niche-market kind of user? It was time to tackle the challenges ahead with the creation of user personas. In this way, I would have a name and face given to my collated data to refer to when ideating my solution.
User Flows
Which problems was I to focus on? Which of these were more technically feasible? Answers weren't always as straightforward as I thought, but I wanted to focus my attention on solutions and then features aimed at the general public, inclusive, and technically feasible.
After creating my personas, I focused on three core features (tasks) and I mapped out each and every step the user would take—from entry point right through to the final interaction, to accomplish a task through user flows.
Ideation Phase
Site Map
According to the user flows I created, I then sketched out a site map that would help me organize the taxonomy of my app into categories with three main features in mind, namely: Workshop Section, Booking an Appointment section, and Taking a Mental Health test.
I also conducted a card sorting session with twenty participants and reorganized my site map according to how they organized the taxonomy of my site. However, since the taxonomy of my site wasn't all that big, I didn't gather many insights for further improvement, so I left it as is.
Creating Wireframes
With so many tools at hand to create wireframes, I used post-it notes (yes, you read that well) with the aim to use the small space given to only focus on the big picture. Then I used Balsamiq (pardon my Comic Sans) to refine these lo-fi wireframes before adding another level of detail with Figma.
Pen & Paper Wireframes (booking an appointment)
Low-fidelity wireframes with Balsamiq (booking an appointment with a health specialist)
Finally, I created a prototype to be used in the user testing for desktop and mobile.
User Testing & Iterative Phase
I conducted user testing with 6 users, which helped me uncover main frictions when using the app. I collated the data on the rainbow spreadsheet below:
Once I had identified the issues and classified them according to their level of severity, I conducted a first iteration round to fix usability issues before implementing the UI.
Before and after iteration
Some users were unable to find the test. I changed the copy to make it more concise and to the point. However, users would still struggle to find it. I would have to later add an illustration with an appropriate CTA button for users to pay more attention to it.
Before and after iteration
Other users didn't scroll down the homepage to uncover content below the fold because they simply didn't know there was more content that what was showed on the screen. This was fixed by making content below the fold peak out.
Creating a style guide
It was time to address UI elephant in the room. Many folks would awe at the creative challenge, but I was downright scared. I had never done any UI design before. But with quite a few resources and the help of my round-the-clock UX mentor (your help was invaluable, Javier!), I went on to tame this new elephant.
The use of pastel blue and green transmitted the feeling of calm and relaxation. These colours are traditionally worn by the medical staff. Since I wasn't designing yet for a particular platform, I used blended elements from both guidelines, Material Design and iOS to create a design system.
The UI design implementation wasn't the end of it all as I conducted two last rounds of iteration. One, where I reviewed my app in accordance to WCAG guidelines and another in which I conducted a final iteration according to peer-designer feedback.
30
wireframes
7
Iterations
40
Participants recruited
2
Senior Designers who reviewed my work
Final thoughts
The design becomes a lot more complicated to change the further ahead you are in the process. This is why the first few steps are of vital importance. My choice of altering the first hypothesis (tracking health and wellbeing) for a contact with health specialists repercuted on all the following steps.
Is there anything I would have done differently? By wanting to accommodate different needs, I ended up blending health and wellbeing into one. For better user engagement, I could scrap the wellbeing aspect and focus the content only on health.
My main concern was mental health. How to help people who were reluctant to book an appointment with a mental health care specialist book an appointment? This is why I devised the mental health test, but users could also use another flow for this (for example, reading an article with a link back to the test).
One of the project requirements was to create an onboarding and sign up/sign in flow/journey to be shown right after the splashscreen. However, in future projects, I will follow iOS guidelines that outline suggesting an onboarding after the user has had the opportunity to explore the app.
Drop me a message
Let's share ideas & discuss ways to collaborate!