Lifelign App

A habit tracking app that helps you commit to eating, exercising, and sleeping well. 2nd Place Runner-up at UX University 2020.

Year
2020
Role
Product Researcher and Designer
Key Skills
User Research, Visual Design, Prototyping
Responsive image

Context


Responsive image

Problem

Quarantine has drastically upended people's sense of time. Because of this, they struggle to maintain healthy habits.

Responsive image

Brief

Lifelign is a habit tracker app centered on three core needs: food, exercise, and sleep. It is designed as both a schedule where people can time block their habits, and a journal where they can reflect on their progress.

Responsive image

Target

Lifelign was designed for Gen Z and Millenials who desire to have healthy habits, but struggle with the motivation and discipline needed to sustain them.


Solution Overview


Responsive image

Schedule Habits

Create daily schedules for your habits, and set reminders for them.

Responsive image

Write Notes

Note how habits are affecting you, so that you can learn from them.

Responsive image

Analyze Progress

Complete and skip habits to your liking. Track your consistency to keep you going.


Research

Interviews

Interviews were conducted with college freshmen and an early career architect. All were at varying levels of fitness. I asked them about how they keep fit through exercise and other activities, other ways they stayed healthy, and how their lifestyle was affected by quarantine. I gained the following insights:


date_range

Routines are Crucial

Contrary to my assumptions, most of my interviewees were actually exercising more during quarantine. This was due to them making time for it in their schedules.

supervisor_account

People are Influential

To get critique or support, the interviewees would show pictures of themselves to friends and family. They also helped keep the interviewees' fitness accountable (e.g. group workout calls).

loop

Habits are Interdependent

The way the participants ate and slept affected their energy during exercise, and vice versa.


Pain Points

The last insight made me realize that tackling other habits were needed as well. Thus, I decided to make my case study a tracker for healthy habits. I then determined the following:


schedule

Time Management

The interviewees who were exercising more during quarantine said this was because they finally had the time they didn't have in the past. But could this habit become sustainable? What would happen when their daily commitments returned?

track_changes

Tracking is Tedious

Everyone wasn't big on tracking. Most of them tried standard apps like MyFitnessPal, and eventually abandoned them; two of them also used considerably inefficient methods (i.e. writing on Notes, leaving tabs open) for saving workouts they liked.

live_help

Mindfulness

Everyone also struggled with overeating at times; this was most likely affected by their lack of tracking.


Job Stories

When I commit to a healthy fitness/eating/sleep routine...

  • I want to receive reminders so that I won’t forget it.
  • I want to let others know about it so that they can keep me accountable.
  • I want to have a schedule for it so that I have a structure to guide me.
  • I want to track my progress so that I can see whether I’ve improved/regressed, and stay motivated.

Personas

I created 3 personas that each lacked a specific healthy habit.

Responsive image Responsive image Responsive image

Journey Map

These journey maps were based on the 4 stages of competence, which was used as a framework to illustrate how all the personas struggled to build a healthy habit, whether it be for food, exercise, or sleep.

Responsive image Responsive image Responsive image

Experience

Competitive Audit

For reference, I analyzed existing apps for habit tracking and healthy eating, taking note of what they all had in common. This helped me develop the main features of Lifelign (i.e. schedules, tracking, analytics).

Responsive image

User Flow

I initially came up with an ambitious user flow for the app's onboarding. However, while working on the app, I realized that this was impossible to prototype in Figma. Because of this, I made the app's entire user flow more realistic for my capabilities.

Responsive image

Sketches

Responsive image

Interface

Design Rationale

I wanted the app's identity to be friendly yet earnest. As a result, its look was minimalist (e.g. mostly white, sans serif font); that way, important elements such as habits became the focus. These were highlighted by using our main color green (symbolizing growth), along with simple icons and illustrations.

Responsive image

Visual Design


Responsive image
Responsive image
Responsive image

Onboarding Screens

Responsive image
Responsive image
Responsive image

Adding Habits

Responsive image
Responsive image
Responsive image

Completing and Skipping Habits

Responsive image
Responsive image
Responsive image

Writing Notes

Responsive image
Responsive image
Responsive image

Progress Analytics


Result

Testing

Due to being pressed for time, I decided to make my usability testers 2 of my siblings, who were both Gen Z who struggled with healthy habits. They both tested the prototype on an iPhone 6 with Figma Mirror.


format_list_numbered

Quantitative

A simple guerilla testing sheet was used, grading their responses from a scale of 1-3 (1: not able to perform the task at all; 2: able to perform the task but struggling with issues; 3: able to perform the task quickly).

chat

Qualitative

Once testing was done, I interviewed them with questions based on validity (e.g. "Would you use this app?") and user feedback (e.g. "What's the hardest part of this app?").


Insights


touch_app

Usability & Accessibility

The biggest critique I got from both testers and judges was the difficulty of using the app. A color scheme with a lack of contrast and small texts being lightweight led to a lack of readability. People also found the app's user experience clumsy, with instances like navigation icons being hard to press, and carousels requiring tapping instead of swiping.

emoji_emotions

Motivation

I missed out on designing notification reminders, which are a core part of the habit building process. If I got to work on this, I'd have the app send notifications during periods of inactivity (e.g. missing out on scheduled lunch). One of my testers recommended that the app should be like an optimistic coach. For this, I'd design the app to have a personality, which would be shown in both visuals (e.g. a mascot, like Duolingo and Woebot) and copy (second person POV).