Mack Seah | UI/UX Portfolio

4:04 am

Projects

Badges

Home

Projects

Resume

About

my role

Sole UI/UX Designer

target user

Healthy 365 Users

project details

Project Type: End-to-end feature + Badge Designs

Industry: Health, Fitness

Tools: Figma, Figjam, Maze, Adobe CC

Duration: July 2024 - March 2025

Description

The Badge Rewards module introduces recognition and incentives within H365 through non-tangible badges, complementing existing rewards like Healthpoints and vouchers. These badges aim to celebrate achievements, spark intrinsic motivation, and support lasting healthy habits. The design challenge is to lead the UI/UX for Badge Rewards—including the Badge Album, a centralized badge hub, and socially shareable badge types.

Key Challenges

How might we celebrate user achievements to encourage sharing and recognition?

How might we boost intrinsic motivation through progress and satisfaction?

How might we use badges and Healthpoints to drive lasting healthy behaviours and reduce costs?

How We Got Started

A summary of the landscape research informing the key features and design direction of our initial concepts.

Demonstrates a vertically stacked organization for badge collections, navigable horizontally via a carousel interface.

Illustrates the arrangement of individual badges within a selected collection, consistently presented in a three-column grid layout.

Highlights the motivational impact of visually presenting user progress on dashboards to encourage intrinsic engagement.

Badge Album UI Progression

Click the buttons below to step through the different Badge Album UI iterations. You'll see the design rationale and the context that drove the changes in each version.

Badge Album Change log

Based on landscape research.

Removed [Latest Badge] and [Longest Streak] from Overview to simplify it and improve visual hierarchy of Badge Albums.

Added profile icon for gamification; users can pin badges or personalize their display picture.

Improved visual appeal of Badge Album cards.

Highlighted [Total Badges] statistic as the main measurement of user progress.

Simplified Badge Album card design due to feedback that albums won't have representative badge/icon.

Added recent badge card to highlight user achievement and motivate them.

User Testing & Stakeholder Feedback

Based on our user testing and stakeholder feedback, we've learned a couple of key things. Firstly, users are less concerned with the specific types of badges they earn and more interested in seeing them organized according to concrete metrics, like the number of steps taken or their MVPA score. Secondly, stakeholders have indicated that the current method for displaying badges might not be widely adopted across different programs and that the associated design costs for this initial version are too high given the limited number of badges available.

How might we organise badges in a way that clearly reflects user progress based on specific metrics?

How might we design a badge display that is cost-effective and easily adaptable across various programs?

How might we create a valuable and engaging badge experience for users at launch, even with a limited number of badges available due to low initial adoption by program owners, while avoiding over-designing the display?

Cutting Down for MVP

For our initial launch (MVP), we've opted for a simpler design to tackle the immediate challenges we identified. However, we're keeping the more intricate design concepts in mind for a potential phase two implementation.

Original
Version

MVP
Version

So Much More to Uncover

The badges project has a wealth of developed features and continues to evolve. This overview doesn't capture everything. Contact me to learn about the existing advancements and future plans. For now, please take a look at the designs we've created so far.