New Leaf
// Mental Health Mobile App
Timeline
Nov - Feb 2025
Tools
Figma, Figjam
Role
UI/UX Design, Branding, Research, Personas, User flow, Wireframing, Prototyping, Usability testing
PROJECT OVERVIEW
As part of my UI/UX bootcamp with DesignLab, I created New Leaf, an application designed to help those who struggle with mental health challenges.
​
New Leaf is a direct reference to the idiom “turning over a new leaf,” symbolizing a fresh start and a renewed perspective for individuals starting their mental health journey.
PROBLEM
Despite recognizing its importance, only 30% of people prioritize mental well-being. A surprising 20% of US adults face mental health challenges. Overlooking mental well-being is common because it seems to be extra effort, help, or learning coping strategies. With busy schedules, it’s difficult to prioritize well-being, leading to stress, anxiety, depression, and other challenges.
- A Kaiser Family Foundation (KFF)/CNN Survey 2022
- Aetna
SOLUTION
New Leaf aims to help users improve their mental well-being by exploring new mental health strategies. Despite the challenges of maintaining motivation, this platform accommodates users’ busy schedules by allowing them to schedule a strategy for a later time and by quickly accessing the tools and resources they need.
- National Institute of Mental Health (NIMH)
The Design Process
Empathize
USER INTERVIEWS
I interviewed four participants who all face mental health challenges, but do not prioritize self-care into their routines. Uncovering the reasons as to why, helped me gain an in depth understanding of the participants' backgrounds and struggles so I’m able to find effective ways to help fill their needs and achieve their goals.
Key takeaways
Busy schedules and feelings of exhaustion prevent individuals from incorporating self-care into their routines.
Engaging in additional activities such as gym workouts or being with friends/family fill up their schedules, leaving little to no time to prioritize their mental well-being.
Simplicity and user-friendly features are important to ensure that tracking mental health does not add to their time constraints.
COMPETITIVE ANALYSIS
I compared three well-known mental health applications which helped provide key insights to clearly show the factors that contribute to their success or failure.
Headspace
MyPossibleSelf
Mindshift
Challenges
Need to include more mental health topics for the user to explore, difficulty with navigation, lack of teaching styles with meditation and current practices.
Strengths
Wide range of sleep and meditation content, provides accurate data, up to date with current trends, user-friendly design, easy to track progress and goals, and different types of support such as peer support, therapy, or crisis support resources.
Define
USER PERSONA
By creating a user persona, I gain insights into the actual users’ needs, goals, and frustrations. Through empathy, I can provide a more meaningful user experience. The objective is to identify effective strategies to address the users’ needs and pain points, based on the user persona that has been created.
POV STATEMENT
I am interested in exploring methods to support adults struggling with their mental health in discovering accessible and effective strategies with tools and resources for managing their challenges despite long work hours and demanding schedules.
HMW QUESTIONS
-
How might we better the accessibility of tools and strategies that support improved mental well-being?
-
How might we assist adults with demanding schedules in prioritizing their well-being and mental health?
Ideate
USER FLOWS
Creating this user flow helped show the user journey and their potential decisions when going through two tasks: Log in/sign up and adding a mental health strategy to their schedule.
Creating a task flow helped me understand and visualize how the user would go through one specific task. By mapping out these specific steps, it helped with identifying any potential roadblocks the user might face.
MID-FIDELITY WIREFRAMES
With mid-fidelity wireframes, I can concentrate on the layout and hierarchy without being distracted by aesthetic details. This stage is crucial for obtaining feedback and making modifications before moving forward.
Prototype
HIGH-FIDELITY WIREFRAMES
With incorporating the design choices to the mid-fidelity wireframes I’m able to see a clearer representation of the final product. It’s important to stay true to the brands identity and values by staying consistent with the content and style throughout the application. By creating these wireframes, I'm able to move forward with prototyping and effectively bring these designs to life.
STYLE GUIDE
The main objective of the logo design was to convey two meanings. The green ribbon, a symbol of mental health awareness, represents support for individuals coping with mental challenges. The incorporation of a leaf in the center symbolizes growth, hope, resilience, and transformation. The overall message is to evoke a sense of empowerment and resilience, encouraging users to embark on a positive mental health journey. New Leaf’s goal is about personal growth, seeking long-term peace, being vulnerable, and recognizing the power of change.
Test
USABILITY TESTING
The goal of this test is to understand how users navigate and complete the tasks within the app. I want to see if there’s any confusion with locating resources/topics/strategies and how smooth and quickly it is to add it to their schedule. The tasks include signing up/picking topics, finding more topics from home screen, and lastly adding a strategy to their schedule.
​
Participants felt the overall look was visually appealing and clean. They liked how simple it was to navigate through and most enjoyed the personalization throughout the application. Some participants mentioned they would change some details regarding the adding strategy screen.
Before testing
After testing
Participants felt that adding the description of the strategy wasn't necessary when adding it to their schedule
Expanded the "leave a note" box to give the user more space for their notes
FINAL PRODUCT
Conclusion
KEY TAKEAWAYS
Empathizing with the user: Understanding the users pain points, needs, and goals allows the designer to be able to provide a better user experience, reducing confusion and frustration
Testing and feedback: These steps throughout the design process are necessary for designers so that they are able to identify any issues and make improvements to the design.
Accessibility: It’s crucial that the design is inclusive and accessible to everyone, including individuals with disabilities.