Mobile-App Design

Routinely

Launch date

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.

Problem

How can we keep users’ motivation for habits?

Challenge

  • 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.

Research

5 why

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 everyday.

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.

Conclusion

With tools to compare results, people can keep motivated and maintain their habits.

Literature revision

To understand deeply user 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

Conclusion

There are most important two functions one builds habits, the other one is reminders. The app is helping you to make the habit.
It means if the app can help to build the habit, it’s a good idea.

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 funtionalities.

User Testing

I 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 the familiar and clear words user can recognize

Check the PDF document if you are interested more in the content of the report.

Ideation

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 the audience. The UI process is complex, that is why I will explain in another case in this portfolio.

Learnings