CalmQuest

Developed a web app to support mental wellness through a gamified experience of daily check-ins, mindfulness, and meditation exercises.

TYPE
Web App • Project

ROLE
UX/UI Designer, Frontend Developer

TOOLS
Figma, Illustrator, After Effects, LottieFiles, Next.js

DURATION
Five Months

VIEW DEMO

BCIT students often experience high-stress levels from balancing multiple fast-paced courses in shorter, more intensive programs with heavy workloads. This pressure has led to increased mental health challenges such as anxiety and burnout. Many students struggle to maintain focus and manage their emotions, with some even neglecting their mental well-being altogether.

After researching information on Statistics Canada, we discovered that mental health challenges, including stress, anxiety, and lack of emotional regulation, are becoming increasingly common. In 2022, 21.8% of Canadians aged 12 and over reported experiencing high daily stress—an increase from 20.4% in 2020.

Despite this growing concern, many individuals still struggle to find an engaging way to practice mindfulness and manage their well-being consistently.

How can we help individuals struggling with stress and mental health challenges manage their well-being more engagingly and consistently?

Defining the Solution and Scope

To address the needs and frustrations of individuals facing high stress and mental health challenges, we developed features designed to help users manage their well-being consistently while offering an engaging and effective tool for emotional regulation and mindfulness.

• Personalize Your Experience: Select and unlock special avatars and frames by completing daily check-ins.
• Daily Check-In and Rewards: Check in on your mental health and collect seeds to buy avatars and frames from the shop.
• Mindfulness and Meditation Exercises: Explore quick and calming mindfulness and meditation exercises, links, and videos.

The primary flow of the app for a new user is to complete a daily check-in. We created a simple sitemap to help outline how paths connect and end. This will help organize the app's content and ensure users navigate it smoothly.

Colour Choices

CalmQuest's palette is carefully designed to evoke calmness and promote mental well-being. Light blue and dark turquoise reflect serenity, much like the sky and sea, aligning with the app's goal of supporting emotional regulation. Blue is associated with mental health and connection to the universe and is believed to have positive effects on both the mind and body. These colour choices work together to enhance the app's calming atmosphere.

Final Product, User Insights, and Enhancements

To test the app's functionality and user perception of the interaction design, we conducted a usability test with five participants: four BCIT students and one BCIT instructor.

Testing functionality helps us identify and resolve issues before the final product release, while also refining the app to be more intuitive, user-friendly, and inclusive for all users.

Task List:

• Complete the onboarding process
• Complete one daily check-in
• Customize profile avatar
• Purchase either one avatar or frame from the shop
• Complete one meditation exercise

All participants successfully completed each task.

Each finding was ranked based on its impact on usability, functionality, and user satisfaction. The severity ranking helped prioritize which issues should be addressed first for an optimal user experience. Here's how we ranked each finding:

Low Severity: Lack of Content

• Affected user engagement but didn't impact core functionality. Participants recommended adding more meditation exercises and shop items to enhance variety and engagement.

Medium Severity: Spacing and Stroke Consistency

• Impacted visual appeal but not usability. Participants recommended increasing space in the shop and profile customization pages and removing strokes for better consistency.

High Severity: Onboarding Confusion

• Confusing onboarding can lead to user abandonment. Participants recommended clearer instructions and visual aids to make the onboarding process more intuitive.

Key Challenges

As the lead designer and developer of the app, I had the most in-depth understanding of its functionality, which meant I held the most responsibility for coding. I shouldered much of the technical work, balancing design and development while collaborating closely with the team to ensure progress, divide tasks, and foster mutual support and growth.

Conclusion

Developing the web app has been a valuable learning experience. Driven by our goal to create a supportive and engaging platform for mental wellness, we built an app where users can self-reflect through daily check-ins, mindfulness, and meditation exercises.

In the process, using multiple types of Google Material Design significantly enhanced my understanding of interaction design. The guidelines helped me focus on creating interfaces that were not only intuitive and consistent but also visually appealing, improving the overall user experience.