UX/UI Case Study: Designing HabitBound, a habit tracker app.

Madhuri
7 min readSep 13, 2020

The purpose of this app is to inculcate good habits in a user’s everyday routine and help the user track his/her set goals seamlessly.

Hypothesis

Most of us set a new year’s resolution but due to various reasons we fail to follow it and maintain consistently.

Given the context of the pandemic, I observed a high percentage of people losing motivation along the way and not keep up with the things they planned to do in a day.

I wanted to explore on how I can encourage good habits among the users and help them achieve their goals through this app.

Design Process

Fundamental process for effective UX design

Empathy

Uncovering the unspoken needs and wants of the users by conducting an extensive user research.

Secondary Research

Explored existing data around habit formation and habit tracking. Few of the insights gained from secondary research:

  • Habits are effectively just daily goals. Advice given for habit formation is to repeat a behaviour consistently in a given context.
  • Most people fail to adequately reward themselves for taking action on a beneficial habit.
  • It is possible to break down a bad habit and replace it with good one and through consistency.
  • One of the steps of inculcating a habit is a cue or trigger to take some sort of an action in an internal or external environment.
  • If people are made aware of what action has worked and what hasn’t it acts as a way of reinforcement.
  • Articles suggested significant benefits of logging down habits: A person will get to see his/her progress; Staying motivated ; Identifying problematic areas ; Increase in accountability.

From these insights, a screener survey was given out to a bunch of users. 5 participants from the survey were chosen for the user interview process.

Primary Research

Research questions asked during the user interviews:

  • Do you keep a track of your goals? If yes, what medium do you use for the same?
  • Do you consider both long term and short term goals?
  • Has the lockdown/pandemic pushed you towards being consistent and productive?
  • Could you state the general categories of your goals?
  • Do you have any habits that you would like you to change about yourself?
  • Do you look at what you have accomplished and get a sense of fulfilment?
  • What is the primary reason that holds you back in completing your goal?

User Quotes:

“I find tracking my goals to be counter productive and feel anxious.”

“In the past, I tried moving to an app to track my goals, but I had to put in a lot of effort and it was’nt a pleasant experience.”

“I get a rush from ticking things off my list.”

Summarising the findings from the primary research:

  • 40% of the interviewees did not feel at ease about having nudges, to be reminded of their pending goals in a day.
  • 40% of the interviewees used three variables to track their goals “Pending”, “Completed”, “Terminated”.
  • 80% of the candidates got a sense of accomplishment looking back at their completed goals.
  • 60% of candidates wanted easy access to their daily goals just like a fitness-tracker which they currently use.

Synthesising Research

Affinity Map

Data points from the primary research were collected and organised in a way to form clusters of similar data points.

Affinity diagram

Summarising the categories from affinity map:

  • Ways of goal tracking - Diary, sticky notes, google sheets.
  • Past experience - “Sticking to the conventional way of writing down in a diary”, “Did not feel like continuing with tech”.
  • Category of goals - Health/Fitness; Expenditure; Career; Personal development
  • Motivations - “Looking at goals in my diary motivates me”, “I want to be more productive and make a better use of my time.
  • Demotivated by - Procrastination; Lethargy

Empathy map

The findings from primary research, helped me implement empathy maps to organise insights, observations, and gain a better understanding of the user’s feelings, thoughts, and behaviours.

User Personas

Created two distinct user personas which helped me align on strategies for moving forward and identify goals that need to be met to provide a good user experience for specific user groups.

User persona — 1
User persona — 2

Define

Reframing the results from research phase as “How might we..”(HMW) questions, to turn those into potential problem statements.

  • How might we encourage the users to track their goals/habits?
  • How might we help the users believe that goal tracking is a useful tool?
  • How might we help the users sync their devices(like a fitness tracker) for easy access to their daily goals?
  • How might we inspire the users to achieve consistency in their goals using the goal tracker tool?
  • How might we uplift the users and help them overcome procrastination in achieving their daily goals?

Ideation

Brainstorming solutions to tackle the HMW questions:

  • Encouraging the users and keeping them motivated can be achieved by sending out intelligent suggestions to help them complete a task, based on their previous history of the task.
  • Allowing users to set and view streaks helps them keep going, else the streak gets set back to 0.
  • Providing rewards or gamification(levels), gaining points to unlock levels.
  • User’s profile avatar changing as and when levels are unlocked.
  • Sync user’s contacts and challenge friends , sharing achievements over social media.

User Stories

Created user stories to identify functional requirements of the app. The user stories follow a template of :

“As a (user), I want to (do some goal/task) so that I can (achieve some outcome).”

Site Map

A visual representation or diagram that helped me to keep track of all of the different screens within a site or app and visualise how they are all connected.

User flow

Defining the user flow that depicts the steps and actions in a specific order and sequence that the user must follow to get to the end of the task.

Sketches

Designed rough low fidelity sketches for the screens in the app.

Low - Fidelity Wireframes

The sketches were then converted to low fidelity wireframes. These wireframes were used to document wireflows for the various red-routes of the app.

Wireflow for the onboarding user red route.
Wireflow for returning user red route.
Wireflow showing multiple states of the same screen on user interaction.

High - Fidelity Screens

Typography

The font family chosen was Open Sans.

Color palette

The rationale behind the colour palette is that each of the colours chosen represent the brand attributes. Amber(Orange) stands for enthusiasm and motivation. Cobalt(Blue) stands for familiarity and trust.

Usability Test

A remote usability test was conducted over zoom with 5 participants. The participants were asked to perform 3–5 straightforward tasks that have well-defined end states.

Objective

  1. To gauge the learning curve of first time users with no experience using the app and measure performance success, the usability test will assess the learnability of the app’s core functionality — creating a habit, marking habit as done etc.
  2. Identify accessibility issues — through accessibility testing, we can identify problem areas within the app’s user interface and architecture.

The usability test helped me identify issues and improve from my initial version of the high-fidelity screens:

Usability issue — 1
Usability issue — 2
Usability issue — 3

The usability test aided me to learn more on the user’s needs and expectations upfront and helped me refine to a better a version of the app.

Creating a habit

The flow was designed as step by step process to reduce the cognitive load on the user and also to enable the user get a sense of accomplishment after creating a habit.

Home, Calendar, Profile and Notification Screens

A few animations :)

Here’s the link to the prototype.

Moving Forward

HabitBound was designed for the android mobile platform, to help users create and form good habits and discontinue bad ones. Moving forward I would like to add a gamification touch to the app by introducing social elements, enabling the users to collaborate and share their progress with their connections.

Thanks for reading!

--

--