Mr Habit

Project Overview

Mr Habit is an app that focuses solely on breaking bad habits and forming them into good habits. It takes roughly 66 days to form a new habit. By understanding the user’s behavior, routine, spending habits, and stress levels the app can provide a healthier, more productive life.

Project Goals

  • Design a bad habit tracking app that will switch bad habits into good habits. By alerting users of their stress levels, spending patterns, and phone usage Mr Habit will enforce good behavior

  • Focus on the cause of the behavior to address the root of the trigger. A part of this experience will be to monitor and track behavior so users can see if they are progressing or regressing

Tools

  • Figma

  • Miro

  • Airtable + Excel

  • Notion

My role

  • UX Researcher

  • UX Designer

Focalizing the Research

Stepping into the shoes was the focus of researching the needs as well as the pain points of participants and potential users. I wanted to take a deep psychological dive in order to uncover the behaviors that led people to take up these bad habits in particular. Beginning and ending habits are not as difficult as it seems but the challenging part is when it becomes a subconscious part of your routine. A part of the app's design will be to break apart the user’s routine to force the bad habit away. Researching participants' routines will provide insights into how to do so.

Gaining a better understanding of habits

All the apps sing the same tune just from a different musician. They ask for the goal and track the goal until it becomes engrained in your routine. Each has its own unique way to separate itself from the competition such as Quitzilla showing a count down clock (abstinence time) from the last time a user engaged in a bad habit or addiction. Habitify tacks the mood which is very helpful for identifying the emotional state of users throughout their journey. Not one single focuses on why that bad habit has formed and what causes it. Here is a list of features.

Interview key insights

Developing a user empathy map

The main concern and discovery that I noticed were that people were very aware of their habits. Why does this problem exist if they are aware but lack control then these small, minor habits could possibly turn into addictions. Many of the habits weren't destructive but reducing them will have a positive impact on their everyday lives such as having more money in their pockets.

Most common user problems

The problem was easy to address and so was why the problem existed. The goal shifted to how to solve the problem and design a productive and useful interface that'll be the user's resolution. Forming a habit takes consistency and even more hard work when you are trying to replace that negative habit with a positive one.

A few interviewees feel as though their lives are boring compared to others who “appear” to live a much more interesting life. Scrolling through people's social media allows them to escape their mundane lives. They feel that they are not where they need to be socially or financially according to their current status.

The user’s journey

When I was conducting interviews I gained a wonderful insight into what set users’ habits in motion that led to them engaging in their relieving activity. First is the trigger which is activated from either boredom or stress. The second is the routine. This is the frequency and the regularity that cements the habit (e.g going out to take a smoke break at noon). The third is the reward which reinforces the routine and helps keep habits firmly in place. Essentially you get a good feeling from said habit.

It also breaks down what the users are doing, thinking, and feeling from start to finish of their habit. From there it shapes and builds features that are best suited to track and eliminate bad habits from a users' life.

Challenging Assumptions

Before putting together a product and its features I wanted to take a step back and take a look at what I assumed. Challenging my assumptions will provide an innovative feature and a more complete product. On top of that, the possibilities will be more beneficial than I could have imagined. My goal was to look at the big picture and focus on things that I may have overlooked or missed. Since I am the sole designer for Mr Habit I realized how easy it is to become myopic and have tunnel vision.

Feature ideas & solutions

Some features I came up with already existed with other habit-tracking apps and a few were innovative inspirations from research. Not all would be included or introduced as a flow in the design due to time constraints. Time will tell which features would be more ideal to implement during the first and second rounds of testing.

Let’s solve this problem

Since the research phase led to defining what the problem is brainstorming a solution for the problem was the next step. A large part of the time while researching was spent navigating a competing app’s interface. Although similar apps on the market focus specifically on forming a habit and not replacing a bad habit I wanted the interface and flow to be similar. The mission was to create Mr Habit's own lane while not veering too much from the marketplace.

Designing the user flow & structural layout of the interface

I opted to go with the stress reading feature as the primary flow and a meditation session after the user is notified as to the secondary flow. There were two reasons why I chose these options compared to the others. Stress was the most common provocation that set the habit loop in motion for those I interviewed. It made the most sense to address the biggest issue potential users were having which was stress. The app will collect and analyze data from the user’s behavior, schedule, and stress levels. Once a week has passed the app has gathered enough information to detect when the user is stressed. The app notifies and then opens a meditation session so the user meditates instead of smoking.

User flow demonstrates a user opening the app for the first time and following prompts that lead to the home page.

Second diagram shows the user flow of creating the habit

Sync with the Stress app

Prompts users to sync their mobile app with the Stress App found in the app store. Once the two applications have been synced the mobile app paired with a smartwatch will be able to detect stress levels. Users will be alerted after a week of data collection. Now the habit can be tracked and disrupted.

Home screen

The home screen displays popular habits to replace poor habits. The black button options let users choose a more tailored new, healthier habit to engage in such as learning a new language. On the home screen, a journal log screen entry will create a new user flow to log journal entries.

Jogging screen

If users want to create a journal entry for the day they can log thoughts and use the slider to gauge their emotions for the day. Over time data will be analyzed and understand the emotional state the user is in.

Jogging habit screen & home screen with two added habits

Wire flow displays how the user would use several elements to track their progress. Progress can be broken down into options such as the habit’s progress for the day or week.

Video prototype

Time to get things tested

Testing both low fidelity and high fidelity prototypes is where a large chunk of the iterations was done throughout the. Corners were rounded, the background color changed, and more. A few screens were removed because they were counterproductive and served no real person in the user flow. The goal of the two-round of testing was to see if the user could successfully add a habit and then check on the habit's progress. I wanted to understand how the testers interpreted the design and how they proceed to the next step in order to accomplish the task.

First-round testing

There were a few necessary aesthetic changes I made after the first round of testing and observation. The changes were not too significant but the subtle corrections proved to have a more powerful visual effect.

First change

The original bottom navigation was white and above the calendar/journal entry section for users to add a new entry for the current day. That section was also white so it blended and looked as though they were one. Although there were lines to divide the two it wasn't enough of a distinguishable break. To develop a better contrast between the two I made the bottom navigation bar a darker color (a few shades darker than the top navigation bar). The change of the color from light to dark with the bottom bar associates it with navigation because the top bar is similar colors.

Second change

Looking at design patterns from UX Archive and competitors for inspiration assisted with helping users focus on a task while reducing distractions. Adding a layer blur to the top and bottom navigation bar makes it so the users clearly understand that the boxes are the only option and that any other elements are currently inaccessible(unless they decide to dismiss them).

Second round testing

The second round of testing on a high-fidelity prototype came consisted of a few changes where feedback was also mentioned in the first round of usability testing. I waited to make the changes after consistent struggles and confusion in some areas of the flow. I eventually removed the screen prompting users to sync their bank accounts. Many participants were hesitant and mentioned they would be nervous to do so. Their main concern was for security reasons and how they were distrusting due to a lack of familiarity and notoriety of the app.

Project reflection

Next steps

Like most projects lack of time prevents the design from fully flourishing. There is always room for improvement, design polishing, and features for users to love. If given a few more weeks I would like to:

  • Add the money penalizing feature to the design as a flow. Originally I wanted to add this feature as one of two or three flows in the overall design. After a few rounds of testing potential users seemed disinterested or cynical in being penalized for indulging in their bad habit. I even removed the screen where users would sync their bank accounts to the app. I soon realized that if a little information was provided as to why users would sync their banking information then they would be more inclined to do so.

  • The research phase proved to be productive. I was able to discover the needs of users which contributed to the outcome of the design. Learning more about the psychology and behavior of how habits are formed and difficult to erase would be extremely useful. Breaking down the fundamental parts of a habit loop will better tailor to users' progress during the journey. Habits formed from distress are more powerful and rooted than habits formed from boredom.