Our Habits

Role

UX/UI Designer

Timeline

2 months

Tools

Figma | Figjam | Miro | Optimal Workshop

Project Type

End to End Application


Overview

Our Habits, also known as OH, is a habit tracking application that can be used both individually and collaboratively to promote accountability. By allowing users to set and monitor personal goals, OH provides a powerful tool for self-improvement. Additionally, the app features a social feed that encourages users to connect with others, share their progress, and learn from one another.

Background

Design Process


Discover

My goal was not only to gather design inspiration from competitors but also to conduct surveys and gather insights on how people can develop and maintain healthy habits while having a supportive community. By trying to understand the experiences and challenges of individuals in this process.

Research Goal

Competitive Analysis

When choosing what apps to do a competitive analysis on I narrowed it down to ones that were popular, had similar intentions, and a nice visual presence. Overall, these apps had similar features, including habit logging, news feeds, and progress analysis for users to track their journey. One notable aspect that was missing from these apps was a social component, which is a good motivating factor in today's digital age.

Number of Participants: 22

Age Range: 22-60

Overall users answered what type of content they’d like to see, their own goals, and what they’d be most interested to see on a habit social media app. I clustered the main/common points down below in affinity mapping.

Survey Results

Research of Benefits

42%

Research has revealed the benefits of habit tracking.

Writing down goals increases completion rates

70%

Having an accountability person increases success

Source: Research conducted by Ask Wonder

12%

Being reminded of a new habit creates more completed goals


Define

  • There were many users who had similar personal health goals

  • Users want content on the social feed thats about motivation, healthy recipes, goal settings, tutorials, exercise, trails, and being able to connect with friends

Affinity Mapping

Persona

With my persona in mind, my next step was to create a feature roadmap for Our Habits, making sure that I am designing for the user and prioritizing features from must-haves, nice-to-haves, surprising & delightful, and those that can come later. This table helped me manage my time wisely and deliver an MVP.

Feature Roadmap


Ideate

In these task flows, my objective was to ensure that users can easily comprehend the process of creating a habit, as well as understand how to create a post and utilize its settings.

Task Flows

User Flow

A simple sitemap was developed to give us a clear picture of the app's structure. It acted as a roadmap for the app's navigation and outlined the crucial pages and content that had to be included in the design.

Wireframes

After going through several iterations from design critique, I eventually reached a point where it felt just right. My primary focus was on the home screen and figuring out the most intuitive way for users to navigate their habits.


Design

When designing the app, my vision was to have eclectic tones. I understood that sticking to a habit can be tough and might have a negative impact on some users. To counter that, I intentionally chose colors that gave good energy while also incorporating a calming touch. The idea was to strike a balance, creating an environment that feels uplifting and supportive without being overwhelming.

Style Guide

During the high-fidelity stage, my primary focus was to establish a sense of a safe space, enabling users to create habits both individually and with others. I ensured the inclusion of options to enable or disable social media features, as well as the ability to track friends' progress for increased personal accountability.

High Fidelity Wireframe

Home Page

My goal for the home page was to provide a progress bar of each user's progress with their habits. I aimed to create a visual representation that showcased where users were at in their journey. Additionally, I wanted to offer the flexibility for users to collaborate with others or pursue their habits independently, a sense of community and individual empowerment.

Social Media

Acknowledging the controversial nature of social media, I wanted a balance by creating a platform where users could still benefit from tips and insights shared by others. However, I recognized the importance of giving users control over their experience. As a result, I incorporated a feature that allows users to easily switch off the social aspect if they prefer not to participate, ensuring that the app remains a personal and customizable tool for their habits and well-being.

Over View

On the left page, I designed a dedicated section where users can privately track and monitor their own progress. On the right page, I focused on creating a user profile that gives a glimpse of the user's habit completion to their followers.


Test

Usability Testing

  •  The interface was widely praised for being user-friendly and visually appealing.

  • Many users appreciated the unique categories available on the social feed, as they found it helpful for maintaining their health goals.

  • Both the option to create habits individually or with others was well-liked by users.

  • Users found the habit tracker ring on the home page to be a useful tool for monitoring their progress and staying motivated. They also appreciated the ability to see other users progress.

  • Some users found the color scheme of the app to be calming and enjoyable.

  • A few users expressed a desire to have it as an actual app.

  • While most users had positive feedback, one user expressed dislike for the font and social feed, noting that it was their personal opinion.

Number of Participants: 6

Age Range: 24-29

Location: In Person

Usability Testing Feedback

Having a social feed has been the most controversial feature of this app but mostly a positive outcome. I want this app to be as inclusive as possible so I added a feature where you can just simply turn social media off.

Iterations

Iteration #1: Social Feed

After

Before


As I worked on designing this app, I realized the importance of prioritizing user goals for a successful design. I understood that habit sharing is a personal journey and that the social aspects can be sensitive. With this in mind, I made it a priority to create an experience that is inclusive and empathetic. For instance, I wanted to ensure that users felt comfortable and in control, so I provided the option to toggle the social media feature on or off. This approach allowed me to consider users emotions, foster a supportive community, and respect their privacy and personal boundaries.

Reflection