Design phase
Exploring milestone tracker concepts.
With a clear understanding of patient scenarios, edge cases, and milestone logic, we moved into exploring how this experience could be expressed in the UI.
• Explored milestone tracker card designs using our existing component library
• Focused on layout and hierarchy to clearly communicate progress and next steps
• Incorporated the milestone breakdown logic defined in earlier phases
• Designed and tested multiple variations, experimenting with different data points and milestone visualisations
Iteration 1: Feedback and learnings
I shared early milestone tracker concepts with the design team to gather feedback, providing clear context and a feedback guide to ensure input focused on usability, hierarchy, and clarity.
To validate the designs with patients, I then conducted usability testing to understand what resonated and where confusion emerged.
What we learned:
• Milestones introduced a strong sense of motivation and gamification
• Some patients struggled to understand where they were in their overall journey
• Feedback was split on the usefulness of predicted dates
• Alignment between the milestone tracker and the predicted journey experience (owned by the Onboarding team) was critical
Iteration 2: Refining clarity and progress
Based on usability testing and design sparring feedback, I iterated on the milestone tracker to improve clarity, focus, and sense of progress.
• Condensed information and reduced competing data points
• Made the milestone progress ring more prominent to clearly signal progress
• Improved how patients visualise and navigate through milestones across their journey
Iteration 3: Final refinement and polish
In the final iteration, I refined the milestone tracker to balance clarity, motivation, and completeness across the experience.
• Enhanced key data points to provide meaningful context without overwhelming patients
• Further developed the milestone progress ring to clearly show both the starting point and end goal
• Refined milestone and goal-weight celebrations to reinforce progress and maintain motivation
Design: Preparing for build
To ensure a smooth transition from design to delivery, I prepared the Figma file for handover with a strong focus on clarity, logic, and build readiness.
• Structured files with clear flows and screen groupings
• Detailed interaction, logic, and animation specs embedded directly in Figma
• Close collaboration with engineering to validate feasibility and reduce ambiguity during build