Moonbrew
One System Behind Every Screen An Astrology-Powered Coffee App
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.
Product Designer (UX + UI + Design System)
November 2025 to January 2026
iOS / Android mobile app
Figma, Claude AI
Figma, Claude AI
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 sat at the center:
How do you ask for birth date, birth time, and birth place without it feeling like a medical form?
How does a "cosmic recommendation" translate into an actual purchase?
How 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.
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.
KEY DECISIONS
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.
Reduced estimated time to first recommendation from 2+ minutes (original 10-screen spec with animations) to under 60 seconds.
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.
The Recommendation Engine
The concept described "a personalized drink based on your birth chart" without defining any underlying logic. I built the entire system:
4 zodiac elements mapped to flavor profiles
(Fire = bold/spiced, Water = smooth/creamy, Earth = rich/grounding, Air = light/floral)
+
8 lunar phases mapped to energy modifiers
(New Moon = introspective/simple, Full Moon = bold/celebratory)
+
A 32-combination matrix with specific drink and copy pairings
=
A step-by-step algorithm the dev team could implement directly
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.
Aa
DM Serif Display
Bc
Plus Jakarta Sans
#0A0A1A
#2D3A80
#E3CCB8
WHAT I LEARNED
About the work: Building the recommendation engine taught me that "personalization" is meaningless without documented logic. A concept isn't a feature until someone defines the rules. That's product design, not just UX.
The engine has 32 combinations, but there was no way to validate which pairings actually resonate with users. If I did this again, I'd propose a 2-week pilot with 4 element-phase combinations before building all 32. Ship the system, but start with a testable subset. Completeness without validation is a risk I'd manage differently.
The original spec's gaps were the most valuable parts of this project. Every gap was a decision I had to make, and those decisions are what made the product shippable.
Carlos Carrasco
Moonbrew
One System Behind Every Screen An Astrology-Powered Coffee App
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.
Product Designer (UX + UI + Design System)
November 2025 to January 2026
iOS / Android mobile app
Figma, Claude AI
Figma, Claude AI
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 sat at the center:
How do you ask for birth date, birth time, and birth place without it feeling like a medical form?
How does a "cosmic recommendation" translate into an actual purchase?
How 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.
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.
KEY DECISIONS
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.
Reduced estimated time to first recommendation from 2+ minutes (original 10-screen spec with animations) to under 60 seconds.
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.
The Recommendation Engine
The concept described "a personalized drink based on your birth chart" without defining any underlying logic. I built the entire system:
4 zodiac elements mapped to flavor profiles
(Fire = bold/spiced, Water = smooth/creamy, Earth = rich/grounding, Air = light/floral)
+
8 lunar phases mapped to energy modifiers
(New Moon = introspective/simple, Full Moon = bold/celebratory)
+
A 32-combination matrix with specific drink and copy pairings
=
A step-by-step algorithm the dev team could implement directly
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.
Aa
DM Serif Display
Bc
Plus Jakarta Sans
#0A0A1A
#2D3A80
#E3CCB8
WHAT I LEARNED
About the work: Building the recommendation engine taught me that "personalization" is meaningless without documented logic. A concept isn't a feature until someone defines the rules. That's product design, not just UX.
The engine has 32 combinations, but there was no way to validate which pairings actually resonate with users. If I did this again, I'd propose a 2-week pilot with 4 element-phase combinations before building all 32. Ship the system, but start with a testable subset. Completeness without validation is a risk I'd manage differently.
The original spec's gaps were the most valuable parts of this project. Every gap was a decision I had to make, and those decisions are what made the product shippable.
Moonbrew
One System Behind Every Screen An Astrology-Powered Coffee App
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.
Product Designer (UX + UI + Design System)
November 2025 to January 2026
iOS / Android mobile app
Figma, Claude AI
Figma, Claude AI
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 sat at the center:
How do you ask for birth date, birth time, and birth place without it feeling like a medical form?
How does a "cosmic recommendation" translate into an actual purchase?
How 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.
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.
KEY DECISIONS
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.
Reduced estimated time to first recommendation from 2+ minutes (original 10-screen spec with animations) to under 60 seconds.
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.
The Recommendation Engine
The concept described "a personalized drink based on your birth chart" without defining any underlying logic. I built the entire system:
4 zodiac elements mapped to flavor profiles
(Fire = bold/spiced, Water = smooth/creamy, Earth = rich/grounding, Air = light/floral)
+
8 lunar phases mapped to energy modifiers
(New Moon = introspective/simple, Full Moon = bold/celebratory)
+
A 32-combination matrix with specific drink and copy pairings
=
A step-by-step algorithm the dev team could implement directly
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.
Aa
DM Serif Display
Bc
Plus Jakarta Sans
#0A0A1A
#2D3A80
#E3CCB8
WHAT I LEARNED
About the work: Building the recommendation engine taught me that "personalization" is meaningless without documented logic. A concept isn't a feature until someone defines the rules. That's product design, not just UX.
The engine has 32 combinations, but there was no way to validate which pairings actually resonate with users. If I did this again, I'd propose a 2-week pilot with 4 element-phase combinations before building all 32. Ship the system, but start with a testable subset. Completeness without validation is a risk I'd manage differently.
The original spec's gaps were the most valuable parts of this project. Every gap was a decision I had to make, and those decisions are what made the product shippable.