Hero Image

Project 5: Wellness App | Corporate

Case study about the UX/UI design process for creating a Corporate Wellness Tracking app

Adriana Fischer
9 min readMar 29, 2021

The time for the 5th project has started! My colleague and I were super excited to start this great challenge together. For this project we were divided in teams of two and we had to execute a full UX/UI design process and create a Wellness app in a two weeks Sprint. Lucky us, we were able to choose any area we wanted related to wellness. This was the moment when we have realized how broad wellness is.

Project Brief

Collaborate with the National Wellness Institute (the client) to create an app that promotes employee wellbeing. The design should focus on one aspect of wellness that the designers consider (backed up by research).

Project deliverables:

· Native IOS App

· Native Android App

On our first day of the project we have discussed about the ideas that each of us had, related to the Wellness app project and we have decided together on one idea with which we wanted to go further and continue our project, which is a Corporate Fitness app, that help employees to exercise more during working hours and customize their exercises, so that they stay healthy. After, we have prepared the roadmap that we were going to follow during the next two weeks sprint.

The project follows the Design Thinking Method and all the steps are going to be detailed during the article.

1. Empathize

Business Analysis

1.1. Lean Survey Canvas

Surveys are one of the main methods that help collect data, therefore we have started to the Lean Survey Canvas, which helped us to create a short survey in a collaborative way, in order to obtain all the needed information. This methodology uses questions, is focused on describing targeted users and identifies insights that are needed for validating our hypothesis:

· What do we need to learn?

· What information do we know already?

· Who do we need to learn from?

· How do we reach these people?

Lean Survey Canvas

1.2. Competitive Analysis - features

Creating the Competitive Analysis took quite some time for us, which we have actually expected. During our research, we have realized that there are a lot of Fitness apps on the market, that we were not aware of until now. Nevertheless, we have tried to find apps that are used by the companies for their employees.

Findings:

There are a lot of apps that offer wellness content (from fitness to mental health) to employees. However, there is only one app that blocks out that time dedicated to self care in calendar and that one focuses on small breaks.

Our unique value proposition can be that we can give employees to create their own profiles, set their settings as they like. This means, that they can join teams with colleagues, select dedicated time frames to exercise, select their workout, workout alone or in teams and let their colleagues know about it through calendar sync or importing that data. The app also allows users to track progress and whether they prefer to share their progress with their teams or not.

Competitive Analysis: Corporate Wellness Apps

1.3. Visual Analysis

As we wanted to have a visual imagine about our competitors as well, we have made the visual analysis of the competitors and also of the National Wellness Institute. This helped us evaluate the colors, fonts, typography, logos, assess both aesthetic impressions and behavioral effects, buttons states (while being active, inactive, hovering).

Competitive Visual Analysis

User Research

1.4. Qualitative Research

Even though we knew that we don’t have too much time, we still wanted to make some interviews, in order to get better and more qualitative insights from our users. Therefore, we have focused on creating 14 Interview questions, having in mind the type of app we wanted to create and the information that we have already gathered regarding the apps of our competitors. After three interviews that were made online, via Zoom or face to face, we have analyzed the interviews answers and we have noticed that there are some important findings.

Findings:

· The users would like to be able to customize the exercising type and time;

· Ideal Scenario: employer initiative to encourage exercise during workdays;

· Everybody wants to incorporate more exercise into their work days;

· Employees feel better physically and mentally after exercising.

1.5. Quantitative Research

A Lean Survey Canvas helped us to create 10 questions for our Survey, we have gathered all the questions and used Google Forms, in order to make the survey public and be able to share. We wanted to get as many responses as possible, but unfortunately due to time constraints we had just 8 answers. Having this data, we have analyzed it and we have noticed that there are some patterns.

Findings:

· Since Home Office: 50 % exercise less;

· Why? 75 % no longer convenient to exercise;

· Physical exercise is a necessity & needs to be efficient: 62.5 %;

· Employer supports employees fitness goals: 100 % Yes;

· Employer tracks employees progress: 75 % No;

· Exercising motivations: 62.5 % Health

A part of the Survey Results

1.6. Affinity Diagram

We had already quite much information from our research and we wanted to organize and sort all the findings.

Affinity Diagram

Findings:

· More workouts within weekdays

· Different preference in time, type of exercise, goals

· Worry about fitting into busy calendar and organizing with employer

2. Define

2.1. User Persona

Based on our research we have created Cristina Agulera, our user persona, which represents the user type that might use our product. Creating Cristina, helped us understand better users’ needs, behaviors', experiences and goals.

Cristina, our Persona

2.2. User Journey

We wanted to see the journey that Cristina is having, in order to reach her goal. Therefore, representing a working day from her life while working from home, helped us see the experiences that she may have and all the touchpoints.

