NWI contest : Stress management app

Designing the National Wellness Institute’s first Wellness app

Design Thinking process including : Secondary Research / Qualitative Interviews / Empathy map / JTBD / Primary persona / User Journey / Problem statement / HMW / Hypothesis statement / Feature analysis / Site map / User Flow / Low fidelity Ideation + Testing / Visual competitive analysis / Moodboard + Testing / Visual design ideation + Testing / Style tiles & Atomic design / Figma High fidelity Prototype / Prototype video.

Project Brief and Context

For this 2 week project sprint we worked in a team of 2. I worked with Kevin who's zen attitude made him the perfect partner for a wellness project.

Our Client, the National wellness Institute is an organization founded in 1977 with the mission of providing and promoting health and wellness.

Our mission, help them catch up with technology and develop their first digital tool for wellness. Our first task, defining the first wellness app to deploy, amongst all the health and wellness categories and back this choice up with research.

User eXperience Design

We found that stress is the underlying cause for many other health issues and that a stress management app would have the most impact and should thus be the first wellness app they should develop.

Capitalism, Big cities, Big data, mass and increasing sources of stimuli, knowledge and information, pushes us to extremes and demands of us to be more and more performant. In this context stress presents itself as a main character and as one of the biggest evils of this era. The Covid pandemic did not make things easier.

Secondary Research

Our secondary research backed up our assumptions and gave us some further insight to what causes stress, the signs of stress and its effect on the body, especially when stress becomes long-term or chronic.

secondary research also gave us some quantitative insight on the amplitude and the effect of stress. I refined this information into a visual to get a clear understanding of the numbers presented to us.

Qualitative Interviews

We continued our research by collecting qualitative data from interviews that we conducted on 5 people that have a history of big issues with stress, in order to further empathize and discover what the underlying Job to be Done is (JBTD).

We found that the main job that needs to be done is to help stressed people create hacks in their daily life because stress disrupts the cognitive state and does not permit us to think clearly and take decisions to do what is best for us. And that we need to micro manage behavior as stress makes us feel that we don’t have the time to take care of ourselves.

This resonates with the challenge that the National wellness institute stated and that reads as followed :

Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.

Primary Persona

We put this information into perspective by creating our persona that guided us through this challenge and kept us focused on the task at hand.

User Journey

Although Martine has a lot of moments in the day where stress management could give her some relief, she feels like sleep is the biggest issue as it sets up for fatigue and stress during the day. She has a tendency to wake up around 2–3 am in the morning and has a hard time going back to sleep.

Problem Statement

All of this knowledge on stress lead us to define the Problem statement and 3 How might we (HMV), followed by the Hypothesis statement.

Hypothesis Statement

• We believe that by tailoring content to her needs she will spend less time deciding what to do.
• Notifications will remind her at the appropriate time by micromanaging and proposing short sessions
• The aim is to encourage action to manage stress, by adopting a routine.

Feature analysis

The Market research and Feature analysis previously conducted in this study, on similar apps, gave us the top features present in all of them and helped us prioritize what we should include in our first iteration of the Nation Wellness Institute Stress management app.

Site map

It consists of Meditation, Breathing exercises, Sound and last but not least the proposed Daily sessions tailored to the needs of the user.

User flow

The User flow happy path consist of an on-boarding that leads Martine to her prepared daily sessions to be able to sleep better and ends with the daily check-up on how she slept and how she feels.

User Interface Design

After having created the user flow we proceeded to dive into the UI part of the challenge. We started by Ideating on concept sketches that we used as Low Fidelity Wireframes and tested them on 5 users. We mainly found that we had to strip down the decisions making even more in the on-boarding section.

Visual competitive analysis

Now that we had the structure and skeleton of our app it was time to give it some skin by working on the colors, the iconography and the typeface. To do this we first conducted a Visual competitive analysis.

In this analysis we can see that we have Flat design on the one hand and realistic nature representations on the other. All of the examples have rounded soft shapes.

Inspired by the Qualitative interviews, we previously defined that we needed to introduce elements of nature into our interface. This can be interpreted in a literal way (like Calm and it’s use of realistic photos of nature and landscapes) and in an abstract way by using soft organic shapes in contrast to the orthogonal hard-cut shapes of an urban environment.

Moodboard

We opted to explore the graphical aspect of nature instead of the photographic aspect. So we defined the key attributes we wanted to achieve with the graphical design and proceeded by composing a moodboard. We then tested the moodboard and where able to validate the graphical direction and the key attributes: Serene / Pure / Natural / Organic / Positive / Soft.

Visual design ideation

Our visual design work was guided by soft shapes, creating depth with gradients and illustrating minimal landscapes and botanics.

We chose blue as the primary color like the ocean and the sky; as it often symbolizes serenity, stability, inspiration, wisdom or health. It is also the NWI’s current primary color.

The choice of the font family or typeface: Gotham Rounded, with it’s rounded edges was also selected with these guidelines in mind and for it’s legibility.

Final background visuals

After quite some tests and iterations we arrived at the following result for the background visuals.

Style tiles & Atomic design — Native iOS

Once our style tiles and library of components was created we where able to compose our final screens. We ended the process with Desirability testing on 3 people and we were very happy with the returns as the proposition clearly inspired the attributes we set out to achieve.

Figma High fidelity Prototype

All this work lead us to the final High Fidelity Prototype created with Figma, where I took particular pleasure in smart animating the lotus flower for the breathing exercises : )

Prototype video

Next Steps

Designing a name for the app and adding a vibrating signal for breathing in, holding and breathing out, so that one does not have to look at the screen while doing the breathing exercises.

Thank you for taking the time to check out my work!