Flip Habits

An end-to-end iOS application

Background

Flip Habits is a new mobile app designed to help users break bad habits and track their daily progress. The app is inspired by the X Effect, a simple yet powerful method that uses an index card to mark daily successes or failures in habit-breaking, encouraging consistency and accountability.

While many blogs and articles offer advice on breaking bad habits, and several apps provide similar solutions, Flip Habits aims to stand out by focusing on usability and effectiveness. Research will be conducted to ensure the app meets real userneeds and supports individuals in achieving their behavior change goals.

The Challenge

Find a solution that effectively helps users break their habits.

The Goal

Design a cohesive end-to-end application and brand experience that empowers users to break their bad habits and stay motivated throughout their journey.

Responsibilities

User research, UX design, UI design, branding, prototyping, and testing.

Software

Figma, Photoshop, and Illustrator

Timeline

3 weeks (30 hrs/week)

My Design Process

  • Competitor Analysis
  • Secondary Research
  • Interviews
  • Persona
  • Sitemap
  • User Flow
  • Wireframes
  • Branding
  • Style guide
  • Hi-fidelity designs
  • Prototyping
  • Usability testing
  • Iterations

Research

The research objectives will focus on:

 
  • Explore which bad habits people most commonly want to break.
  • Identify where people seek help when trying to overcome a bad habit.
  • Understand the methods people use to break their habits.
  • Analyze the solutions currently offered by competitors.

Research Methodologies

To uncover users’ motivations, expectations, and frustrations when trying to break a bad habit, and to identify the target audience, I conducted secondary research, analyzed both direct and indirect competitors, and carried out user interviews.

Competitive Analysis

I analyzed both direct and indirect competitors to identify insights and opportunities for the Flip Habits app.

Approach
Competitor apps use a variety of approaches, often based on psychological techniques to help users break bad habits. Most commonly, they employ the “Don’t Break the Chain” method, which visually tracks users’ progress over time and encourages consistency.

Features
These apps typically include features such as progress-tracking calendars, motivational quotes, reminders, and trend reports to support and motivate users throughout their habit-breaking journey.

Secondary Research Findings

How long it takes to break a bad habit?

Recent studies have proven that breaking a bad habit can take at least two months.

Health

Mobile apps are widely used nowadays to record and monitor people’s health. Health is one of the most important reasons why people are trying to shift their habits and better their quality of life.

Most common bad habits

Some of the most usual bad habits are smoking, lack of exercise, poor diet, substance abuse, biting fingernails, hair pulling, drinking coffee, drinking soda, procrastinating, waking up too late among others.

Approach

Forming another type of habit that can replace the bad habit has been proven to be more effective, and it’s one of the most common ones. People have to make sure that the new habit is a good one.

Trends

The most downloadable mobile apps in recent years are related to social media. Nowadays, people talk about their habits and problems more openly on social media.

Apps influence behavioral change

Some apps have been proven to increase healthy people’s activities, and therefore have reduced their stress, depression, and anxiety.

Interview Findings

I Interview 3 participants that are trying to break bad habits. The habits that they are trying to break are drinking too much soda, eating junk food, smoking, among others.

Goals

  • To break their bad habits in a reasonable time
  • Be a better version of themselves
  • To improve their health and quality of life
  • See positive results
  • Find inspiration to break the bad habit
Frustrations
  • The process of the booking takes too long
  • To have to sign up or have an account to make a booking
  • To pay extras for bags or seats.
  • Not being available to check out at any time
Needs
  • Cannot keep a record about excuses for the recurrence of the bad habit
  • It’s hard to set up a plan for themselves
  • Hard to replace a bad habit with a good habit
  • It’s hard to keep inspired
Motivations
  • Set up goals
  • See their progress about breaking a bad habit
  • See how the bad habit affects their life
  • Be encouraged by friends, family, or other people
  • Seeing other people’s experiences
  • See results 

Key Takeaways

  • The most common method for breaking a bad habit used by the participants is setting up a plan and replacing the bad habit with another good habit. This approach could be taken into consideration as inspiration for the solution.
  • Seeing progress and results is very important for the users.
  • At the same time, seeing other people that are going through a similar path seems to help them with their goals. 
  • Encouragement from their loved ones or other people is important to them as well.

Define

Persona

Once I had my research findings, to better understand the needs and motivations of the users that want to break a bad habit, I created a persona that represents the target audience for the app.

Information Architecture

Site map

Based on my research findings and persona, I was able to identify the features that the app should have to help the users to break a bad habit.

User flow

