Calmi: A Focus & Mindfulness App

Build focus, reduce stress, and grow your own sky.

UI/UX DESIGN

BY QUYNH NGO

01

Artist Statement

For this project, I created Calmi, a focus and mindfulness app that helps users stay productive while maintaining emotional balance. The idea came from my own struggle to stay motivated and mindful during busy academic schedules. I noticed that many productivity apps push efficiency but rarely nurture reflection or a sense of progress beyond checklists. Calmi aims to fill that gap by turning focus and self-care into a calm, visual journey.

Calmi transforms progress into a constellation-inspired experience. Each completed task becomes a star, and together they form constellations that represent projects or personal milestones. For larger goals, constellations gradually build into the Milky Way, symbolizing long-term growth and balance. Alongside this visual progress, users can take mindful breaks through guided meditation, breathing, and stretching exercises — designed to help them recharge and refocus.

In designing Calmi, I focused on creating an interface that feels gentle, structured, and motivating. The visuals are clean and mature, inspired by starlight and night skies, with both light and dark modes for comfort.

This project taught me how design can encourage healthy habits through subtle emotional connection. Calmi reflects my belief that productivity should feel meaningful — not pressured — and that mindful design can help users find calm even in their busiest moments.

02

Project Description

Calmi is a focus and mindfulness app designed to support students and professionals in building healthy routines. Using the Pomodoro method, it guides users through cycles of concentrated work and short, restorative breaks. What makes Calmi unique is its constellation theme, each completed session adds a star to the user’s personal sky, which gradually forms constellations over time. This visual journey transforms everyday focus into a sense of progress and wonder, encouraging consistency while also promoting balance and mental wellbeing.

03

Research

04

User Flow Chart

05

Typography & Colors

Style

Title 1

Body

Headline

Title 3

Title 2

Subhead

Footnote

34

28

22

17

17

15

13

Size (points)

Leading (points)

41

34

28

22

22

20

18

06

Wireframes