Ember

They need to understand how to practice in a way that aligns with their body and lifestyle before the session even starts.

From my research, I developed two moodboards and explored two creative directions before moving into wireframes.

My instructor noted they weren't dramatically different from each other, which is honestly fair. But the exercise clarified my visual thinking and gave me a foundation to build from.

Next, I sketched lo-fi wireframes by hand, intentionally keeping them rough to avoid jumping to visual decisions before the structure is ready.

From there, I built out a full component library in Figma: text styles, color styles, and reusable components to carry the visual system through every screen.

Each course contains roughly five short lessons with embedded questions, both clarifying and quiz-style, culminating in a 60-second guided practice.

Each lesson is intentionally short, consistent with Miller's Law, which tells us users can only process small chunks of information at a time.
‍
The structure is purposeful: users arrive at the practice already prepared. They know how to position their body, how to work with their breath, and what it means when their mind wanders.
‍
The celebratory screen that follows includes a trauma-informed message, something like "It's normal to have a racing mind — noticing that IS the practice."

Meditation has deep cultural and historical roots, and the experience needed to reflect that respect at every touchpoint, including the moments after a session ends.

The name Ember draws from early meditation practices that used fire and candle gazing as focal points. An ember is a quieter, sustained form of attention; something tended over time, not ignited all at once.

The visual system reflects that: warm ambers, ash tones, soft neutrals. Every color meets WCAG accessibility standards.

The meditation timer is a small ember dot that grows slowly into a full circle — calm and grounding, not a countdown.

This is where the project got genuinely interesting and occasionally humbling. The bootcamp brief was focused on animation and microinteractions, so I pushed into territory I hadn't fully explored.

The screen I'm most proud of is the splash screen. It required building across multiple screens and layered animations to pull off, and figuring it out was genuinely fun. My one wish is that the smoke feels closer to real smoke and less like the animation that it is, but it is something to keep refining.

For the sparkle animation, I worked extensively with Lottie Files. The Figma plugin had reliability issues that pushed me to work directly through the Lottie Files website. It was a pivot that cost time but gave me a more stable workflow and a deeper understanding of how the tool behaves under pressure.

From there, I studied how celebratory moments work in apps like Duolingo and ran into a real design dilemma. Duolingo's celebrations are designed to feel like winning. Meditation is designed to feel like releasing the need to win. Those things are in direct conflict.

Ultimately, I wrestled with how to motivate users without making meditation feel performative or culturally disrespectful. I made the deliberate choice to scale back the gamification (which, by the way, was a practice in meditation itself).

Behavioral psychology tells us that small moments of positive reinforcement can keep users engaged and coming back. The goal wasn't to eliminate that motivation, but to calibrate it. Enough to encourage the next lesson. Not so much that it undermines the practice itself.  

What I landed on: a small sparkle animation, like sparks flying from an ember when you blow on it.

Subtle. Meaningful.

A quiet nod to stoking your practice rather than a loud reward for completing a task.