Resolve
A gamified wellbeing experience, track emotions, set goals, and overcome challenges effortlessly.
👤 Product Manager & UI/UX Designer
🕒 September 2024 (9 Weeks)
⭐ Best Creative Product Winner
Project Overview 📘
Timeline ⏳
From explorations to final designs in 9 weeks while working with multiple projects at the same time.
Background 🌍
Resolve is a gamified mental health platform that empowers users to track emotions, access personalized resources, and build healthier habits through engaging quests and challenges.
As a product manager and a UI / UX designer, I applied Agile methodologies to manage sprints and retrospectives, collaborated with stakeholders to align on goals, and designed a user-focused solution from ideation to prototyping and testing.
Achievements 🏅
Resolve won the PIP24C3 Product Showcase: Best Creative Product.
⭐ Click to View Accolade
The Problem 📌
Stress. Anxiety. Loneliness.
Whether or not you talk about it, you’ve probably felt it.
And sadly, we've all had those “man up” moments lingering in the back of our minds:
What if sharing my feelings makes me look weak? 🤐
What if no one will truly understand? 🛑
What if I’m just… honestly alone in this? 💔
Even those who feel vulnerable often face silent battles:
“Can't tell male friends because they don't help ... you almost just continue to live in your isolation because you have no one to relate or care for.”
r/malementalhealth
What if we could reframe what ‘strength’ looks like? 💡
Today, men’s mental health often lives in the shadows of societal norms. Discussions are rare, resources feel impersonal, and supportive communities? Few and far between.
The result? Too many young men bottle it up, feeling isolated and unheard, while the stigma around vulnerability only grows stronger. It’s time for a solution that says: You’re not alone, and your emotions don’t define your weakness—they define your humanity.
The Solution ⭐
Track
Learn
Build
Fight
Resolve is designed specifically for gamers, transforming mental health into an engaging and approachable journey. The app empowers users to track their emotions, access personalized resources, set wellbeing quests, and tackle weekly challenges—all within a gamified platform. By celebrating progress and fostering growth, Resolve helps men take charge of their mental health in a way that feels empowering and stigma-free. 💪🧠
Key Features 📱
Introducing this week's Demon!
Each week, users face a unique demon tailored to their previous mood tracker responses, representing their current challenges.
Every demon comes with personalised strategies and tasks to help users overcome it.
Widget Integration
Take your wellness journey to the next level with Resolve's iPhone widgets, available in three sizes.
The compact One-Click Mood Tracker lets you quickly log how you’re feeling.
The Personal Quest Tracker keeps you motivated with a glance at your daily progress.
For a deeper dive, the Demon of the Week Dashboard showcases your current demon's health, quests, and progress, turning self-care into an engaging battle.
Mood Tracker
Mood tracking and journaling reveals behaviour patterns, enabling early intervention for mental health issues. This also generates data for personalised resources in the Wiki.
Point System
Users earn RP (Resolve Points) through completing tasks which will be used to kill demons
Wiki
Resources
Personalised resources are generated based on users' mood tracker responses and journals.
Types of resources includes articles, videos, and podcasts.
After using a resource, users can evaluate it, helping finetune their resources.
Demons
Users can also read about the demon they're facing that week, and learn about the common effects of the problem and how to defeat it.
Quests
Daily Discussions
Users can also earn RP through quests, such as participating in daily discussions. These community-building prompts allow users to anonymously share their thoughts, respond to others, and view shared experiences.
Personal Quests
Personal Quests motivate users to prioritise their physical well-being too. Users can add personal quests based on the recommended list, or input their own.
Battleground
Defeating the Demon
At the end of the week, users can enter the battleground to defeat their demon using attacks costing RP points.
Personal Quests
Personal Quests motivate users to prioritise their physical well-being too. Users can add personal quests based on the recommended list, or input their own.
Profile
Achievements
Users can view all defeated demons and earned badges, motivating them to unlock more.
Performance Recap: Users may examine their weekly and monthly engagement to monitor their advancement
Mood Stats
Users can view their mood stats over the course of a month
Resolve Plus+
Plus+ members earn points for exclusive rewards like DoorDash and UberEats vouchers, enjoy 2x points, and get an ad-free experience.
The Design Process ⏳
I used the Double Diamond approach to design thinking, guiding the project from discovery and research through to ideation, refinement, and the final high-fidelity prototype.
Discover 💭
Primary Research Plan
We set out to explore men’s mental health by diving into their experiences, attitudes, and behaviours through a triangulated primary research approach, including online surveys and interviews:
In total we conducted:
What were out findings? 💡
Affinity Mapping
Using thematic analysis and an affinity diagram, we synthesised our research findings, uncovering three key insights that deepened our understanding of young men's mental health challenges and guided our problem definition.
Define 📝
Problem Statement
Cultural and societal norms have distorted young men’s perception to equate strength with emotional suppression. The stigma around mental health creates a lack of supportive communities and superficial resources, which disempowers men from pursuing self-care. If unaddressed, men may continue struggling with emotional isolation and loneliness, leading to heightened risks of depression, anxiety, suicidal ideation due to disconnection with themselves and others.
Competitor analysis
We evaluated existing solutions on the market, which helped us uncover opportunities and gaps for innovation.
Gaps in the Market
Data Synthesis 🖼️
Persona and User Journey Map
We finally mapped our user's behaviours, challenges, and pain points to design a more impactful and user-centered experience.
Develop 🛠️
Ideation Process: Crazy 8s
How Did We Decide the Best Idea?
We constructed a decision matrix to assess each concept based on a range of criteria, such as user engagement. Among the options, Concept One (Resolve) emerged as the highest-scoring idea, thanks to its strong alignment with our user needs and its potential to empower individuals through personalization and gamification.
Decision Matrix
To strengthen Resolve, we incorporated the best features from the other proposed ideas, creating a unified solution that retained its core values while leveraging additional benefits. This is reflected in our low-fidelity prototypes.
Prototyping
Our team conducted 3 rounds of testing, progressing from low-fidelity to mid-fidelity and finally to high-fidelity prototypes.
Sketches
We began the prototyping process for Resolve with preliminary sketches that directly provided a visual roadmap, seamlessly guiding us into the development of our low-fidelity wireframes.
User Flows
Guided by advice from our industry mentors, we shifted our focus to the user's pain points and challenges, starting with user flow diagrams to ensure our designs were purpose-driven and aligned with user needs. To achieve this, we constructed five distinct user flows that captured the key interactions and journeys users would take within Resolve.
Retrospective 💡: While creating user flows required us to backtrack in our agile process, it proved to be an invaluable step. This shift not only added clarity and intention to our design process but also streamlined the overall timeline, making subsequent stages far more efficient and cohesive.
Wireframe - Low-Fidelity Prototypes
Using Figma, we then moved on to iterating on wireframes, experimenting with the visual and informational hierarchy. This step allowed us to refine how UI patterns could best support these journeys, ultimately leading to the development of a primary conceptual user flow that effectively addressed key user pain points.
To visualize the entire platform, we constructed a full set of wireframes, showcasing how all features and screens came together to create a cohesive user experience.
Retrospective 💡: While creating the wireframes, we initially invested too much time and effort without fully utilizing Figma's capabilities, such as auto layout and components. This oversight became apparent during the end-of-week sprint retrospective, where we identified inefficiencies in our approach. As a result, we had to revisit and refine the wireframes later, which added extra workload but ultimately improved the consistency and functionality of our designs.
User Testing
What did our experts and participants think?
After finalizing the wireframes, we moved into the user testing phase, where we sought valuable insights from both participants and experts to assess the usability and effectiveness of the design.
Think-Aloud Interviews
Participants 🧑🎓
We recruited four young men who are gamers, aligning with our target audience. Their familiarity with gamified systems provided actionable insights into the app’s usability and overall appeal.
Tasks 📋
Participants were asked to complete three tasks: journaling, engaging in a quiz, and tracking progress. Afterward, they rated the difficulty of each task and offered open-ended feedback about their experiences.
Modality 💻
A hybrid approach was used:
In-Person: For direct observation and contextual feedback.
Discord: For remote testing with think-aloud commentary to capture real-time insights.
SUS Score & Iterations
The average System Usability Scale score was 68, indicating room for improvement. Feedback identified key areas for iteration:
Key Iterations
Simplifying user interaction with the widget
Visibility of system status, User Control
The podcast listen button was removed from the main screen, as it made little sense since there were no plans to incorporate podcasts. Participants were confused and unaware of its purpose. To make it more relevant, I replaced the button with quick actions that lead to the dashboard and quests.
"I had no idea what the podcast button was for."
Reducing users' cognitive load when tracking mood
Help & Documentation, Recognition Rather than Recall
In the mood tracker, users struggled to interpret too much information at once, and the emotion selector was too complicated. To simplify the experience, the tracker now displays less information, with each section highlighted in bright, vibrant colours for better visibility and focus.
"Why is the mood selector so complicated for?"
Retrospective 💡: During the prototyping phase for Resolve, we went through several key iterations. When we asked participants for feedback, it was humbling to see the differences between their interpretations and what we had intended. This revealed not only the gaps in our design but also the psychological nuances in how people interact with interfaces. Understanding these discrepancies helped us refine the app to meet user needs more effectively, making it clear that design is as much about empathy and understanding behaviour as it is about visuals and functionality.
Deliver 📦
High-Fidelity Prototyping
Expert feedback and relevant participants were involved at every step of the design process, resulting in a high-fidelity, interactive prototype of Resolve.
After rigorous testing, I carefully assessed and applied the most relevant feedback, balancing user needs, the minimum viable product, and development time constraints. The initial user flow was refined and translated into an interactive Figma prototype, delivering a realistic, seamless user interaction while showcasing the app’s thoughtful visual design.
Retrospective 💡: This experience taught me to balance creativity with practicality. With a focus on crafting an immersive app, I also had to manage constraints, timelines, and user expectations. While challenging, it was rewarding to see how Resolve evolved into a polished prototype, ready to empower users in their mental health journey. This process has been invaluable in shaping my ability to adapt, iterate, and lead with purpose.
Success Metrics
The Final Product ⭐
Resolve: Turn your mental health journey into an adventure!
Track your emotions, take on personalised quests, and conquer weekly challenges with Resolve. This gamified platform celebrates your progress, providing tailored resources and transforming self-care into an empowering and engaging experience.
Brand and Visual Identity 🖼️
Visual Approach
Blending playful gamification with bold, approachable design, Resolve’s visual identity transforms mental health into an engaging and empowering journey.
Playful Gamification
Resolve's design is built on vibrant, gamified visuals that encourage engagement and make mental health feel less daunting. Elements such as the bold primary palette, shield icons, and "demon avatars" embody resilience and self-discovery, emphasizing empowerment through progress and action.
Approachable Characters
The distinctive 2D character designs are crafted to resonate with Gen Z men, embodying a mix of simplicity and charm. Each demon reflects relatable mental health challenges, making the abstract feel tangible, while the "Resolve" mascot adds a sense of encouragement and companionship.
Style Guide
Building Resilience in Men and Gamers through Resolve's Visual Identity
Departing from generic mental health app aesthetics, the visual identity combines calming blues with bold, energetic accents to evoke a sense of determination and growth.
Key elements like the Poppins typeface, standardized icons, and high-contrast visuals ensure clarity and usability, fostering a seamless and welcoming experience for all users. This approach underscores Resolve’s mission to empower men and gamers to confidently engage with mental health resources.
How Do We Compare?
Resolve sets itself apart by combining gamification, community building, and a focus on young men, ensuring a tailored and engaging mental health experience.
Personal Reflection ✨
Balancing the dual roles of product manager and UI/UX designer was a challenging yet rewarding experience. Leading the team while also stepping in to design each step of the process stretched my abilities, but insights from mentors helped me step outside the rigid double diamond structure and embrace the importance of iterative backtracking in design.
Leadership Challenges
This project was a profound learning experience, forcing me out of my comfort zone in both leadership and creative decision-making. Balancing differing ideas within the team was challenging, but I quickly realized that sometimes it’s necessary to steer the team in a focused direction. It wasn’t always easy, but I discovered the importance of clear communication to ensure everyone felt heard and aligned with the final outcome.
Growth as a Decision-Maker
Stepping into a leadership role made me understand the value of decisiveness while fostering collaboration. As someone who strives to keep everyone happy, I learned that it’s impossible to satisfy every idea and that it’s okay to take a firm stand. Communicating my decisions in a constructive way was a key lesson, and it helped me ensure the team stayed motivated and proud of the end result.
Next Steps ⏩
If Resolve were to be further developed, I’d love to see:
