I began with trying to understand how people build habits by researching on Google Scholar and O’Reilly.
Insight 1:
Event cues are powerful tools to build and reinforce habits
Result - Final app supports event cues in the form of notifications
Insight 2:
Existing apps lack features supporting habit formation, event-based cues, and implementation intentions
Result - Pushed app towards behavioral research-proven practices for app features
Insight 1:
Most people who use habit tracking apps are young to mature adults (18 to 49 years old)
Result - Informed interviewee selection and research during research collection.
Next, I set out to understand what users expect from habit tracking app functionality and how apps approach habit set-up. I wanted to explore a breadth between stylized and minimal so I chose the following 5 apps since they captured a breadth of UX/UI approaches.
Since a big part of using a habit tracker is setting up the habits themselves, I wanted to isolate my understanding of how apps approach this part of their functionality.
To do this, I organized the features into two sections: one for features related to setting up a habit and another for features related to general habit tracking app functionality.
Using the findings from the breakdown, I identified key features users expected from habit tracking apps.
I implemented all of these features in the final version of the app after considerations from user interviews and analysis.
Feature 2:
Weekly Habit Cycle
Feature 3:
Schedule reminders in weekly time frames
Feature 4:
Ability to personalize habits(coloring, shapes, etc.)
I dove into the Google Play Store and made note of the most constructive and popular comments in the reviews section of each app in my competitive analysis.
Opinion 1:
People value attractive & simple user interfaces
Result - I stuck to a minimal UI even though I was considering many compositions
Opinion 2:
People overestimate the effectiveness of 'streaks'
Result - Though it was not behavioral-science backed, the reviews revealed I had to implement some minor streak tracking functionality
With the information I’d gathered up to this point, I saw the need for a novel feature encouraging users to develop their habits. I had an idea for a digital tree growing as a person completed their habits inspired by the mental health benefits brought from cultivating houseplants.
After sketching up a few concepts and ideas, I felt prepared to jump into interviews to see whether this idea intrigued people.
I now had a good amount of information to go off of but I needed to confirm that my findings up to this point are relevant to my target audience.
I decided the best option would be to jump into some user interviews with the goal of identifying how relevant my findings were and how potential users interfaced with their habits.
- Number of participants: 6
- Adult stage: 4 young adults / 2 mature adults
- Gender: 3 males / 3 females
To understand how people navigated their own habits, I asked questions about how they navigate their habits day-by-day and their experiences with habit tracking apps.
- “I wish I could have more control over the notifications.”
- “If creating a task[or habit] is too complex, I’ll just delete the app and move on to another one.”
- “The notifications are just not helpful a lot of the time when I am in the middle of something else.”
- “I stopped [using my app] because I’d added too many habits. There was just too many to do so I got discouraged.”
Finding 1:
Users expected more support from their apps to accomplishing their goals
Result - I considered as many possible ways that a habit tracking app could encourage users without becoming a large external motivator
Finding 2:
Users craved control over habit tracking functionality - especially when it came to notifications
Result - I pushed to implement features allowing users to control their experience with their habit
Finding 3:
Users were interested in the tree feature I had imagined
Result - I moved forward with the tree concept I had in mind during the design implementation process
To distill all of the research I’d done into a concrete and reference-able form, I created two user personas. They were representative of the distinct user populations I identified over the course of my research.
Apps [Persona] is Familiar with - a section that guided my understanding of peoples’ mental models, familiar user interfaces, and familiar workflows they had.
I then identified a list of aspects of the app that were mandatory based on user expectations and important features for habit development. I was constrained by my experience as a solo novice developer, no budget, and creating the app on a mobile platform.
With the MVP of the app clear in my mind, I generated a high-level flow between each feature that would make the experience the most seamless for users.
Since I was feeling confident in pursuing idea of generating habit trees after the interviews, I had to figure out if it was actually feasible. I fleshed out my idea then programmed it with p5.js within React to test.
.png)
Sketch of tree generation
Hand-programmed prototype of tree
Finding 1:
The implementation that would be the most visually engaging was if the branches animated each time a user completes a habit
Finding 2:
Randomly generating the trees’ branch length and angle allows each to be unique and meaningful
Finding 3:
The generation of the tree must be capped because the branches and leaves that have generated will begin to overload the system eventually
I then had to think about how the tree would fit into the rest of the app. There were multiple ways to implement the tree in the app which were mutually exclusive. After considering many options, I identified three ways that the tree could function.
- Only one tree that represents your account-wide progress over all habits
- A tree being grown for each habit a person has
- A mix of both 1 and 2 where each habit gets its own tree and there is an account-wide tree
I conducted semi-structured interviews/usability studies by making the frames into a prototype allowing users to explore the UI as they spoke about their thoughts.
I hypothesized users would prefer having both but user testing revealed users responded best to just have a tree for every habit.
With new screens, I dove into some formal usability tests once again to find out if these were good bones that I could build the hifi screens off of.
- Change the settings of your habit
- Add a habit to track
- Check the calendar for your new habit
- Use the journal entry function
- Tree Location - Moving the tree to the right side increased the scan-ability of the main page.
- Progress Bar - Users found it important to be able to tell how far along they are to motivate themselves and know when a new tree will be coming.
- Making Habit Creation Approachable - I split the options into three pages to decrease the overload that users experienced when they got started creating their habits
- Info Areas - Since users were confused about how certain features would impact their habit, I added info buttons to gain an understanding of what each section meant.
- Adding an intention clarifier - Behavioral science supports that well-defined intentions highly correlates with habit follow-through so I found this important to add.
Since I was feeling confident in pursuing idea of generating habit trees after the interviews, I had to figure out if it was actually feasible. I fleshed out my idea then programmed it with p5.js within React to test.
Soon after assembling the moodboards, I jumped into iterations of the home screen’s design.
I designed the UI to be as light-weight as possible so that users found tracking their habits approachable.
After creating the home screen, I applied the styling to all other screens that were previously grey-scale/un-styled.
With new screens, I dove into usability tests once again to assess the performance of the new aesthetic and make final adjustments to the interaction design.
- Making input more intuitive - Users felt like the word ‘done’ felt too final for them when inputting tasks that they were doing regularly. Making the change to symbols keeps the experience lightweight and intuitive.
- Adjusting navigation - Users felt confused that the bottom navigation matched the navigation of the habit view. Making this change allows for smoother scrolling through many habits, highlights habits, and doesn’t clash with habit view’s bottom navigation.
- Tree generating with steps - Users only understood the tree generation feature after completing their habit the first time. By having the tree generate in the top image as users go through the steps of habit creation, it introduces them to the uniqueness of the app earlier.
- Reorganizing optional inputs - Users wanted to quickly create habits that had all of the necessary elements. I organized the necessary inputs in the first screen and optional inputs thereafter so experienced users can more efficiently create new habits.
- Simplifying target input - Users found the old target input system confusing and unintuitive. The new version was instantly recognizable to users, easier to use, and conserved space.
- Centralizing control - Some users felt confused about how to back-track in the habit creation process. This intuitive update allows users to quickly grasp navigation between steps.
- Clarifying habit settings button - Users were confused as to what this settings button would do so I made it more clear that this settings menu would change this particular habit.
- Cleaning habit view navigation - Users were unsure where they were and where they could navigate when they landed on the habit view page. This solution fits users’ expectations of bottom navigations and allows for quick orientation themselves.
- ‘Passed’ days visually distinct - Previously ‘passed’ days were the same color as habits not scheduled. This impeded users’ understanding of their habit’s progression. I adjusted the coloring to be a light grey to capture the visual significance of a ‘passed’ day.
- See previous month inputs - Users were frustrated viewing the tail ends of days in a month - they had to switch months to see what happened in the days that crossed over. Having the input visible but at a lower opacity was a happy middle-ground meeting user needs.
I am currently collaborating with an engineer friend of mine to develop this app. Reach out to see how it's going!
- Add different trees for users to grow
- Add progression when a user chooses to regrow the same tree
- Adding the ability for users to create task lists along with habits
- Make the logo not look like broccoli
Being my first end-to-end project, I learned an incredible amount form this project. First and foremost, usability tests are brutal, necessary, and infinitely insightful. Also, no matter how confident you are in your design, there is always going to be some way to iterate or improve on it - never stop looking for improvements.
- Having a brainstorming session about how to provide a solution to the problem statement after the Research stage would have given me a lot more ideas to work with as I went into the design stage
- Developing scenarios in which an individual might use my app after having created the Personas would have helped me develop a better understanding of user needs as I went into designing
.png)
.png)
