Mobile-App Design

Routinely

Project live at

Developing now

Duration

3 months for design

Team

UX Designer (My role)
Two Developers

Overview

Collaborated with developers, to create an iOS mobile app for habit tracking.

The app helps you to build and maintain your habits. This is a valuable tool for anyone looking to build habits, improve productivity, or maintain consistency in their daily routines.

Goals

  • Show an easy flow of building habits to support users.
  • Create an app that can manage and track your habits.

Why are people giving up their habits?

In the market, there are dozens of products or services to help users keep their habits. But how many users are giving up on maintaining their habits while using a product. We start to identify how can we keep users’ motivation for habits.

How can we provide a solution for different purposes?

It’s a big challenge how can we provide a solution for different purposes which are “habit” or “task”. When you use a habit tracker, you might have different ways to use it like making a habit or making a task that is only one time to do.

Identify the underlying cause using the 5 Whys

First, started thinking about “Why is difficult to keep the habit” to identify its root cause.

Why is it difficult to keep the habit?

Over time, the initial motivation that led to the adoption of the habit waned, making it harder to stay committed to the routine.

Why is it difficult to stay motivated?

Because when the desired results don’t come quickly, it’s easy to lose motivation and feel discouraged.

Why do they feel discouraged with not quick results?

Because they’re not aware of their small success every day.

Why are they not aware of their everyday success?

Because it’s difficult to compare past successes with what happened today.

Why is it difficult to compare the past and the present?

Because people need tools to understand if they’re going to succeed in their long-term goals to stay motivated.

The key point is…

By using tools to compare results,
people can stay motivated and maintain their habits more effectively.

Understand deeply human behavior through studies

To understand deeply human behavior and the relationship between apps and habits, checked scholarly articles. At this time, I found two interesting articles which are “Don’t Kick the Habit: The Role of Dependency in Habit Formation Apps” and “Beyoung Self-Tracking and Reminders: Designing Smartphone Apps That Support Habi Formation”.

  • Don’t Kick the Habit: The Role of Dependency in Habit Formation Apps
    PDF document / Resource
  • Beyoung Self-Tracking and Reminders: Designing Smartphone Apps That Support Habi Formation
    PDF document / Resource

The key point is…

There are most important two functions one builds habits, the other one is reminders. If the app helps you build the habit effectively, it’s a strong indicator of its value and success.

Explore the market with Competitor Analysis

The report was made to know what kind of functions are common in the market checking the competitor analysis from 8 apps with a similar purpose. I also considered the limitations of the free versus paid functionalities.

Identify the user’s current problem

Conducted user testing with 5 users and checked the users’ behavior after giving them two main tasks which are “Build a habit” and “Set a reminder” in three competitor apps.

Summary of key findings:

  • Visuals to follow the habit must include a calendar
  • Set repeating tasks is crucial for building habits
  • Users expect individual control for each task
  • Guide the users by using the explanation section
  • Using familiar and clear words users can recognize

💡 If you are interested in more, here is the PDF document.

Task Flow – 1st visit

I learned what kind of functions we need from research, so the next step is to consider how we organize each function such as “whether is it the same hierarchy?”, “how does the user’s choice relate to habit setting?”.

First of all, I made a task flow for the first visitor to understand visually how users act when they start using the app for the first time.

In this step, I was able to understand which functions are used in which part of this process, and I could separate the habits and the tasks by using the repeat function or not.

Information Architecture

So the next step is to think about what kind of content we need for each function page. I made IA logically organized for users more easily understand and find what they’re looking for.

Scratch

Based on IA, started the scratch with a blank canvas to focus on the fundamental layout and structure of the interface without getting distracted by visual details, and wrote down each page layout on one or two sheets of paper to explore various concepts.

After drawing wireframes by hand, transformed them into a Figma file and made wireframes and prototypes that are 6 mobile app layouts for different concepts such as “being more customizable”, “avoiding navigation”, and “focusing on daily tasks”.

After using each prototype, I wrote down parts that contradicted the design decision and parts that were different from my expectations and came up with a new layout.

Final Design

In this project, we focused on only iOS and dark mode design because of the budget and our target audiences. The UI process is complex, which is why I will explain in another case in this portfolio soon.

👇 Interact with the prototype below