Habitwise Case Study
Solving the problems created by our habits.
Ever heard that you should get into the habit of flossing daily? Or meditating every day? Or maybe that you should kick the habit of using screens in bed? Most of us have. Along with one other designer and three developers, I had the task of creating a habit tracker:
We had 3 weeks to complete the design, deliver a high-fidelity prototype, and submit the app to the App Store.
Understanding the Scope.
To begin, we assessed other habit tracking apps. We discovered that the best ones had one thing in common — they were simple. They had basic, key functions and avoided an overly-complicated interface.
We crafted our survey based on what we needed to understand from the user. We felt it was important to understand what areas of the users’ lives they were trying to improve. For example, if they were looking to improve their fitness habits, we would design for that.
Instead, we found a wide range of priorities:
The survey results provided important statistics:
- 85% of respondents had habits that they were seriously trying to develop or change. The tools they used included their phones, whether through reminders or apps.
- 68% of respondents said they used themselves as a tool to change their habits.
- 84% of respondents said that they did not currently use a habit tracking app.
We felt we were well-positioned to move forward. In our daily stand-up meetings with developers, we kept them up to speed on our research.
Developing Empathy.
I conducted interviews with several individuals about their habits. My conversations with them confirmed the survey findings. But they also introduced a new category of habits: wellness. People talked about smaller, more mundane tasks like brushing their teeth at night. Other interviewees brought up unique habits, such as putting the dishes into the dishwasher or calling their parents. This made it clear that users would need to customize their habits. I also asked interviewees if and how they used their phone to help with habits. Several mentioned the Reminders app in their iPhone, confirming our assumption that a simpler app would be best.
Based on our interviews and surveys, we developed our persona, Taylor. Taylor is a 28-year-old single professional. Her biggest frustration is that she focuses on too many habits at once. She never feels successful at any of them.
Taylor’s needs and goals guided our user story map. Our whole team, designers and developers, worked together on our user story map.
The main goals were simple:
Guiding the User.
As we dove deeper into the first goal, it was important to guide the user to make SMART goals. SMART goals are: Specific, measurable, attainable, realistic and time-based.
The aim of SMART goal criteria is to ensure that it is easy for people to understand the goals and to know when they have accomplished them. Since one of Taylor’s main frustrations is that she doesn’t feel successful, SMART goals ensure that she defines success and can know when she’s achieved it. We addressed each aspect of SMART goals with a task:
The presence of the developers was helpful for two reasons. One, more minds lead to better ideas, and two, they helped us define a clear MVP. Features like the ability to change a category’s color, achieve “badges” during the habit building process, and a user journal fell below the MVP line. Leaving these features out helped us to create according to the user’s needs and keep the app simple.
Designing Wireframes.
With the user story map well-defined, we began wireframing. Taylor’s main needs were to set habit-based goals, build and break habits and view her progress. With that in mind, we began designing the home screen. We determined that when the user first opened the app, they would be there to:
- Add a new habit
- Check in on current habits
- View progress on an existing habit.
We included each of these in the homepage by showing existing habits in a list view. The list included the progress on each habit and the call-to-action to add a new habit at the bottom of the list. We placed the check-in feature in the center of the bottom navigation.
Displaying Progress.
How to display the progress on the homepage was a unique problem. We discussed several options:
The progress ring beat out the other options because it was the most informative and visually appealing. We also needed a separate page that visually communicated the user’s progress. One of the most challenging parts of the design was the process of adding a habit. As with the rest of the app, the aim was to keep the process easy and customizable, while still guiding the user to set SMART goals.
We had a good start, but we needed to do some user testing before we could create the finished product.
Testing, 1, 2, 3.
We initially thought that the app would have a native list of habits which were pre-matched to specific icons. If the user wanted to add a habit that was not listed in the app, they would have an “add custom” option. But, as we continued user testing, we found that users are very unique in how they word their habits. We came to the conclusion that a native list would be more constraining to the user than it would be helpful. As a result, we decided to have a text field where the user could enter a custom habit name.
To encourage the user to set SMART goals, they needed to set a period of time over which they would track their goal. They also needed to set a frequency with which they would check in. For example, the user would determine that they want to Go to the gym 5 days a week for 7 weeks.
At first, we had a number picker followed by a drop down, and another number picker followed by another drop down.
Based on user feedback, we found that the first iteration was vague, created inconsistent tracking, and took a long time for users to think through. We considered many solutions but none felt quite right. So we did the only sensible thing- we went back to the user. I designed a simple interview and conducted it with 10 different people. I asked, “What habit are you trying to build or break?” and then “How do you measure success in that?” I wanted to understand what time periods users would need to have in the app to measure their success. The majority indicated that they would measure their progress by successful days per week. With that information, I felt confident that we could make a week a standard period of time. I created the following design:
I tested the prototype and asked people to say out loud how they would fill out the form. Users understood the interaction and were able to fit even daily habits onto a weekly scale. For example, one tester mentioned nail biting. She said that she would name the habit “No Nail Biting” and check in on her success 7 days a week for 4 weeks.
Creating in High-Fidelity
We then held a hand-off meeting with developers and started to develop high-fidelity designs. Here we encountered another challenge: color. We needed to have distinguishable colors for each habit category. They needed to have enough contrast to be distinguishable, but still be harmonious. They also needed to be visible in the line icons for each habit. Through a lot of trial and error, we found our perfect colors.
As I conducted user testing, there was one obvious problem. People did not understand the various progress indicators. In addition to the visual progress indicators on the homepage (as discussed previously), the progress page displayed two different progress visuals. Users were not sure what each of them meant and how they were different from each other. We improved the labeling in the graphs and by explaining the graphs in the on-boarding. These changes helped users to understand much better.
Once we were satisfied with the results of our user tests, we gave our high-fidelity prototype to the developers to bring to life.
Conclusion.
The solution is an app that allows users to create habits, assists in maintaining them, and tracks their progress. At the end of the three-week project, Habitwise 1.0 was submitted and accepted into the App Store. The next update will include user on-boarding, stylistic updates and a few minor bug fixes.
I loved designing Habitwise. It was a great experience in working with developers as well as designing for the user. I learned some unique lessons in the process:
- Test everything (when possible). Users caught so many issues in the app, particularly the habit creation, that we as the designers may have never noticed. By talking to people about why they struggled with a given feature, we were often able to find solutions.
- Understand the need. We got tremendous value out of our surveys, which built the foundation for the product. Asking the right questions, enabled us to understand the user better and what features they needed in the app.
