UX/UI Design : Healthier
by Lauren Lim and Samuel Huang
Introduction
Inactivity has always been a major problem with the emergence of new technologies such as touch screens. Even with the existence of some solutions to address this problem, it becomes increasingly difficult for people to find solutions that work. The unexpected Covid-19 virus further aggravated this issue, forcing people to stay enclosed between four walls, and limiting human interactions. Healthier’s goal is to help motivated individuals solve their health problems for free.
Problem
The Covid-19 pandemic had a huge impact on society at a large scale. Most of our normal daily activities became prohibited due to the implementation of social distancing measures in order to fight the new virus. With everyone isolated in their own home, we had to find new ways of communicating with each other. Fortunately for us, we live in a time when there are plenty of tools that can allow us to see each other easily: devices such as tablets, computers, smartphones allow us to use communication applications like Facetime, Skype and Zoom. However, since many people are using these devices for communication, it also raises the average time a user spends in front of a screen. This can cause major health issues since it can lead to physical inactivity. Healthier is the solution we came up with that could benefit people in terms of managing their screen exposure as well as suggesting and implementing new healthy habits for any users that are committed to improve their lifestyle.
Solution
Our application allows our users to easily keep track of their healthy habits that they decide to implement. The user would be able to track their screen exposure time. In addition, there would be an automated screen color change depending on the time of the day and the lighting of the room, which limits the negative effects a prolonged exposure to screen can cause to the human eye. Furthermore, the users will also be able to create or follow predetermined diet and exercise plans. The users will then be able to see the results of these plans with the body measurements tracker feature. The users will also be able to track the amount of time they are sitting down, and the app will notify the users when it is time to take a break and have a small walk or get some fresh air. The app will contain multiple features that will be user friendly, easy to understand and navigate. There will also be a tutorial on how to use the app (the core features). Advanced users will then be able to dive deeper into the settings to tweak the features to their personal needs and likings.
Research
Existing App
There exists some tools and applications that can help people in order to maintain a healthy lifestyle. For example, the Apple health app provides many useful and interesting features that helps their users to achieve certain health goals. The app is simplistic which improves the user experience. In fact, the app has a white background that contains features in forms of list. Each feature brings the user to another page that contains information that is related to it. However, it is only available for Apple users. We want to provide a free app that would offer more features and better availability to Android users. This would allow us to reach more people, allowing them to have access to a good health app without having to buy an Apple product.
Survey and Data Collection
We distributed surveys to our users to better understand their goals, frustrations, and behaviors, since those are the elements directly related to our app’s design and features.
We can clearly claim after looking at the results that most users do not use a health app.
For the respondents who did or are currently using a health app, we determined that the UI, the richness of useful features, and the effectiveness are the top goals that Healthier must achieve.
For the respondents who never used a health app, we determined that the main reason is split between the lack of interest and just the fact that they never tried using one. Therefore, Healthier should offer an aspect that will be able to attract users and entice them to use our app.
We also wanted to know what exactly people are looking for in terms of features for a health app. We can conclude that diet and exercise and the most common ones because they both physically impact our health. The answers from our survey also suggests that users would like to have the options of both creating their own plan and follow an existing one provided by the app.
From the following results, we can clearly see that the users are exposed to their screens before going to sleep and almost half of them do not have their phone automatically adjust their brightness for them.
Personas
We also created personas based on the answers of our survey. We decided to create 3 types of personas that would represent some people of the general population.
The first persona is David Johnson Jr. He represents the average white collar workers in general that works at regular schedule from 9 to 5 every week day. His work is desk related, which means that he mostly sits for the majority of the day. These are the type of people that don’t really have much time for themselves except for the weekend.
The second persona is Diana Prince. She represents the teenager/young adults of our generation that focus a lot on their studies. She is interested in taking care of her health at a young age in order to implement a healthy lifestyle on the long term.
Our third persona is Michael Bubble. He represent the typical adult that works with a flexible schedule. He more time than the other 2 person, but also has trouble finding a good healthy life balance due to his work. Although he is active, his need is mostly focus with his diet.
User Journey
We then proceed to create a user journey where we assume different scenario about our users. The main purpose was to put ourselves in the shoes of our users. We could then try to tackle each situation as if we’re in their places. It makes it easier for us to understand.
User Flow Diagram
From functional stand point, we made a diagram to visualize how a certain user would navigate through our app. It is important to have this image in mind since we want to facilitate the utilization. This flow diagram present all the main features from the beginning to the end.
Application Design
Sketches/Drafts
We did a few draft of how our applications would look like. They are mostly ideas on how each feature would be separated. We think that it is important to have a menu bar at the bottom to facilitate the navigation between the different pages.
Here we have the features but with more details.
Wireframes
Here is the wireframe of our application. A few things changed from our sketches and rough drafts. We have the main features including the login and sign up pages. It is a simple UI that is separated into features. Everything should be UI friendly. We also included a top and bottom menu.
Color Selection
We decided to go with an all-blue theme for our application. We think that blue is a color that is beautiful and that fits well with our health app. We also made sure that we selected different shades of blue that is friendly to our eyes.
Typography
We selected the Gayathri font for our app. We felt like the words were easy to read and it compliments well our application. It has a simple design and we don’t think anyone would have trouble reading it.
Our App
Here we have the first page which is the login page. It is pretty straight forward. We also have our simple sign up page on the right
This is our home page where the user will be able to see the main dashboard and menu will all our features.
Over here we have the features that are accessible trough the main page dashboard (sit down timer, brightness/luminosity, Facts, food and exercise).
- The sit down timer allows the user to set a timer before being notify by the app that he needs to move/walk.
- The brightness will allow the user to change the luminosity of the screen. The app can also notify our user in case the level of brightness is not suitable for his environment.
- The food and exercise all have more sub-features
We also have a tip of the day page which suggest useful tips and fact to our users. The user can also enter his physical information in order to our predefined exercise plan to come up with something good for the specific user.
The food feature also provides a calorie tracker and diet plans for our users.
Our exercise feature also provides the user with predefined diet plans but also gives them the possibility of creating one of their own. They can also track their history of exercise session.
To finish, here are the features that are accessible from the top menu bar. It includes a heart rate tracker, step tracker, daily food plan, daily exercise plan and the settings.
Demo
Here’s the link to access our app demo.
Conclusion
We were satisfied with the creation of this app. It was challenging and fun to do because it allowed us to use our creativity while at the same time, solve an issue that is affecting a lot of people.
References
1- Icons were taken from FlatIcons