savasana: A better life in one place
Laetitia Segaux (40100271)
Alexander Shevchenko (40096664)
Understanding the Problem
More and more, devices with screens play a very important part in our lives. The Covid-19 pandemic and the associated social distancing guidelines has caused screen times to increase dramatically as we now rely on our devices for most activities including work or school, entertainment and social interactions.Unfortunately, spending excessive amounts of time using a screen can have serious impacts on mental and physical health. Indeed, research has shown that bad screen time habits can lead to anxiety, depression, shortened attention-span, trouble sleeping, weight gain, poor posture, etc.
Solution
While we cannot eliminate screen time from our daily routines, it is possible to use our devices in a way that mitigates the risks listed above and that even encourages a healthy lifestyle. Indeed, devices can be detrimental to our health, but they can also be used in a way that allows us to live more fulfilled lives. The goal of the application we are building is to support users’ wellbeing. This app will aim to encourage users to reduce screen time, to exercise regularly, to eat nutritiously, to meditate to reduce anxiety and to have good sleeping habits. This should help them have a better relationship with their devices and allow them to live an overall healthier and happier life.
Market Research: Competition
Headspace (https://www.headspace.com/)
Pros
- A wide range of guided meditation videos.
- Sleepcasts
- Workout videos
- Focus music
- Nice design
Cons
- No way to track your progress like weight
- No screen time feature
- No weekly reports
- Can’t track your nutrition
- Paid
What we do different
- The user can define goals they want to achieve
- The user can actually track their progress toward their goals
- See reports on screen usage, fitness activity, nutrition, meditation and sleep
Results Wellness Lifestyle App
Pros
- A lot of different programs like gut health, mental wellness and healthy cooking.
- Social media to share your goals and how you’re doing
- Sleep stories
- Guided Meditation
- Courses on reducing stress
- Calories calculator
- Friend list
Cons
- No screen time feature
- No weekly reports
- Paid
- UX is not very good
- Targeted mostly to women
What we do different
- Weekly reports
- Better UX
- Targeted to everyone
HabitMinder (https://habitminder.com/)
Pros
- Can set very specific goals
- Connects to Apple Health
- Has an Apple Watch App
- Very nice UX/design
- Get review/overview of the week, month, year
- Customizable
Cons
- Very limited functionality on the free version
- No videos or lessons
- Is only for recording numbers, but doesn’t inform
What we do different
- We have informational videos for fitness and other categories
- Nutritional facts are searchable for food
- Tips for how to improve when a goal isn’t reached
User Research
In order to gain a better understanding of the situation, we created a Google Form Survey to collect information regarding people’s habits and their opinions about what an app that encourages a healthier lifestyle should include. The survey also included questions regarding the impact that the pandemic had on their lifestyle habits and on their overall wellbeing. Then, we conducted more in-depth interviews with some of the survey-takers in order to get a better idea of they would like to see from the app.
The following graphs show the results of the survey.
Personas and Journey Maps
Based on the user research we completed, we’ve come up with three personas that represent the people that were surveyed and that would use our application. Along with the personas, we created journey maps to visualize the process that our personas users would go through while using the application.
Sketches
These sketches were created early on in the process of completing the project. The goal of these was to get a rough idea of what the design of the application would look like. Making these sketches allowed us to get a first idea as well as to communicate between team members to explain how we envisioned the app to look. Many of the design choices present in these sketches can be found in the final mockups created.
Wireframes and User Flow
The wireframes represent the skeleton of the application. Following the sketches, the wireframes were the next step in designing the application and concretizing some of the choices we made regarding the structure and the different views that would make up the app. After creating the wireframes, we decided to use them to create a user flow that would illustrate the flow of interactions of the user with the app. As the user decides on the features they want to use, the user flow is adaptable to each.
Design
Colors
We chose to use a neutral colour scheme for this app. The three main colours are pale grey, beige and dark brown. The colours chosen are soft and neutral and provide the users with a sense of calm, which is particularly important while using the sleep and meditation features. We opted for a very pale grey background to give the app a clean, modern feel.
Typography
For typography, we opted for simple sans-serif fonts. We opted for sans-serif because they are considered more modern and clean because of the lack of stylistic edge which is the feeling we wanted to give to our app. The fonts used were Proxima Nova as the main font of the app while the Inter font was used for text boxes and labels.
Mockups
The pages below show the sign-up page, the home page and the profile page. From the sign-up, you are redirected to the home page. You pass through the homepage to access all the other features by clicking on the icons. The profile page asks for basic information about the user and uses this info to determine the caloric goal of this user for the nutrition/fitness features.
Below are the mockups for the screen time feature.The user inputs their goals regarding screen time and then records their actual screen times daily. Although the mockups don’t show it, the app should also send notifications to the user when the time limit for any of these categories is approaching. Then, there is a page with statistics that show the screen time distribution between the three categories as well as a chart illustrating the target vs actual screen time and most used applications.
The app offers a variety of fitness courses in different categories. The statistics page shows the weekly distribution of workouts as well as information specific to a selected workout on the chart.
The user inputs its meals and snacks into the app. The app is then responsible for calculating calories and macros. The calendar illustrates whether the caloric goals for the day are reached (numbers displayed in green) or failed (numbers displayed in red). The daily caloric goal is calculated by the application in the profile page seen above. Using the calendar, you can access the nutrition data from past days.
The Sleep feature asks the user to select the goals for bedtime and wake-up time and then the user presses a button when it is bedtime/wake-up time. Sleep statistics are displayed on another page.
The app offers meditation courses in different categories. Then, the user can select the duration of the meditation and press play to start it. Minutes meditated are displayed on the statistics page.
The Reports page shows the weekly summaries of all of the lifestyle habits tracked. By clicking on the pie charts, you can get an area chart displaying your weekly summary for that habit compared to your average recorded since the beginning of your use of the app.
Prototype
To make the prototype full screen, click on the arrows in the upper-right corner.
Final Thoughts
This project made us realize the many intricacies that go into designing an application and all the thinking that must be done before starting anything code related. From now on when we start a new project, we will approach it by considering the user interaction as a factor of utmost importance. We also got to experiment and get valuable experience with Figma and Medium. All in all this was a very fun and informative project.
