People are spending more time on their phones, especially during the COVID-19 pandemic that has forced us to stay home. This increase in time that we spend on our phones and computers can have numerous negative effects on our mental and physical health. Some of these effects include anxiety, sleep issues, weight gain. At the same time however, our smartphones offer the only way of communicating with friends and family due to the COVID-19 pandemic that has forced strict protocols like lockdowns that prevent us from visiting others.
The company OptiScreen Inc. has hired our design company to develop a super app to support users’ wellbeing by not simply encouraging healthy screen habits, but also a healthy lifestyle. In order to accomplish this goal, we want to build an app that is an ecosystem with many different features to help instill healthy lifestyle habits within our users.
The manner in which we wish to build this super app is to find the fine line between balancing healthy habits like improving fitness and increasing productivity, but also keeping users engaged throughout the process through gamifications and interacting with others within the app. We believe that we can achieve our goal for our users by blending in a seamless super app experience with useful app features, appealing UI elements and a balanced mix of colors.
The harmful effects of prolonged screen time varies by age group. The table below shows the what long screen time do to an adult, teen and children’s health:
The following applications are available on the market today. They aim to provide solutions with regards to reducing screen time and increasing productivity and health:
Todoist is a popular productivity app that aims to keep users productive by allowing them to use their time effectively to complete different tasks. The app is essentially an organized to-do list with reminders to allow users to either complete daily tasks or to plan their schedule so they can keep track of tasks to complete ahead of time. When tasks are created, users can set notifications that will alert them at the specific date and time that they choose. If a bunch of different tasks are part of one big project, then users can also create color coded folders of different projects with the different tasks to see their progress at a glance. One key feature of this app is that it can be synced with several other apps like Gmail and Google Calendar so that they can keep track of their schedule across different apps.
Today, smartphones have built-in digital wellbeing features to allow users to see their screen time from different apps and set time limits for each app. The problem is that many users will simply ignore these time restrictions that they set out for themselves because they will get stuck in the loop-hole of scrolling through social media. Forest is an app that gamifies the process of limiting screen time by creating virtual trees when users stay off their phones. The longer users don’t touch their phones, the taller the trees grow in their digital forest. Users can pick various types of trees to plant and they can even challenge friends to grow together.
FitOn is a fitness app that allows users to create unique fitness plans that they can follow on a weekly basis. There are a wide range of workouts and users can identify specific workouts based on targeted muscles they would like to strengthen. A wide variety of healthy meal recipes are also offered so users can not only eat healthy, but diversify their palette and refrain from eating the same meals each day.
One bad habit that many people have, is going on their phones late at night before bed. This habit can lead to less sleep time and can reduce energy that is needed for the day. Sleep Cycle is an app that tracks our sleep times based on phone usage and will provide feedback based on the quality of sleep. Sleep Cycle also provides specific stories and sounds that users can listen to in order to help them get to sleep, as opposed to them constantly scrolling through social media at night and not getting enough sleep.
To get a more clear understanding of the habits and needs of users with regards to screen time and health, we surveyed 26 different users by asking various different questions about their lifestyles. When asked about which elements of their lifestyle they wish to improve, the two most common answers were fitness (80.8%) and productivity (65.4%) so we knew that our super app had to focus on those two aspects, especially fitness. We also noticed that almost a third of our survey participants (30.8%) are not having enough sleep as they are averaging less than 6 hours of sleep per day. From these results, we knew we needed to focus on these aspects in our super app to help build healthy lifestyles for our users.
User Personas & Requirements
By analyzing our survey, we were able to make user personas of potential users of our app based on the survey responses. Each persona has background information, their motivations and goals in terms of using a health related app and their pain points in regards to the current situation of how they handle their health.
Our first persona is someone who doesn’t need to manage his sleep and has a great physical health. His goal is to be more productive in school.
Our second persona is someone who is able to be productive in his day, and also has a decent amount of sleep. He only wishes he could work out more.
Our third persona is someone who doesn’t wants to work out, but be able to have a better sleep management. His lack of sleep is what’s affecting his productivity.
The user journey map is exploring the mindset of all our personas trying to achieve their own goals to give us the opportunity to understand the concerns and roadblocks of our potential users.
The first thing we want users to see after logging in, is a simple home screen that outlines the four key features of our super app; fitness, productivity, zen mode and sleep tracking. Once a user clicks on one of these sections, we still wanted users to be able to quickly switch to another section without having to go back to the home screen since that would create an unnecessary loading screen. We decided that a side panel (hamburger menu) would be the best way to do so, as users can simply slide the panel inwards when they want to switch to a new section and slide it outwards to close it. Then for each of the four app sections, each would have different subsections and to accomplish this, we chose a bottom menu that would display different tabs for each of the four app features.
Sketches & Wireframe
Preliminary sketches were drawn by hand to get an initial understanding of what features to include and how we were going to design them in implementation. Then the sketches were slightly modified and transformed into the wireframe for a more detailed outline on how the final design would end up looking.
Since we are creating a super app with 4 main components that each have different subsections, we wanted to balance the numerous app features with a clean and minimalistic design. As a result, we took inspiration from materialistic design for our UI elements to make our app simple to read and interact for users.
Name and Logo
When doing the sketches and wireframe,we came up with DigiHealth as our preliminary app name but did not decide on a logo yet. However, we felt that this name was too generic and did not stand out from other apps. We then looked at what features were most unique in our app and we felt that the gamification within the zen mode would entice users to use our app and subsequently use the other features within our app. When reflecting on the word “zen”, we immediately thought about gurus. A guru is essentially a teacher, and our app intends to pass healthy lifestyle habits onto our users. We found this to be quite fitting. Then we simply merged “zen” and “guru” together to get “ZenGuru” to see if it was a catchy and unique name and we think it is!
Once the name was set, we had to create an appropriate logo. Since gurus meditate often, we decided to create a logo of a silhouette meditating with a green leaf in the background with “ZenGuru” being in front of the figure in big bolded letters.
When deciding on which colors to use for our app, we thought of which color would best represent each of the 4 main super app features. Red represents energy and action which are also characteristics of fitness. Productivity involves planning with lists and sticky notes that can be shades of orange. Green represents stability and positivity which are associated with zen. Lastly, blue represents calmness which is tied with sleep.
Once we decided the colors, we had to choose which shade of color to use and how to implement them within our app. We did not want the colors to be too dark because we felt that that would not act as a visual stimulus for our users. We also did not want the colors to be too bright because we don’t want to cause eye strain or an unpleasant experience. Considering this, we decided to implement gradients rather than a single solid color and the best way to achieve an appealing gradient is to start with a color that is not too bright and not too dark and transition to a lighter tone. Below is a colour palette displaying the chosen colours.
Inter is a free font family designed for computer screens. We chose this font for its simplicity and readability, which meshes well with our minimalistic design.
Once the app launches for the first time the user is greeted with the login screen. This screen displays our logo and name. It is very minimalistic and self explanatory. From here the user can create an account and login. Once logged in the user sees the home page. The home page provides access to the four major parts of ZenGuru.
The productivity section of ZenGuru focuses on scheduling. Users can navigate to the Tasks page using the navigation bar at the bottom. Once at the tasks page users can add daily tasks and check them off once completed. In addition to tasks, users can navigate to the Calendar tab where they can add calendar events. As all our components do, the productivity section boasts a minimalist design that is colour coordinated and easy on the eyes.
This section of our superapp focuses on sleep. The user can enter a wake-up time and press ‘Start Alarm’. Not only will this set an alarm for the desired time, but their sleep data will be collected and analyzed to shine light on their own sleep habits. These analytics are shown in easy-to-understand charts that are color coordinated to match the colour scheme of the sleep management section.
This is the identifying feature of our app. Zen mode takes great inspiration from Forest to gamify screen down time. The user can simply enter a growth duration and press ‘Grow’. This will lock the user’s phone for the entered time and they will earn points growing a virtual garden. They can then compete against their friends on the leaderboard. Lastly, The user can view their ‘Zen Analytics’ which essentially shows them where most of their screen time goes on a weekly basis.
This is the largest component of ZenGuru in terms of pages. The design is very self explanatory. Users can navigate using the navigation bar at the bottom. The fitness section provides fitness management, nutrition management and collaboration amongst friends with regards to health. In terms of design, this section is almost no different than the others, as it is minimalistic and color coordinated.