Knowing the persona’s needs and motivations as well as the structure of the app, I designed a user flow to help me understand and build the user experience through the app. 

Ideation

Most competitor apps already use the chain approach to help users break bad habits. This method is based on the idea that the longer users maintain a streak of breaking a bad habit or building a good one, the closer they get to their goal, which motivates them to continue. While this approach can be effective at times, my interviews and secondary research revealed that simply seeing progress is not enough to break a bad habit. Users also need a clear plan to replace the bad habit with a new, positive behavior. By combining this planning approach with progress tracking and other motivational features, I can offer a comprehensive solution that helps users successfully achieve their goal of breaking a bad habit.

I realized that simply seeing their progress isn’t enough to break a bad habit. Users also need a clear plan to replace the bad habit with a new, positive one.

Wireframes

The app allows users to create a habit plan where a bad habit can be replaced by a new, positive one. Key features include a dashboard, trackers, calendar, notes, reminders, motivational quotes, statistics, and a form to add the habit plan.

These features were designed with users’ need for encouragement in mind. For example, reminders and motivational quotes help users stay focused on their goals and reinforce a positive mindset.

Branding and UI kit

The logo is composed of a circle and an ellipse positioned to symbolize a flipping coin. In the logotype, the letters “p” and “b” are joined to represent a flipped letter mirroring itself. Both elements reflect the core idea of the app, which is to flip a bad habit into a good one.

The bright blue color was chosen to convey calmness and encouragement. Aqua and light red represent positive and negative actions respectively. Aqua symbolizes good habits and light red represents bad habits. The typography combines two sans-serif typefaces to create a modern and gentle look.

Hi-Fidelity Designs

habit plan

In the cards, users can track their progress by comparing their bad habit with the new habit. Their goal is to reduce or eliminate the bad habit entirely. By tapping on each card, users can view their progress and access other relevant features. To add a new habit plan, users simply tap the plus icon button. ​

colors

The visual differentiation is made by color being the light red for the bad habit and the light aqua blue for the good habit.

emojis

Also, I used emojis to represent the bad habit as sad and the good new habit as happy.

Users can add a habit plan where they can replace the bad habit with a good habit, and set a goal.

Users can track their progress, set reminders, allow quotes for encouragement, add notes, and see a calendar.

In the notes page, users can add notes either by typing or recording a voice message.

In this calendar, users can see their progress per week.

STATS

Comparing both habits, users can see their progress daily, weekly, monthly and yearly. They can also see a graph where they can see their progress in comparison with other habit breakers in the same bad habit category.

connect

Users can chat with other users that are trying to break a habit. They can participate in forums and they can get a coach with a premium subscription.

profile

In this page, users can keep track of their current habit plans, goals , usage of the app, and how many connections they have made.

UI Designs - Onboarding Flow

To help users to get onboard with the app, I created onboarding screens so the users can understand how the app works and can get started.

Usability Testing and Iteration

I ran a usability test to identify any flaws in the app design. 

Findings

  • Users found it easy to add a habit plan and then track it.
  • The navigation was defined as easy and intuitive.
  • Users liked the look and feel of the design and said it was clean and appealing.
  • Users liked the concept and functionality of the app.
  • Users found the demo helpful and fun, but some users thought it had too many steps.
  • The stats and graphs caught the attention of the users.
  • Users found the connect feature very valuable because they wanted to be able to connect with people that have the same struggles and goals, and thus get support.

Opportunities

  • The demo could have fewer steps.
  • The wording in the demo can be improved for better clarity.
  • More information can be added to the calendar feature to make it more clear.
  • A reward system can be implemented moving forward with the project.

Iterations

Based on my usability testing findings, I decided to condensed some steps and cut some screens so the onboarding process can be shorter. At the same time, I enhanced the calendar feature to present the information for the users more clearly.

onboarding steps

Besides reducing the number of onboarding screens, one of the homepage screens in the flow was modified to indicate that users can get started at that point, rather than forcing them to check the icons in the tab bar, it invites them to check them.

Before

After

Before

After

CALENDAR

The note icon was added to the days when users added a note. The circles that have two colors on their borders represent days that users did both a good and a bad habit on the same day. A solid color indicates when the user did only one of the habits that day.

Next Steps

  • Implement a reward system to reinforced the positive attitude of the user.
  • Explore if gamification could add a valuable feature.
  • Undertake more research to uncover scalable problems.

Key Takeaways

For the scope of this project, only potential users were interviewed. However, it would have been valuable to also interview psychology experts to uncover deeper insights and potential solutions for helping people break their bad habits.