UX/UI Design of a Healthy Screen Habits Super App

Simon Lim
10 min readFeb 19, 2021

Health R’s Us, by Simon Lim and Manraj Rai

Banner

Introduction

Smart devices like computers, phones and television have become an integral part of our daily lives. Especially during the Covid-19 pandemic, the electronic devices have become a means of communication, entertainment, for work and much more. In fact, according to Statista 2021, they observed an increased screen usage time of over 4h in 44% of the population compared to 21% prior to Covid-19.

Statistic on Screen Time Usage during Covid-19
Figure 1: Statistic on screen time prior and since COVID-19 [1]

Problem

While these devices provide numerous benefits, an excessive screen time usage can cause significant impact on one’s health. Mental health is affected by screen usage. In fact, it can lead to anxiety, psychological distress and poor sleep quality. With social media being a common reason for the increased screen time, individuals often compared themselves to others such as influencers or their friends which could lower their self-esteem and create anxiety. Also, Studies have found that an increase in screen time affects the developmental delays in language acquisition and communication skills in young children who spend 2–3 hours per day in front of screens [2].

Next, technology can impact one’s physical health such as poor posture, weight gain, risk of heart disease and eye problems. In fact, spending an excessive amount of time in front of a screen can cause a poor posture which consequently causes neck stiffness and back problems. Moreover, it also implies a period of physical inactivity which can lead to weight gain and heart disease. Finally, the screen emits blue light that can cause eye soreness, and not blinking enough, while looking at a screen, can cause dehydration.

Solution

Our solution to this problem is to create a mobile application that moderates the time spent on smart devices but also to encourage users to stay active mentally and physically. This application will provide a uniformed ecosystem with all health related perks in one single software. It will allow users to take back their health in their hands. It will provide means of tracking one’s physical health such as calories, activities, body measurements, hearing and menstrual cycle tracking. Furthermore, a mindfulness and sleep tracking feature will help an individual’s mental health. At last, it will help track and reduce screen time usage, and reduce eye strain which will lead to overall health benefits by implementing a native grayscale tone on the screen and some personalize data visualization on their screen habits.

Research and Analysis

From the results of the survey, we notice that 14 people out of 23 (61%) are very likely or likely to consider using a health tracking application. While 39% are less likely or unlikely to use it.

Figure 2: Response to using a health tracking application

The majority of the respondent 60.9% said that they are likely to consider the health recommendation from an application. On the other hand, on 20% of the participant aren’t likely or very unlikely to follow the health recommendation.

Figure 3: Response to consider health recommendation from an application
Figure 4: Response to the importance of physical health
Figure 5: Response to the important of mental health

To sum up, we noticed that there is a market for this application as more than 60% of the participant are likely to use it and follow the recommendation. In addition, more than 90% of the respondent consider physical and mental health an important factor in their life. Thus, a health app can be beneficial to the users.

Figure 6: Response to taking following the advise of the application to take a break from your screen

It seems that a lot of respondents showed disinterest in following the recommendation of taking a break from the screen. This indicates that a feature such as regular notifications from your phone to take a break is less effective. As a result, we opted to apply a grayscale filter to a phone screen automatically during a set period.

The tonal change reduces eye strain, and it makes some app less enticing to use for a long period. In fact, some app use color psychology to make a user click on it or use it more often. Consequently, the grayscale will reduce the amount spent on a device [3].

Personas

Based on the survey and anecdotical experience. We created three personas to represent the type of users that would use the health super app.

The first persona, Josh Robertson, represent the healthy one, an individual that already has a healthy lifestyle and wants to maintain it. He is also a personal trainer that tries to motivate other individual to adopt some good health habits. However, with the lockdown restriction, he isn’t able to fully help his clients. Thus, he is looking for alternate ways to help his clients.

Figure 7: Josh Robertson

The second persona is Linda Huang. A young woman who is career driven and hard working. She represents the typical 9 to 5 workers that makes a comfortable living. However, this routine work has reduced the amount of time she has for a healthy lifestyle as she is mainly thinking about work. Thus, she is looking for a way to better her well-being without compromising her job.

Figure 8: Linda Huang

Finally, our third persona is Etienne Roy, a middle age man that represents the unhealthy one. He realized that he wasn’t as healthy as he once was. In addition, he works long hours as a retail worker to provide the necessity for his family. Consequently, he is often very exhausted after work and does not find time or energy to adopt a healthy lifestyle. Therefore, he is looking for a way to include simple healthy habits into his daily life.

Figure 9: Etienne Roy

User Goals

Identifying some personas allowed us to determine the primary goal of our application. In fact, our personas revealed that not everyone has time to commit to healthy habits. Therefore, the main goal of our application is to provide a convenient way for users to adopt a healthy lifestyle. In addition, mental health is an important factor for one’s well being. Thus, another objective is to provide features to improve the mental health of the users. Finally, with the pandemic, screen time usage has increased significantly. As a consequence, the importance of having some features that reduce screen time and eye strain is important.

User Journey

The following user journey is an example of the thought process that an individual can have while using the application to benefit his health.

Figure 10: User Journey for Reducing Screen Usage by Setting Objectives

Story Board

Figure 11: Story Board for Mindfulness

The Design Process

User Flow Diagram

The following user flow diagram illustrates the interactions and the steps involve for one of the primary goals of the application. Indeed, the main goal is to provide a convenient way for users to adopt a healthy lifestyle. Therefore, one of the features the application provide is to allow an individual to easily log their calories.

Figure 12: User Flow Diagram for Tracking Calories

Inspiration Board

To create the UI prototype for the application, we decided to create an inspiration board to help us visualize some design style for the health application.

We opted for a flat and material design for the UI. We think that it is a simple and intuitive design.

In addition, we considered a color palette with a green and dark design with a touch of white. We think that it provides a good color contrast that is soothing to the eye. Furthermore, we think green is an encouraging color for the users.

As for the typography, we wanted to use, Open Sans, which is a familiar font that we find simple and easy to read.

Sketches

The following images are sketch mock ups of the UI prototypes.

Wireframe

The following images are the wireframe diagrams based on the sketches above.

UI Prototype

The user is greeted with a welcome page where they can either sign up or login. We wanted to keep these two pages simple and straight forward such that the user can easily access the main application. We implemented the color scheme discussed in the inspiration board to enhance the visual without tiring the eye.

Next, the following 3 images showcase one of the main features that offer a convenient way for users to track their health. For example, they can track their calories intake. In fact, from the home menu, they have a basic summary of their daily calories. When the user clicks on “Nutrition”, they have a more detailed view and they can add new food.

To add a new food, they can use the search bar. The results will have a preview of the calories contained in the food. In addition, they can get more information by clicking on the item.

Health R’s Us also offers a summary of the user‘s daily and weekly screen time usage. Furthermore, it showcases a breakdown on the most used app such that the user can be conscient of what they use. In addition, it also offers an advance eye care feature where it turns the screen color into grayscale.

Finally, when the user selects the mindfulness feature, they are welcome with a meditation session.

Demo

Reference

[1] Johnson, J. (2021, January 27). U.S. children & Teens daily screen time Covid-19 2020. Retrieved February 18, 2021, from https://www.statista.com/statistics/1189204/us-teens-children-screen-time-daily-coronavirus-before-during/

[2] Screen time affects on mental health. (2020, December 22). Retrieved February 18, 2021, from https://discoverymood.com/blog/how-does-screen-time-affect-mental-health/

[3] Combiths, S. (2019, June 14). Your smartest friends are using their phone’s black-and-white setting, here’s why. Retrieved February 18, 2021, from https://www.apartmenttherapy.com/grayscale-iphone-266894

--

--