Introduction
The Covid19 pandemic has become a landmark event in our generation’s timeline because it has transformed the way in which we interact within society and with ourselves. Quarantining is beneficial for the health of our communities, but for the individuals, many feel lost without the routine of going out to school, work, the gym and to socialize. Without the structure that going out gave us, we find ourselves increasingly dependent on our devices, vegetating in our week old pajamas. Motivation has been lost and bad habits ranging from lack of exercise, malnutrition and too much screen time have raided our lives. We need a way to restore our well-being back to normalcy, or better, and that’s where we believe the Screener app could help.
The Problem
It’s not easy to get our lives back on track when we face countless distractions while being stuck at home. Now that most universities and workplaces are remote, students and full time employees are required to use their devices in order to communicate with professors, classmates and colleagues. However, the more we are on our devices, the more likely we are to stay on it, forgetting that time is passing by. Eventually we become completely unmotivated and don’t know how to even start developing better habits to improve our well being. There are apps that attempt to help us get better sleep, track our exercise and nutrition, boost concentration, track our every day tasks, but they are scattered and it can be hard to keep track of so many apps at once. What if there was a one stop app that encompasses some of your most prevalent well being concerns, that could help you tackle your biggest mental roadblocks, namely in reducing screen time and becoming a better you.
The Solution
The Screener App covers the following categories in well being : exercise, study time and good habit development.
When someone is feeling unmotivated, they have a decreased likelihood of putting in much effort. This is why our exercise category provides workout plans that tell you exactly what will be performed, the duration and calories burned. There’s no need for the user to plan out the workout themselves, lowering the threshold to commitment. As for more advanced exercisers, they can also use the preset programs, or use the interval timer to do their own workouts.
Studying methods such as the Pomodoro technique has gained a lot of traction in the last few years and has been a big success amongst students because studying in short bursts helps improve their concentration and productivity. In addition to studying in shorter intervals, the Screener app also offers the option to block notifications from selected apps on your device in order to reduce distractions.
Developing a good habit is no easy task, on average it takes over 2 months to do so. One of the biggest hurdles people encounter when developing a habit is maintaining consistency. This is because life can get busy and if you have no one to remind you to keep up with the habit, then it can be easily forgotten. However, the Screener app is designed to be a constant companion wherein it will notify you if you are spending too much on your screen and will advise you to replace that wasted screen time with a more desirable good habit. Another way to encourage consistency is to display one’s habit development progress and the productive time they have saved. Habit development should not be treated as a leap of faith, but rather an incremental process that requires strategic planning to stay on track. That being said, Screener recommends a user to keep their habit tasks small and performed more regularly in order to get more frequent rewarding satisfaction.
Current Market Research
We first studied existing mobile apps that provide tools to engage in healthy habits. Afterwards, we compiled the strongpoints in features and design choices that inspired our own app, as well as the weak points that we made sure to avoid.
Headspace
Headspace is an application that helps with meditation and sleep. It also provides some tips to help with mental health. In our research, we found it to be a really good application and it has a lot of features that can be useful in our super application.
Pros:
- Bright colors for anything not related to sleeping
- Dark mode for sleep probably due to using the app when the lights are off
- Interactive buttons that change background
- Celebrities
- Easy to navigate, navbar in the bottom
- No Login
Cons:
- Paywall
- Search bar does not have an auto-fill feature
BetterHelp
BetterHelp is an online counseling and therapy application. The application’s intent is really but its execution is rather poor and we felt that it did not provide a very good UI/UX.
Pros:
- Easily accessible online counseling
- No Login
Cons:
- Too many questions asked when launching the application for the first time
- Textboxes that require long answers
- Pay Wall without seeing any features that the application provides
- A lot of text to read
- Very strict and bland design compared to headspace’s friendly user interface.
Digitox
Digitox is a screen time tracking application. The application performed its single responsibility of tracking screen time very well. We especially liked that it gave a graphical representation of a user’s app usage that made wasted time seem more tangible.
Pros:
- Graphical representation of app usage over time
- Notifications sent when allotted screen time is exceeded
Cons:
- No incentive to stop device usage other than displaying a graph
Productive
Productive is a habit tracking application, a nice twist on a task tracker. The most unique aspect of this app is it requires a user to commit to doing a challenge by signing their name.
Pros:
- Dark theme contrasted with vibrant illustrations
- Rounded corners
- Encourages incremental habit development
- Provides preset habit challenges
Cons:
- Hides the main features with hamburger icon
- A bit cluttered
FitnessPal
FitnessPal is a diet and exercise tracking application. The mobile version was a bit of a disappointment in terms of its UI/UX design. It has a social media aspect that looks gimmicky, but it gets the job done for tracking diet and exercise.
Pros:
- Can predict weightloss based on current activities
- Graphical representations of macro nutrition
Cons:
- Bland color scheme
- No auto fill
- Initially overwhelming due to the many features
- Little done to engage the user
Surveys
In order to get a better idea of the current market, we sent out a survey to a sample population to gather information that could help us in designing our app.
From this survey, we observe that our age demographic is predominantly between 18–24. So our UX choices will be geared more towards individuals who are already more familiar with how to use mobile devices.
The majority of these surveys were filled out by students, so we will take into account more heavily their needs and frustrations.
The next question was meant to grasp the ratio of female/male that answered the survey. Seeing that the split between male and female is almost even, this affected our choice in the colour scheme, ensuring it would be delighting to both sexes.
From this graph, we can see that most individuals find that they spend too much time on their mobile devices. This pushes for our idea of developing a super application that can help users engage in healthier habits.
The following graphs were used to compile what features we should have in our super application. From our research, we saw that there are multiple applications that can help users engage in healthier habits. Therefore, we needed to assemble the features that users would want to use the most.
We observe that most people want to exercise when they are not on the phone, followed by reading, art and socializing. For this reason, we have incorporated an exercise feature that allows users to select preset workout routines or use an interval timer if they so wish. The inclusion of a habit tracker can cover activities such as reading, art and more. The meditation aspect was not popular and so we decided to omit this from our app design. We chose to not include a socializing component because then it could become cluttered, it could actually be a super app on its own like Facebook or WeChat. If the socializing aspect was the biggest hit, then we would have considered designing an app where that is the core feature.
Additionally, 60% of our surveyed population preferred the idea of getting rid of a bad habit by immediately. This idea falls in line with what we expected, of course people prefer to eradicate a bad habit, but they may be unaware of what it takes to achieve complete eradication, or achieve a good habit. Which is why we allow users to select the size of their habit tasks, but encourage smaller steps. We would accomplish this by occasionally notifying the user that more smaller steps can lead to a bigger change in their habits.
Based on the graph above, survey takers ranked less procrastination and better sleep patterns as habits they care most about, followed by more daily exercise then less screen time. Since most of the participants are students and they prioritize less procrastination, we saw it as important to include a study category in our app that could help them manage their study time better. We believed that sleep patterns could be tracked by the more general habit tracking system we had envisioned. As for exercise, we included workout programs and an interval timer so that a user could immediately start their exercise instead of having to take a long time to search for one.
Pomodoro Technique
The Pomodoro Technique is a time strategy that divides worktime into smaller chunks in order to increase highly focused productivity. A standard example of a workflow following this technique is to set a timer for 25 minutes then take a 5 minute break and repeat until the essential tasks are completed. The short breaks are meant to help you concentrate better and fight cognitive boredom. Additionally, it allows you to stretch so that you aren’t sitting hunched over your computer all day. According to Dr. Gazzaley, a neuroscientist, and Dr. Rosen, a psychologist, in their book “The Distracted Mind: Ancient Brains in a High-Tech World”, the dividing of work into ‘do’ and ‘break’ sessions also increases your brain’s incentives for reward. In essence, the shorter the time between rewards (breaks), the stronger the drive to complete the work and reach the reward. The primary benefits of Pomodoro are as follows :
- Manage distractions and control your time
- Increase accountability
- Improve task planning and estimation
- Decrease mental fatigue
- Maintain motivation
Personas
We were able to derive 3 personas from our research which encompasses the qualities of our surveyed population and the features that they would be interested in our application. The personas have different ethnical backgrounds, age, qualifications, and personality traits to help us identify the different users of our platform.
Emma Stone
Emma wants to lead a healthy lifestyle and uses many different applications to help her in that regard. She is tech-savvy and extremely occupied with school such that she gains satisfaction from accomplishing healthy daily habits. These habits include doing house chores, going to sleep early and exercising.
Jon Jones
Jon is really busy with work and has to work overtime on a lot of days to meet deadlines. He gets home and has to look after his house, help his kids with their homework and keep his wife happy. Jon has little time for himself but he uses it to eat healthy and stay in shape so that he can have a long life to spend with his loved ones.
Tyler Beau
Tyler isn’t an outgoing person and didn’t enjoy playing sports while growing up. He spent most of his childhood playing video games and staying indoors. In his adult years, he’s had a change of heart and wants to be more active. He is thinking about his plans for the future and leading an active lifestyle is now important to him.
User Journey
We chose to make a user journey to help expose the possible paint points a user may experience when using our app. This information can help us further identify the frustrations and needs of our customers so we can rectify this.
In this particular user journey, Emma is the user and she is not always motivated by the notification from the Screener app as she’d like to be. Our attempt to fix this is to make her commit to a habit by signing her name so as to make a promise to complete the task. In addition, she doesn’t remember what tasks she has to do and how long it will take so her mind shifts and she does something else. We attempt to solve this by asking the user how much time she has to complete a task and it will recommend habits that can be done within this duration. Emma is also frustrated with the fact that even if she wrote exercise as a habit she wants to do, she’s not sure which workout plan to do and is dissuaded from exercising. A fix for this is to have preset workout plans available on the app that a user can add to their calendar.
User Flow Chart
Link to enlarged diagram : https://drive.google.com/file/d/1BGbaOQ7lkJm3Ac_dZgVsuQMS0RTLLnh4/view?usp=sharing
Once we had an idea of what features we wanted to include in our app, we made a flow chart to illustrate the essential directions a user will follow to navigate to all the features. It also includes the flow of a notification since it is more than just a pop up.
Sketches
After figuring out the main flow of our app, we made quick sketches so we could have a general outline to work off of.
Wireframes
With the flow and general structure of the app complete, we then created the wireframes to serve as a better guideline for our mockups.
Here are more closeups of the wireframes :
Colour Palette
As the Screener app encourages lesser screen time and more productivity, as well as time spent on more active events, the colour palette is something to be carefully thought of. In modern technology, most mobile applications hold vibrant and addicting colours to lure users into using their app naturally, which in turn, greatly increases the app’s usage and the overall screen time.
The Screener app, therefore, aims for the opposite: neutral and calming colors. The following palette offers neutral colors whilst still playing in the spirited realm, optimizing the overall look and feel of the app.
Typography
Two main font choices were made in order to distinguish between titles, subtitles and body text.
Whirly Birdie
The Whirly Birdie font, a font which has been introducted earlier on in the course as an original way to create logos, titles, and more, was chosen in order to represent the Screener logo, as well as the main titles of the app. As the font holds fun inconsistencies in lettering and height, it adds for a more lively look, whilst still holding professionalism given the classic lettering feel. The font corresponded to the interactivity and classic environment we aimed for.
Font
Proxima Nova
Proxima Nova by Mark Simonson holds a classic rounded and modern look. Perfect for subtitles and body font, as it holds a variety of font weights, it suited the app like a glove as it fits the young and modern look of the overall style, and audience.
Illustrations
While researching the market for apps with similar themes and goals, a recurring aspect our team like were the presence of illustrations. It made the application livelier, more fun, and more interactive.
We opted for Humaaans by Pablo Stanley, which is licensed as CC0 Free for commercial or personal use.
Its style and shape are neutral, it offers plugins compatible with Adobe XD and Figma, and holds diversity.
Mockups
Prototype
From the mockups, an interactive prototype is animated.
To interact directly with the prototype, head here.
Conclusion
Designing this app was no easy feat. It was surprisingly difficult to understand what a user could want from a well being app and determining their motivations for leading better life styles. Even we do not know for certain, so it was certainly eye opening and useful to delve into the unknown using research, user surveys, personas and user journeys to better understand the needs of our users. It was especially interesting to see how meditation was the least desired habit to learn given how popular an app such as Headspace is, perhaps it is the celebrity endorsement and impressive UI/UX that makes people gravitate towards it, but that’s just speculation. In terms of the completeness of our app, there are definitely points where we can expand and improve upon, but we are happy with what we have developed and believe it addresses some key concerns that our users had. All things considered, this project has taught us to evaluate apps more effectively in regards to UI/UX and will be an invaluable skill for our future endeavors.
