Overview

During my time at For this project, I was given an abstract idea; create a habit builder that incentivizes people to stay with their habit by having a monetary risk (a wager). For every day that the user does not complete their habit, they would have to pay. The user would be able to select who the recipient is, whether that be a friend, foe, charity or anti-charity, and how much the wager is.

I broke this project up into two phases:1. Initial research and developing the onboarding flow & 2.Developing the dashboard (account settings and tracking a habit.

Research 🔬

Competitive Analysis

I researched other habit builders, both web and mobile applications. I wanted to understand how the other habit builders tracked progress, incentivized people to stick to their habit, and their brand identities.

Findings

I discovered that there were two main incentives: Monetary & Streaks.Sticking to ending a habit or creating a new habit can be a daunting endeavor, especially when money is on the line. For Habits I wanted to emphasize streaks and highlight the accomplishments.

Ideation

After some initial research, it was time to think about Habits’ brand identity. People are coming to Habits to make a positive change in their life, and I wanted that to reflect in the interface. I wanted Habits to have a fresh, playful feel that gets users excited not only to use Habits, but to commit to making that first step towards a better future.

With the parameters in mind of what information is needed from a user to create a habit, I had to think of a way to entice users to use Habits. Onboarding is key to the success of a product, so sticking to the brand identity, I decided to make the onboarding conversational.

Onboarding:Iteration One

In order to create a conversational experience, it was determined that as the user enters information in the inputs, it creates a statement (a mantra). At the very end of the statement, it would ask the user to enter in their payment information, encouraging the user to commit. After the user enters payment information, they would then be prompted to create an account. By having users create an account after entering in their payment information, it would be less likely that users would not create an account because they have already committed to the habit.

Sketches ➡️ Wireframes

Iteration Two

After the first iteration, the site still felt like a form, therefore, I changed the layout to a paragraph. As the user enters in their information, the focus is put on the next input.

Design 🎨

Visual Explorations

With the brand identity in mind, various visual explorations were analyzed.I began by creating several illustrations and decided on the design on the below.The shapes are organic and light, conveying a sense of formation and development.

Style Guide

For my primary color, that would be used for the logo, input fields, and call to action text, I chose Blue-Magenta Violet. As complimentary colors, I chose Dark Terra Cotta and Unbleached Silk.

For the typeface, I chose Poppins with a complimentary typeface of DM Serif Text. Poppins is an internationalist take on the geometric sans genre, while the DM Serif text is a more robust serif, intended for smaller sub-headings and text sizes.

The Details

Drop-downs

I also had to start analyzing the micro interactions of the form and how the input fields would function. That is, which fields would users be able to type in the response and which fields would users have to select from a dropdown menu. For the duration, I selected a dropdown menu with fixed durations of 30, 60, and 90 days.

For the habit, the user is able to select from a drop-down menu with a list of preselected habits. The first iteration of the drop-down menu included: 1) different categories with habits under each category and 2) an option to create a custom habit if the it was not listed. By eliminating the second option, the intention is to make users choose a quantifiable one that can easily be measured and achieved.

Payment

Payment was a challenging aspect to analyze, and many iterations were tried before landing on the one below. When the flow was originally created, I had the option to enter in a phone number for the recipient of the wager, and that was it. The recipient would receive a text saying that their friend would like to pay them for everyday they didn’t complete their habit. I didn’t really think through how that would actually work. After the drop-down menu was changed to include fixed options for charities and anti-charities and the option to select a “friend or foe”, is when I realized that payment was more difficult.

Habits has the user’s payment information, therefore there are two aspects to think about: 1) what information do we need from the recipient to pay them? & 2) what method of payment do we use?

My first iteration included a dialog that asks for the recipient’s name and email when the user selects friend or foe. Again, it was more difficult than first perceived. Then I started analyzing about how to gather information from the recipient. The thought was that there would be an option to require the recipient to join Habits and payment would be done through Habits. This option would have the ability for users to choose how they would like to receive their money. Eventually, I believe that would be a good option, because it encourages more people to join Habits, but for now I needed to create a more streamline process for the MVP.

When the user selects friend or foe, a dialog box appears that request the recipient’s name, email, and the method that the user would like to pay them. Ideally, the user will select a payment method that the recipient uses, but if not, the recipient will be prompted to sign up. Until Habits is live and we receive customer feedback, it is unknown if this payment method is the best, but for the MVP, I feel this is the best option.

Phase Two:The Dashboard

What does the user need to accomplish?

Settings: How do I add/edit payment info, notification, settings, etc.?

Habits: How do I view/edit habits I’ve created?

Progress: How do I view progress on my habits? What can the product do to help me stay engaged?

Sketches

This was started by noting what the dashboard needed to include. The user should be able to complete the following tasks: view and edit a habit and create a new one.

For each habit, the user should be able to view their progress and the following details:category, streak status, start date, duration, length, wager amount, total paid, receiver, payment method.

Above are some of my first iterations. As I look back at these, I begin to understand the importance of MANY ITERATIONS.

My first iterations strayed from the brand aesthetic, and I needed to rethink how to display the information in a digestible manner.

I decided I wanted to display all the habits and their progress on the home page. Each one would have their own card and their progress would be displayed on a calendar. The calendar would show the multiple states: complete, partially complete, and incomplete. The card also would display the streak status that would show: current streak, longest streak, and target streak. I also believed that because money was the motivator, the amount paid should be emphasized. Additional habit details would also be expandable.

Hi-Fidelity Mock Up

Marking a habit complete

Editing the habit

Progress

When showing progress, there were three main points that needed to be communicated:

• Here’s what you’ve completed to date
• Here’s what you’ve completed (or not completed) for each day
• Here’s how much time you’ve got left

The habit completion is indicated by three colors. Red represents incomplete, light purple represents not yet completed, and violet represents complete and partially complete ( a solid fill if the user completed the full time and an outline if the user didn’t complete the full time). Streaks are represented by a solid line. If the user doesn’t mark the habit complete, it will automatically be marked incomplete for that day.

Dashboard Final