ZenFlow
Role: UI / UX Designer
Duration: 2 weeks
Tools: Figma, Figma Jam, Jitter
I tackled the project in three phases:
Discovery - The Challenge, Goals and Objectives
Problem Definition - Research Insights, Scope
Design Solution - Competitor Analysis, Wireframes and Prototypes, Design System, Final Screen Designs
The challenge was to make meditation accessible, especially for beginners who might feel overwhelmed by choice. The app needed to be intuitive, guiding users from signing up to starting their first meditation session. Main competitors—Calm and Headspace—set high standards for serene and user-friendly interfaces. I had to design something equally compelling yet distinct.
The primary objective was clear: help users find and play a meditation session after signing up or logging in. But beneath that, there were deeper goals:
- Create a welcoming onboarding experience.
- Simplify navigation, ensuring users can find what they need within seconds.
- Design an interface that exudes peace, calm, and clarity.
I spoke to meditation enthusiasts and beginners alike. A few key themes emerged:
- Simplicity: Users wanted simplicity: A cluttered interface was counterproductive to the calm they looked for.
- Guided Flow: Users appreciated when apps guided them to their first meditation.
- Personalization: Many users valued a personalized experience, where the app suggested meditations based on their preferences.
Based on these insights, I narrowed my focus to a few core features:
- Streamlined sign-up and login process.
- An intuitive home screen with quick access to meditation sessions.
With a clear understanding of user needs, I began the design process, starting with main competitor analysis to gather ideas.
Calm and Headspace were my main competitors in analyzing. Calm’s visual aesthetics and Headspace’s playful tone helped me identify design opportunities. I aimed to merge the best of both worlds—a serene, visually appealing design that felt approachable and easy to navigate.
During the Crazy Eights exercise, I generated quick ideas for each essential flow of the app—onboarding, finding a meditation, and the meditation experience itself. I sketched multiple concepts that explored different ways to simplify the user journey, then circled the best ideas and combined them into one final screen. From onboarding screens to navigation for finding meditations, this exercise allowed me to rapidly visualize and iterate on user-friendly designs, ensuring that every step aligned to create a calming experience.
.avif)
After seeing what competitors do and how they guide users throughout their applications, I created the user flow for the meditation app, which was carefully designed to guide users effortlessly through their journey. Starting with a gentle onboarding process, the flow moves seamlessly into helping users find the proper meditation session with minimal effort.
After designing the user path, I crafted wireframes prioritizing the user’s journey from signing up. Each screen was carefully designed to be both aesthetically pleasing and functional:
- Onboarding Screens: A series of calming, visually appealing screens that introduced users to the app, setting the tone for what’s to come.
- Home Screen: Clean and minimal, with prominent access to meditation sessions. No clutter—just calm.
- Meditate Screens: On these screens users can play specific meditation sessions, allowing them to relax and calm.
- Search option: For an easy and accessible way to find specific meditation sessions.
To create a cohesive and calming experience, I developed a design system that would serve as the foundation for every visual element in the meditation app. This design system ensured that each screen, interaction, and micro-interaction felt consistent, intuitive, and aligned with the overall mood of the app.
After exploring a certain color, I choose a soft, soothing color palette to create a tranquil environment. The choice of colors promotes relaxation and enhances focus, helping users feel at ease as they navigate the app.
I wanted to use minimal and clean typography for good readability and a sense of openness. The selected font provides a calming tone and guides users through the experience.
For each screen, I used a column grid system and an 8 px grid for better alignment, providing structure and consistency. I also used Figma's powerful feature Auto-Layout, which provides tools for creating responsive and flexible layouts. This will also help with communication with developers.
The final screens brought my vision to life. Every detail was crafted to create a calming, functional experience, from the onboarding process to an intuitive home screen. These designs reflect users' need to provide a peaceful digital space for meditation.
