The HabitHero app, developed by PrimeCare, is designed to make healthier choices the easier choices.
Through goal-setting and active participation, users can earn points towards rewards that support their health journey.
This aims to empower users to take control of their health, by turning positive behaviours into lasting habits - effortlessly, anytime and anywhere.
After the initial discovery phase, I uncovered users need for a health-tracking experience that is socially engaging, visually clear yet comprehensive, and personalised.
The challenge in this stage was to translate these insights into intuitive, engaging, and user-centric design solutions - improving the progress-tracking features and UI to address user pain points while aligning with PrimeCare's objectives of MAU through increased user acquisition and retention.
Timeline: 10 weeks (2025)
I led the end-to-end design process - from ideation and prototyping to usability testing and iteration. I effectively balanced creativity, usability, and feasibility while continuously validating ideas through user testing..
My objectives were:
Translate user insights into meaningful design opportunities through storyboarding, user flows, and early sketches.
Prototype and iterate using low-to-high fidelity wireframes grounded in usability principles and accessibility standards.
Conduct usability testing to validate design decisions, uncover pain points, and inform meaningful iterations.
Deliver a high-fidelity prototype and style guide ready for developer handoff, reflecting user and business goals.
I created a storyboard to illustrate how my persona interacts with HabitHero’s key features - focusing on social elements and personalised rewards, which research showed are most crucial for user engagement.
However, I also considered auxiliary insights like holistic health tracking, flexible goal setting, and clear feedback to ensure the redesign supports both user needs and PrimeCare's goals.
The storyboard helped form a clear, visual narrative of the user's experience and contextualise their goals, actions and emotions. This provided a clear foundation for creating user flows that reflected realistic user behaviours.
Building on the storyboard, I created 2 user flows that map key journeys within the app, with one focused on short-term tracking, the other on long-term motivation. Each flow included a happy path and an alternative/unhappy path to consider and design for various user scenarios.
Flow 1 covers the task of logging a completed run and optionally sharing their progress with the app community
Flow 2 follows the process of setting a new running goal and selecting a reward from a selection based on user preferences.
Together, these 2 flows capture different but interconnected aspects of the user journey, helping ensure a seamless experience that meets diverse needs and fosters lasting engagement.
Using Crazy 8's method, I created a range of low-fidelity wireframes that explored multiple design ideas for each step in the activity-tracking experience, and conducted a competitor analysis for inspiration and gaps in the market.
Using hand sketches and Figma, I generated clear variations of the core experience from; homepage → personalised goal setting → activity logging → goal history → rewards → social community.
These wireframes brought to life the key new features of a supportive social community and personalised rewards, while also ensuring users could customise their experience, track/view holistic health information, set flexible and personal goals, and receive clear, actionable feedback throughout the app.
I translated my low-fi wireframes into an interactive mid-fidelity prototype, focusing not just on refining functionality but on designing with empathy and purpose.
Every design decision aimed to help users achieve their goals with ease and enjoyment, while accommodating diverse needs and preferences. To support this, I created an accessibility checklist based on WCAG guidelines and applied psychology principles, cognitive models and interaction design to ensure an intuitive, inclusive experience.
This step was crucial in preparing for usability testing, ensuring the design was clear, engaging, and ready for meaningful user feedback.
I facilitated 2 usability tests with target users, asking them to complete 8 tasks ranging from basic navigation to core interactions such as logging activities, checking progress statistics and setting goals. I also tested the enjoyment of new features like personalised goal adjustments, rewards, and the community.
I gathered qualitative and quantitative data;
I asked SEQ after each task to measure the perceived task difficulty
I calculated the average time on task to measure task efficiency
I used a traffic light system to categorise qualitative feedback
Together, these metrics helped me pinpoint key usability issues, prioritise improvements, and track the impact of design changes.
I saw a negative correlation between time on task and ease of use - i.e. the longer tasks felt more difficult;
Tasks like accepting dynamic goal suggestions, selecting rewards, and posting in the community were quick, suggesting these flows are intuitive.
The other tasks took a bit longer likely due to minor usability issues. However, most of these could be quickly fixed and retested
A critical issue was the concept of setting reward preferences, with users spending too long or not even completing the task. But since this feature is very unique and marketable, correcting this flow and showcasing it effectively became my top priority.
Other lower priority issues mentioned in qualitative feedback were documented in a product backlog for the future. The prototype was reiterated to integrate the high priority feedback and address critical user pain points, ensuring a user-centered design;
Replaced percentage completion status with numbers to improve progress clarity.
Added text to icons to clarify functionality
Provided clearer explanation of the concept of reward personalisation as this is a unique marketable feature
Made goals clickable, in addition to the ‘+’ button, to offer an intuitive way to log activities.
Adjusted button designs and placements to eliminate confusion between similar functions.
Added discard modals to prevent accidental activity data loss.
Included confirmation prompts to enhance feedback on key actions, like selecting the next reward.
Linked notifications with goal update suggestions to improve visibility and engagement.
Removed the redundant rewards 'path' to simplify the rewards interface and minimise user confusion
Optimised UI elements, reducing unnecessary complexity and improving app performance.
I created a 1-page Figma style guide to define the app’s visual identity and ensure consistency and accessibility:
Using colour psychology and accessibility principles, I selected blues and greens as primary colours to evoke trust, growth, productivity. With yellow as an accent to add enthusiasm/energy - also aligned with PrimeCare’s brand identity.
I defined a cohesive icon style with usage and sizing guidelines
I selected Kumbh Sans typeface for its readability and clean aesthetic, accompanied by clear font size and line height rules for headings and body text.
I applied a 4-pixel grid system and auto layout to support a smooth, consistent experience.
I detailed rules for text fields, selectors, and buttons (across all states), ensuring inclusive usability.
I also introduced overlays and subtle micro-interactions to offer clear, non-intrusive feedback and improve navigation.
To support a smooth transition to development, I created detailed hand-off annotations in Figma, logically sectioning screens, outlining the purpose, key user flows, and highlighting contextual functionality, behaviour specs, and interaction logic. These annotations ensure developers have clear guidance, the design intent is preserved and user needs are effectively translated into the final product.
My work on the HabitHero redesign had meaningful impact on both user experience and business value, by transforming research insights into thoughtful, accessible, and strategically aligned UI solutions. By integrating key user needs—like personalisation, motivation, and social connection—into core features, I created designs that support long-term engagement and thus healthy behaviours. This directly supports key north star metrics like increasing MAU, acquisition, and retention, helping PrimeCare grow its user base while staying true to its mission of empowering healthier lives.
Given more time, I would conduct another round of usability testing with the high-fidelity prototype to validate design changes and assess the visual and functional experience as a whole - ensuring continuous optimisation. Despite this, this project strengthened my end-to-end product thinking, deepened my understanding of interaction and accessibility design, and developed my ability to clearly communicate and collaborate with both users and cross-functional teams.