Moonbrew

One System Behind Every Screen. An Astrology-Powered Coffee App

Building a design system, recommendation engine, and 19 screens for a concept that had the vision but not the structure.

Product Designer (UX + UI + Design System)

November 2025 to January 2026

iOS / Android mobile app

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

The design problem: how do you ask for birth date, birth time, and birth place without it feeling like a medical form? How does a "cosmic recommendation" lead to an actual purchase? And how do you build a loyalty system around moon phases that works for someone who doesn't care about astrology?

The starting point was two concept documents with the product vision. From there, I defined the wireframes, user flows, screen inventory, and recommendation logic that the project needed to move forward.

APPROACH

I extracted every requirement from the documentation and mapped the complete user journey.

This revealed critical gaps: no login system, no returning user experience, and no way to browse the menu without going through the astrology flow.

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.

Flow A: New User

Splash

Birth Date

Birth Time

Dietary Prefs

Home

Recommendation

Flow B: Returning User

Login

Home

Recommendation

Flow C: Guest

Splash

Menu

Product Detail

Shared Path

Customize

Checkout

Confirmation

KEY DECISIONS

Onboarding as Ritual

Four pieces of personal data before the user sees any value. I split it into one data point per screen with cosmic visuals that frame input as "unlocking your chart," not filling a form. Added a "View Menu" bypass the original spec didn't have.

Lunar Phase Rewards

Instead of points, each order unlocks a moon phase. Your 8th order completes the cycle and earns a free drink. Points still run in the background for business flexibility, but the user sees the moon filling up.

The Recommendation Engine

The concept described "a personalized drink based on your birth chart" without defining the underlying logic. I built it: 4 zodiac elements with flavor profiles, 8 lunar phases with energy modifiers, a 32 combination matrix with drink and copy pairings, and a step-by-step algorithm the dev team could implement directly.

 

Your element

From zodiac sign

+

Today's moon phase

Changes every ~3.5 days

=

Your drink

Drink + copy + energy

Aa

DM Serif Display

Bc

Plus Jakarta Sans

#0A0A1A

#2D3A80

#E3CCB8