Concepting Managing Stress Level Feature : UX Case Study

Reduce excessive feeling panic by redefining COVID-19 informations at online telemedicine mobile website.

Dinda Lutfiyah
UsabilityGeek
8 min readMay 17, 2020

--

Disclaimer: This case study was conducted personally at the end of March 2020, so every data that is given in this story may not be valid anymore in current COVID-19 situation.

With COVID-19 starts to outbreak in Indonesia, people tend to accept bad vibes because of the news cycle about the outbreak. The health tech industry would have opportunity to help society to survive in this outbreak.

As my current job shifted to work from home, we have more time to learn many things at home. To improve my skills in UX design, I pushed my self to find new opportunity to challenge my self by doing this case study.

Hope this story could help anyone in learning UX design and be my progress for the future!

In order to guide me through this process, I used design thinking framework that consisted of Empathise, Define, Ideation, Prototype, and Test.

Stevens, E. (2019, December/January). What Is Design Thinking? A Comprehensive Beginner’s Guide.

Project Background

The Corona Virus shifts public mindset in facing the outbreaks that never happen in previous outbreaks. The informations presented by media provokes people to feel worried excessively. Media and health services should present informations that give knowledge and understanding about how we should face the outbreaks without panic and stay rational. Moreover, many people find them feeling anxious with the media information that does not make them stay positive to survive in this outbreak.

01. Empathize

Understanding the problem

My approach in understanding the problem was through empathizing with what user thinks and what user feels currently about this outbreak, as well as the news cycle that spreads around us by conducting user interviews. This consisted of asking qualitative questions by doing in-depth interview to users who actively follow the news cycle about the Corona Virus.

The main questions here are:

1. What do people think about the outbreaks?

2. How do they overcome this situation?

Behind the scenes of my research guideline.

02. Define

Defining the problem

Affinity Diagram

To analyze all the observations that gathered in the research, I use a method called affinity diagram. This process is about grouping each observations into one group and look into the user pattern from the insights. Then, break it down to the list of actionable items or I used to call it the design mandates.

  1. Curate informations that will not give user bad vibes impact;
  2. Collaborate with mental health expert to provide reducing stress level content;
  3. Provide informations about guiding people (step by step) to face the Corona Virus;
  4. Group Corona Virus articles or update into one section / one dedicated landing page to avoid giving much informations about the virus on homepage.

03. Ideation

Idea sketch / Napkin sketch

First, I tried to sketch the main idea of what I want to add in the product.

Understanding the concept model

I started to understand the things that online telemedicines in Indonesia do and tried to combine what I want to develop in online telemedicines existing concept model.

I chose Alodokter mobile website to be the part of my learning for this case study. The idea is to gather all informations about Corona in one particular page and add some contents which aims to educate and reduce stress level in facing this outbreak.

Get to know the concept of online telemedice — Alodokter

User journey

After breaking down the concept model, I tried to understand the journey when we want to find the health article section and thought where the intervention of my idea could possibly have.

Existing journey of Alodokter mobile website
My new idea in intervening existing journey
  • Homepage — main gate for people to find all about Corona Virus page.
  • Corona Virus page — a related topic that is gathered all things about Corona Virus to reduce many informations about the outbreak on homepage, that might make them feel bad about the situation.
  • Mental health simulation page — to provide the simulation on managing stress level for user.

Precedent study

Before developing the journey into wireframe, I learned from other websites that has similar concept as I proposed. I focused to learn about the journey of the website, type of contents, tone and voice they used, and the structure of the information.

From your left to right: Flo Health mobile website, Riliv mobile app

What I learn from Flo Health:

  • Provide article about Corona Virus from definition, types of the virus, the outbreak, e.t.c until things to remember and put the gate on the homepage to increase discoverability.
  • Persuade user to rationalized our mindset in this outbreak, it says something calming like ‘it is okay to be panic, but don’t let them control you’.

What I learn from Riliv App:

  • A leader in one stop services mental health app in Indonesia. Provide various kinds of mental health online meditation sessions.
  • Using calm tone and voice by offering solution about everyday stress / mental health problems.

Wireframe

By this process, I tried to combine my ideas written in the concept model and user journey with the precedent I have learned through creating wireframe. The challenge was sometimes I found few journeys that did not discover before and step backward to review again the previous processes.

From your left to right: The concept model and user journey, the wireframing process

04. Prototype

Low-fidelity

Because the goal of this case study was only concepting ideas, I decided to only creating prototype in a low-fidelity so I could focus on the process of finding the new feature that can help user survive in this outbreak without considering visual design and get the feedbacks in earlier stages.

  1. Gate to Corona Virus dedicated page — To tell user that this button is directing user to all about the Corona Virus article.
  2. Reorder the risk check Corona Virus feature— To make it as an option and not forcing them to do so like it was placed (on homepage).
  3. Gate to manage stress level feature — To give user context about what the new feature is and persuade user to start manage their stress level to reduce excessive feeling panic.
  4. Manage stress level page — To facilitate user in managing their stress level by doing online meditation from trusted institutions.

Kindly check this link to run the prototype (this was made using Figma)

https://bit.ly/ManagingStressFeature

05. Test

Usability test

Regarding this outbreak, I decided to do remote usability testing and use Maze to help me get the data of heatmaps and clicks. The challenge was when I could not catch them up face to face so I could not get the empathy directly that I expected. The participants consisted of Alodokter’s user and non-user, and medical personnel.

Task 1 — Read article about the Corona Virus

To explore how user find the article in the website.

All of the users succeed using this idea and understood the objective of this idea, but…

Some of the users feel this idea is not very useful besides the other user says it helps her discover on one specific topic.

Next iteration: explore other options for directing people to related topic page and review again the journey.

Task 2— Find a feature that can help you to survive in this outbreak

To find out how user thought about the idea and how they try to use it.

All of the users succeed found this feature through the related topic page or article detail page, but…

Some of the user found she need to do long journey to find this feature because it is hidden on the article page. Overall, all of the users satisfied with the experience of this idea.

Next iteration: provide this feature on homepage and track the performance on each pages.

Overall Feedbacks

I also asked the participants to give any suggestions if this feature were released.

  • Remind user about this feature by giving push notification.
  • Put this idea on the homepage to be more discovered.
  • Provide meditation guide options from female and male voice.
  • Have other option in mental health simulation by giving short article.

Reflection

Think more thoroughly and in bigger picture.

By doing this case study, I recognized that there still are many things to be improved from me so that I could give solution more effective. However, understanding user problems while conducting research revealed what user actually feel towards this situation and what approach we should make to solve this. And it was interesting understanding them and learn to focus on what people really needs.

Though, this challenge still need more steps to develop, but I satisfied by using the low-fidelity usability test because I could get the feedback earlier and back to rethink the foundational need before costed too much on other invalidate things.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thanks for reading! Kindly give me your clap 👏 and your thought or feedbacks on the comment below 💭 about this whole process or even discuss any other topics, would you?

--

--