Alana Vaccaro

🏠 Back to home

Project Duration: August 2019
Role: Product Design

Habits

A task management system that actually gets you to stick to your habit.

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.

The Problem

People struggle with committing to building a habit because there is nothing to hold them accountable.

The Solution

Develop an online task management system that allows users to build habits, by making habits measurable and having a monetary risk.

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.

To keep users engaged and display progress, it was decided to use a gradient opacity that would put the focus on the line and input field.

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.

With the color scheme, typography, and illustration established, I revisited the form and applied the gradient.

Once the user is finished with their statement, the gradient disappears, and the copy becomes visible. The user is then able to review their statement and make any changes before entering payment.

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

Account Settings

When I first started to think about account settings and what should be displayed, I broke it up into two sections: account settings and history.

In the settings portion, the user can complete the following tasks: 1) edit their email, password, and payment details, 2) log out, and 3) delete their account. In the history portion, the user is able to view a synopsis of completed habits.

After several iterations of the layout of the account settings page, I could not determine the ideal way of how to display settings and history together. Therefore, it was decided to separate the two. Focusing on just settings allowed me to rethink about the interactions on the page.

Transaction History

Transaction history is displayed in a collapsable table in account settings. The table has fixed scrolling and will display a max of 10 rows.

The following question was raised because history is now a separate section: “Will users know that they can find habit history under the account icon and will they know what history means?”

I decided to move past habits to the home page. This way, the user could easily view all habits on one page: current, upcoming, and past. Current habits are violet, to represent an active state and upcoming and past habits are represented by a light purple to represent an inactive state.

Reflection 🎉

Challenges and Insights

It seemed like I would never get here, SO MANY ITERATIONS.

When building Habits, I wanted to build a product that people would enjoy using, but also create a tool that would help people build a better life. During this project I learned A LOT.

It’s easy to get caught up in the big picture when building a product from scratch. You start dreaming about what the future holds for the product and all the cool things you can do, then you have to stop and remember, IT’S JUST THE MVP.

This happened quite often for me in this project. I kept thinking about the product as a whole but realized in order to tackle it, I had to break it up into smaller sections. By having different phases, it allowed me to focus on the micro interactions for each part of the project. After I was happy with one part or if I was stuck, I would move on and then revisit if needed.

Building a product from scratch is a challenge, but nothing is more rewarding than the payoff and the ownership over a product you built.

Next Steps

When Habits goes live, it will be a true test to see if it is successful. To measure the success of Habits, I would use the following measurements: