Overview

Outcome

The redesigned HabitHero app clearly communicates user progress and goals to motivate consistent engagement:

• The homepage provides a quick snapshot of daily stats/weekly points

• The dashboard enables goal tracking with instant feedback

• A focused tracking view highlights progress toward daily goals

• Social sharing lets users celebrate achievements

• Visual rewards and incentives further encourage healthy, lasting habits​​

​

My Role

Led end-to-end product design from user research and journey mapping to wireframing, prototyping, and usability testing. Refined the UI with accessibility, color and typography guidelines, and delivered final design for developer handoff.
​

Challenges

Users were unmotivated and found it difficult to track or measure their progress. The existing MVP lacked personalised goals, regular feedback, and clear progress tracking, making it hard for users to stay engaged and committed to building healthy habits.

Research

User Interview

Conducted 5 in-depth, 45-minute interviews with users from diverse backgrounds who are moderately active and use health and fitness apps, gathering qualitative data on their experiences and preferences to understand their behaviors, needs, and motivations.

Top key insights from the interview:

1. Users need a more personalized progress-tracking system

2. Users want visual progress-tracking elements

3. Current reward system in the app is unclear

4. Feedback notifications do not necessarily lead to motivation

5. Social features significantly boost motivation

6. Users want to track different fitness activities

​​

User Persona and Journey Map

From the key insights, I developed user persona and user journey map to better understand user behaviors, goals, and frustrations throughout their interaction.

Visualising the User Journey

User Storyboard​

Created a storyboard for HabitHero's proposed features, reflecting the user's journey and interaction with the app.

​​

User Flow

Created a user flow diagram, focusing on a task a user might want to complete, that illustrates a happy and unhappy path when users interact with the progress-tracking feature of the HabitHero app.​​

Wireframes / Prototype

Low-fidelity Wireframes

I created low-fidelity wireframes where I translated my ideas into a usable interface that clearly communicates my product idea to diverse stakeholders.

​

Mid-fidelity Wireframes / Prototype

I then transformed my low-fidelity wireframes into more detailed mid-fidelity wireframes and prototype that effectively communicates my design ideas for HabitHero's progress tracking feature. ​​​​

Usability Testing

Key findings

Conducted usability testing with two participants to evaluate the effectiveness, efficiency, and overall satisfaction of the HabitHero MVP prototype.

​

The sessions revealed both strengths and areas for improvement. With limited time, I prioritised refining the mid-fidelity prototype based on the most critical insights identified through the impact–effort matrix.

​​

Critical issues:

• Users could share their achievements, but button was not easy to find

• Users were not sure what they were sharing—was it a goal, a reward, or daily progress?

Final Product

High-fidelity prototype

Using insights from usability testing, I refined the experience into a user-centered design that addressed core pain points and produced high-fidelity wireframes and a polished prototype. I also created a complete style guide with the color palette, typography, and logo/icon standards, and prepared detailed handoff notes and annotations to support a smooth developer handoff.

​

View prototype from here