Designing a coffee app where your drink is chosen by the stars

Company Product Designer — UX + UI + Design System

Year Nov 2025 — Jan 2026

Type iOS / Android mobile app

← Back

THE CHALLENGE

Moonbrew is a specialty coffee shop where your drink is chosen by the stars. The owner wanted a mobile app that captures your birth chart data, reads the current lunar phase, and recommends a personalized beverage.

The starting point was two concept documents with the product vision. No wireframes, no user flows, no recommendation logic. Just the idea.

Three design problems at the center

01How do you ask for birth date, birth time, and birth place without it feeling like a medical form?

02How does a "cosmic recommendation" translate into an actual purchase?

03How do you build a loyalty system around moon phases that still works for someone who doesn't care about astrology?

From those two documents, I defined the complete user flow, built the recommendation engine from scratch, designed 19 screens across 6 flows, and created a design system to keep everything consistent.

Moonbrew — the physical café interior with moon phase artwork, copper pendant lights, and specialty coffee bar

APPROACH

No user research was conducted. The concept documents reflected the owner's vision. My role was to translate ambiguity into a shippable product: defining the flows, building the recommendation logic, creating a design system that could scale, and making design decisions where the spec was silent.

AI was a workflow tool throughout the project. I used Claude to process client documentation into structured user flows, to research astrology systems and translate them into product rules for the recommendation engine, and to accelerate design system documentation: token naming, component specs, and usage guidelines. The visual design, component architecture, and all 19 screens were mine.

The design system (DM Serif Display + Plus Jakarta Sans, three-color foundation, 8px grid, dark mode cosmic palette) was built in parallel to keep 19 screens consistent while working solo with no design review process.

Moonbrew — final app mockups showing multiple screens across the 6 user flows

KEY DECISIONS

1. Onboarding as ritual

The original spec had 10 screens including two full-screen animations (Celestial Alignment and Moonlit Pour) before the user could see any value. I cut it to 6: one data point per screen with cosmic visuals that frame input as "unlocking your chart," not filling a form.

I also added a "View Menu" bypass the original spec didn't have. The owner assumed every user would want the astrology experience. I didn't. Guest access is the escape hatch for people who just want coffee.

Result: reduced estimated time to first recommendation from 2+ minutes (original 10-screen spec with animations) to under 60 seconds.

2. Lunar phase rewards

The original spec had two disconnected systems: moon phases (tracking visit frequency) and points (tracking spend). I proposed eliminating points entirely and keeping only the lunar cycle: 8 orders unlock 8 moon phases, the 9th earns a free drink.

Points running in the background for business flexibility was the compromise. But the user only sees the moon filling up. One mechanic, one visual, one goal.

Moonbrew — Rewards card with 8 moon phase slots, 4 unlocked (I–IV), prompting to complete all 8 to unlock a Free Brew

Moonbrew — 4 zodiac elements mapped to flavor profiles

Each sign's element sets a flavor temperament. Fire bold, Earth rich, Air light, Water deep.

Moonbrew — 8 lunar phases mapped to energy modifiers

Each of the 8 lunar phases sets an energy modifier. New moon calms, full moon amplifies.

Moonbrew — 32-combination matrix with drink and copy pairings

4 elements × 8 phases = 32 unique drink + copy pairings.

3. The recommendation engine

The concept described "a personalized drink based on your birth chart" without defining any underlying logic. I built the entire system.

This wasn't a design deliverable anyone asked for. The spec said "recommend a drink." I had to decide what that actually meant as a system, document the logic, and make it implementable.

Building the engine added ~2 weeks to my timeline. But without it, the dev team had no spec to build from and the core feature was just a concept.

WHAT I LEARNED

"Personalization" means nothing without documented logic. A concept isn't a feature until someone defines the rules. That's product design, not just UX.

Completeness without validation is a risk I'd handle differently. The engine has 32 combinations, but there was no way to validate which ones actually resonated. If I did it again, I'd propose a 2-week pilot with 4 combinations before building all 32.

The gaps in the original spec were the most valuable part of the project. Each gap was a decision I had to make, and those decisions are what made the product shippable.