Cristina’s Journey

2.3. HMW Statement

Until we have decided on the final HMW Statement, we have rephrased more existing challenges discovered during research as a HMW question.

How Might We boost employees’ health by enabling them to exercise more often during home office.

2.4. Problem & Hypothesis Statement

Formulating the Problem Statement, helped us also decide on how we wanted to try to solve it and therefore we have defined the Hypothesis Statement.

Problem Statement

Our App is designed to increase employee’s health during home office by incorporating exercising into work days. We have observed that during home office people exercise less, which has a negative impact on the health of staff and on business due to loss of productivity and more absences.

Hypothesis Statement

We believe creating an app where employees can book and save exercise sessions in their business calendar will increase employee’s overall health. We’ll know we are right with increased productivity, morale and decrease in taking sick leaves and turnover rate.

2.5. MVP

In order to validate the value proposition, we have defined the simplest version of our product:

· Setting up a profile

· Profile page & settings / customizations

· Booking exercising time

· Sharing / saving /sync the exercising time as meetings in the business calendar

2.6. User Flows (IA)

The User has two flows that might follow, both of them are based on the Happy path.

· User Flow 1: Setting up the profile and booking an exercise;

· User Flow 2: Doing an exercise (that is already booked in the calendar) and after checks his progress.

User Flows

2.7. Design System

Creating a design system may take some time at the beginning, but we have realized that it is extremely important! This made our life so much easier while creating the prototypes, as all the components and guidelines were reusable.

The Design System

2.8. Brand Attributes & Moodboard

As we were creating our app for Corporate users, we have focused on three main brand attributes:

· Professional

· Energetic

· Optimistic

As we wanted also to set out a great feel and look of our new UI design and organize some inspirations, we have created a visual representation of a design concept — our Moodboard.

Our Brand Attributes

2.9. Style Tile & Logo

Style Tile

All the visual details of an app like fonts, colors, buttons, effects, typography, alignments and images are increasingly expected to not just create a usable experience, but also to communicate to the users the brands’ spirit, such as friendliness, reliability, innovation, corporate etc.

Our Style Tile establishes a direct connection with the actual interface elements, but without defining a layout yet.

· Chosen the design style and color

· Evaluated all the logos that we have created

· Integrated our logo design into the brand

Style Tile

Logo

As we were creating our own new brand, we wanted to create as well a logo for our new app. Creating the logo was very important for us, as we knew that it will have a major impact on how the users will perceive our brand.

We wanted that our logo will be outstanding and in the same time professional, energetic and optimistic.

Before to jump to the Logo design, we have used the information gathered during the previous steps, discussed about them and focused on the following:

· Defined our brand identity

· Looked for inspiration

· Checked the competition

· Chosen the design style

· Payed attention to the colors

· Evaluated the logo options and tried to find the right type

· Integrated the logo into our design

3. Ideate

During Ideating we have decided to use the Crazy 8 method, therefore we have sketched quickly some ideas that each of us had and after that we have discussed about each sketch, voted on the ones that we want to implement further into our project. It was funny to see, that some sketches had similar ideas, so it was even easier to decide on them.

Ideations

4. Prototype

4.1. Mid-Fi & Testing

Mid-Fi Prototype

As soon as we had our sketches and more ideas of how we want our prototype to look like, we have started to design the Mid-Fi Prototype. We have created the prototype for both user flows and tested them in Maze.

The testing results helped us see how people find the flows and where they have faced any problem.

We have noticed that there were users that in the second flow didn’t know that they had to close the video after completing the exercise. That’s why the average success was 60% in the second flow, so we have tried to make it more clear in the Hi-Fi.

Testing results: First Flow - 100% avg. success rate, Second Flow — 60 %

4.2. Hi-Fidelity Prototype

Our process was getting close to an end, so we gave our best to create the Hi-Fi Prototype for both flows. We have checked the testing results and tried to create a better experience for the users, improving the second flow. As we have noticed due to testing, that for the users was unclear to close the video exercise after completing it, we have eliminated the closing video step and as soon as the user finishes to exercise, the Congratulations Pop-up Message appears, where the user can see the exercising time and burned calories. The user can choose if he want to just close the Pop-up or to see his detailed progress.

Flow 1: Create an account, choose an exercise and book it in calendar
Flow 2: Start a workout that has been booked in calendar in the 1st flow

Outcomes & Learnings

· Research is very important, so do it as good as possible

· Working on projects helps us improve our skills

· Team work, good communication and listening to each others’ opinion is very important

· A good Design System is the key for a good Hi-Fi

· Learn from each other

Thank You for reading 😊

--

--