CalmQuest
A mental wellness web app where users can self-reflect about their day.
Project Overview
CalmQuest is a mental wellness web app where users can complete daily check-ins, and mindfulness and meditation exercises. The user will be able to collect currency rewards after completing a daily check-in.
Concept Design (5 months - UI/UX Designer)
Brainstorming and Ideation
In the first week, it was required to come up with an informational web app. This led to the idea of a mental health app. For the duration of five months, the design process evolved from initial concepts to final testing and editing. This phase focused on exploring ideas, refining concepts, and iterating on design solutions to create a user-centric product. Continuous brainstorming and ideation also played a key role in shaping the final web app.
App Selection
CalmQuest was created as the solution to address rising mental health challenges. With an increasing need for an engaging and accessible tool for daily mindfulness and self-reflection, the app was designed to support mental well-being. According to Statistics Canada, perceived life stress is becoming more common. In 2022, 21.8% of Canadians aged 12 and over reported high daily stress, higher than 20.4% from 2020. This data highlighted the importance of providing a resource to help users manage stress and anxiety effectively.
Title Design
The title "CalmQuest" was crafted to be bold and inspiring, encapsulating the mission with the phrase, "The quest to conquest stress for a calm mind." This title sets the tone for the entire app, inviting users on a proactive journey toward reducing stress and achieving mental calmness. It reflects a commitment to empowering individuals through mindfulness and self-reflection.
Branding & Messaging
The branding creates a strong visual identity with clear messaging. The flower icon symbolizes calmness and growth, while the color palette features blue for tranquility and reliability and yellow for happiness and positivity. This design reinforces the goal of providing a safe, engaging space for mental well-being and encouraging daily mindfulness practices.
App Interface & Visual Design
The app’s interface was designed with the user in mind, using detailed user profiles and a style guide to maintain consistency. Interactive prototypes and mockups were created to highlight key features. These include personalized avatars and frames that can be purchased with seeds, which are earned through daily check-ins and completing mindfulness and meditation exercises, such as quick routines, helpful links, and videos.
CalmQuest Main Screens
Starting Screen
Refining & Finalizing the Design
Fine-Tuning
User testing played a crucial role in the final phases. While most testers had a positive experience, some users had obstacles, such as confusion during onboarding and visual inconsistencies. In response, onboarding instructions, visuals, and the user interface were improved based on user feedback. This process ensured the final design aligned with both CalmQuest’s brand and the functional needs of its users.
Editing
In the final editing phase, the user interface was polished and content was refined to be consistent throughout the app. Every detail, from typography and layout to interactive features, was adjusted to align with the brand vision and style guide. These final refinements, based on comprehensive testing feedback, resulted in a cohesive, intuitive, and engaging user experience.
Software Used
Figma, Adobe Illustrator, Next.js, GitHub, Vercel