Inès Yessad
UX/UI Designer

Overview

The National Wellness Institute is an organization providing health promotion and wellness professionals resources.

Challenge

The NWI want to find a way to add value to their members by creating a digital wellness tool. They requested a user research on their existing site as well as a new designed app.

Role

Role: UX/UI Designer, Product Designer

Timeline: 2 weeks

Platform:iOS Mobile, Android

Tool: Figma

Team: In pairs with Dido

Approach

Project plan

Design thinking methodology

Survey & User Interview

Affinity Mapping

User persona

Empathy map

Problem and hypothesis statements

Visual competitive analysis

Sketching & Wireframing

Usability Testing

Iterations

Prototyping

Results

The National Wellness Institute new app is a tool to help users identify and increase awareness on how to implement the right type of rest. 

REST is an app that takes the user on a journey of rest awareness by using colors to identify their mood. Color identification is a powerful tool to define the user's needs.


UX Research

Following an initial product research, we realized that despite the vast availability of health apps, people continue to struggle to maintain a healthy lifestyle. 

We also know that rest plays a major role in personal wellbeing. But do we know how to properly rest ?

According to physician Saundra Dalton-Smith MD, they are 7 types of rest that every person needs.

REST

Surveys

At the discovery phase of our project, we wanted to gather informations from potential users. We created a survey using a Lean Survey Canvas to get a better understanding of the problem.

Our primary goal was to understand how and when do people rest ?

We set up an online survey and asked them fill it out. We learned that the majority are not rested, not able to identify why and that they are not aware of different type of rest.

To organize data results generated from the survey we used an affinity diagram by sorting it into groups based on their relationships.

If we class them by priority, the highest would be to bring awareness of rest and teach how to recognized what type of rest the user needs.

How might we help users identify the type of rest needed and help them keep track of their continued restoration process?

User Persona

Based on the survey we set up one persona. We referred to her throughout the entire product development process.

While developing the persona, we worked on an empathy map to make sure we understood the user.

User Journey Map

We mapped out the user routine throughout her day to understand all emotions she encounter and where we could focus our attention to improve her performance and reach her most important goals with the product.

We gained further understanding on basic human needs, rest is often overlooked or ignored which causes aching body and emotional instability.

REST

Problem Statement

The National Wellness Institute was designed to achieve awareness and restoration of mental and physical health. We have observed that the current offers are not meeting a personalized experience to different types of rest, which is causing the lack of awareness and mental tools of a large user demographic to the NWI.

Hypothesis Statement

We believe that creating app that educates the user on different types of rest and gives them the tools for their personal needs. Which will achieve increased awareness on the importance of specific types of rest. We will know we are right with quantitative user feedback.

REST

Competitive Analysis & Market Positioning

Following a deep user research we did a business and market analysis.

The NWI is currently at the opposite of its competitor, it does not focus on all types of rest and does not have a tracking app.

We want to improve that by developing a product that focus on all types of rest with a tracking feature.

At this stage, we compared the visual of their potentials competitors. They have similar colours and flat illustrations. Something we need to keep in mind for our next step.

REST
Concept & Design

Crazy 8 Method

Following a deep research, we decided to use the Crazy 8 methods to share our ideas.

This brainstorming session helped us define the product's features and concept.

To improve the overall well-being three features were be implemented.

  • Short daily exercices to improve rest management

  • Tracking ability to identify seven types of rest

  • Tracking awareness with daily assessment and color identification.

REST

Color identification

The perception and meaning of color is dependant on context, culture and personal association. So, we decided to use this tool to assess our user mood.

REST

Design research

Based on concept and design research, the app is:

  • Balanced

  • Dark focused

  • Color conscious

  • Minimalistic

Low and Mid Fidelity Wireframes

Then we started the design process with low fidelity wireframes. This way we iterate through many design options quickly.
At the beginning of our design process we created mid-fidelity wireframes based on our user flow for testing purposes.

We design on Figma and tested the user flow on maze, in order to reveal possible usability problems.

The results were quite successful but some iteration needed to be done. 

We discussed and thought of a solution to remove the "continue" button, as it was one of our feedback.

UI Design

Branding

In the meantime, we work on the branding. Created a few mood boards with different feel and tone that could fit our app: playful, illustrations, modern… 

The app is about rest awareness so a modern feel is more appropriate to differentiate from the meditation or sleep tracking app. 

We created our final mood board, neutral colors with multi-colors as we chose to use colors as an assessment tool and to define different moods. From there we chose our brand colors also inspired from the wellness institute website.

Typography, we compared a few sans serif font with a rounded characteristic to have a relaxed and modern feel, Railway.

Our logo, REST, is inspired by the logo of the wellness institute and represent different intensity of our illustrated graphic.  

We gathered all UI elements, to create our app. With all these elements we did a style guide and a style tile. We started building our design system with buttons variants and inputs to optimise our workflow.

High fidelity prototype

Once we tested out all usability mistakes, we started designing the final screens in Figma. We worked on motion design to animate the colorful graphics.

Learnings

  • Efficiency is key: Equals splitting tasks when needed

  • Teamwork is important to achieve great results

  • Testing and iterations are necessary to create an usable product

  • Design is hard when the goal is to keep is minimalist

  • Difference between Android and IOS