00 Overview
Focus like a regular.
Earn your next drink.
Pomomelto is a café-themed Pomodoro focus timer where completing work sessions earns you stamps on a loyalty card — just like at your favourite coffee shop. Productivity becomes rewarding in a way that actually feels good.
The project grew from a genuine frustration: most focus timers are either coldly minimal or overwhelmingly gamified. Pomomelto finds the middle ground — warm, tactile, café-coded.
Core idea
"What if your Pomodoro timer rewarded you like a café loyalty card — a free drink after 10 focused sessions?"
ppw-pm.github.io/pomomelto
Live app · ppw-pm.github.io/pomomelto
01 Competitive Research
5 competitors.
Four gap.
I hand-wrote notes across five Pomodoro apps — Pomi, Pomodoro Focus Timer, Forest, Fovert, and Flow Timer — charting their UI approach, features, and user review patterns to find the white space.
Forest: Focus for Productivity
UI: Simple, plant-based
+ Earn rewards, share & complete with friends, plant real trees
− So much to unlock — paywalled features
− Losing progress after updates frustrated users
− Missed notifications about sessions
Pomi
UI: Minimal — one tap
+ Leaderboards, streaks, focus tags
− No reset button — last session keeps repeating
− Stats not accurate
Pomodoro Focus Timer
UI: Minimal — a few controls
+ Relaxing sounds, timer list, dark mode
− No custom photo, timer list locked behind paywall
− Ads are distracting
Flora — Green Focus
UI: Simple, some graphics
+ Plant real trees with friends, share progress
− Using AI imagery feels hypocritical with eco-brand
− Too much going on — too many steps to plant
Focus Traveller — Flow Timer
UI: Cute, vivid, organised
+ Switch between timers, Apple Music, group focus
− Can't change total timing in hours
− No visual cue for time already spent on timer
Gap 01
No warm reward mechanism
Streaks are punishing if you miss a day. No app used a collectible, café-style reward loop.
Gap 02
Visual personalisation locked
Custom aesthetics — drink themes, visual identity — were either absent or paywalled.
Gap 03
Sessions feel sterile
Most timers feel like a countdown on a stopwatch. No emotional framing around the session.
Gap 04
Progress resets harshly
Users wanted forgiveness UX — the feeling that effort accumulates, not just a number ticking.
02 Concept & Design Direction
The café
as metaphor.
The café loyalty card is a universally understood reward loop — collect stamps, earn a free drink. It's low-pressure, tangible, and warm. Applied to a Pomodoro timer, it reframes completed sessions not as discipline but as treats earned.
The visual direction came from the loyalty card itself: organic shapes (ice cubes, drink vessels), a muted sage palette that evokes a cosy café window seat, and typography that balances playfulness with focus.
Choosing a drink type as session personalisation was key — it gives each session a small identity, makes the timer feel like yours, and anchors the café metaphor all the way through.
Cup design explorations — 9 vessel shapes, one selected
How it works
Step 01
☕
Choose your drink
Pick Matcha, Coffee, Chocolate, or Iced Lemon Tea — your session takes on its flavour.
›
Step 02
⏱
Set your session
Customise session length and break duration. The timer shows your chosen drink's ice cubes.
›
Step 03
🧠
Focus
The timer counts down. No distractions, no leaderboards — just you and the clock.
›
Step 04
🎫
Earn a stamp
Complete the session → get a stamp on your loyalty card. 10 stamps = free reward.
03 Features
Three features,
one loop.
A full-screen Pomodoro timer with ice cube visuals that match your chosen drink. The large, confident typography keeps focus on what matters — the countdown. Three states: Ready, Running, Paused.
Visual cueIce cubes = your drink is being made. It's almost ready.
Button logicStart / Pause / Reset — minimal decision points during a session.
Font weightBold 800 timer numerals — hard to miss, impossible to ignore.
A settings sheet framed as a café order slip. Customise session length, break duration, and your drink type. Framing settings as an "order" maintains the metaphor and makes configuration feel like a ritual, not a chore.
Metaphor"Adjust Your Drink Order" = settings. Familiar, low-friction framing.
Drink typesMatcha · Coffee · Chocolate · Iced Lemon Tea — each a distinct visual identity.
Save / CancelClear commit/dismiss actions. No auto-save ambiguity.
Each completed Pomodoro session earns one stamp. At 10 stamps, you've earned a free reward — a moment of genuine delight. The loyalty card makes productivity accumulate visibly, turning abstract effort into a tangible collection.
Stamp triggerOnly a fully completed session earns a stamp — no shortcuts.
10-stamp goalAchievable in a single day of deep work (10 × 25 min = ~4 hrs focused).
CelebrationA congratulations moment on card completion — small but meaningful.
🎫 My Royalty Card
6 / 10 stamps collected
4 more sessions → free reward ✨
04 Design System
Colour, type,
components.
01 — Colour palette
200
#D1E8D1
300
#BFDFBF
400
#9CAF88
500
#7A9668
600
#6B8459
700
#5C724A
Use 500 for interactive elements. 400 as background. 700 for text on light. 200–300 for tints and hover states.
200
#D6E1F0
300
#B8CEE8
400
#8B9DC3
500
#7A8BBB
600
#6B7BA8
700
#5C6B98
Muted/subtle — never competing with sage. Used for secondary button fills, inactive states, supporting UI.
200
#F5F1E8
300
#F0EAD8
400
#E8DFC4
500
#DDD2A8
600
#CFC18A
700
#B8A66D
Foundation colours that don't compete for attention. 200–300 for backgrounds, 400 for modal surfaces, 500–700 for dividers and decorative elements.
Semantic colour usage
Interactive
Primary CTA, logo, active states
Secondary
Cancel, reset, secondary actions
Surface
Timer background, app canvas
Neutral
Page bg, modal surfaces, inputs
02 — Typography
Display — used for the timer numerals
Weight 800
Size 64–72px
Tracking −0.04em
Usage: timer face only
Heading — app name, modal titles
Weight 700Size 18–24px
Label — status, drink type, button text
Ready
Matcha
Session 01
MonospaceSize 10–12pxAll capsTracking +0.12em
Body — settings, descriptions
Adjust session length and break duration, then choose your drink type. Each completed session earns you one stamp.
Weight 400Size 12–14pxLine-height 1.65–1.8
03 — Components & Buttons
Button variants
Start
Pause
Setting
Reset
Primary
Filled sage #4a6340. For the single most important action in context (Start, Save).
Secondary
Filled sage-400 #9caf88 or bluegray. For supporting actions (Pause, Edit).
Ghost
Transparent + ink border. For tertiary actions that need presence but not weight (Setting, Cancel).
Destructive
Transparent + accent border. For irreversible actions only (Reset — clears progress).
Spacing system — 4px base grid
04 — Visual motifs
The ice cube and drink vessel are the signature visual elements — they appear as the timer's hero illustration, in the loyalty card, and as the app icon. Organic, rounded shapes with semi-transparent fills create depth without complexity.
05 UX Writing
The café voice —
warm, not twee.
Every string in the app was written to maintain the café metaphor without becoming precious. The tone is warm, direct, and a little playful — like a barista who knows your order.
✕ Generic
Settings
Functional but forgettable — breaks the metaphor entirely.
✓ Pomomelto
Adjust Your Drink Order
Settings = an order — instantly understood, deeply on-brand.
✕ Generic
Timer complete. Session ended.
Cold, robotic. No emotional payoff after 25 minutes of focus.
✓ Pomomelto
🎉 Congratulations! You've earned a free reward!
Celebratory, specific, and tied directly to the loyalty metaphor.
✕ Generic
Rewards / Points
Abstract — could be anything. No sensory or emotional hook.
✓ Pomomelto
My Royalty Card · Stamp
"Royalty" = punny + aspirational. "Stamp" = tactile and café-coded.
✕ Generic
Ready to start
Passive — puts the burden on the user.
✓ Pomomelto
Ready
Short, confident, and open — the timer is ready, implicitly so are you.
06 Reflection
What landed,
what's next.
+The loyalty card metaphor immediately communicates the reward loop — no explanation needed.
+Drink personalisation makes every session feel like yours, not just a generic countdown.
+The sage palette creates a calming, café-like atmosphere that reduces the pressure to "perform focus."
+Framing settings as "Adjust Your Drink Order" was consistently noted as charming and memorable.
+Building and shipping the full design system as part of the project gave the UI a polished, intentional quality throughout.
!Add a sorting / export of session statistics — users wanted to see their productivity patterns over time.
!Implement persistent storage so stamps and session history survive page refresh.
!Add a "Streak Freeze" mechanic — forgiveness UX that protects progress without punishing a missed day.
!Sound design — ambient café sounds and a distinct "stamp earned" chime would complete the sensory experience.
!Accessibility audit needed — the light sage-on-sage contrast in the app background may not meet WCAG AA for all text.
