Moonbeam Coffee Mobile App Design
UI/UX - Branding - Design System
Moonbeam Coffee is a mobile-first coffee shop concept designed for late-night browsing. The project combines brand identity with an intuitive ordering experience, emphasizing calm navigation, accessible contrast, and atmospheric storytelling.
Button Press State
The landing screen introduces the Moonbeam brand while directing users immediately toward the menu with a prominent primary action. The primary CTA darkens and shifts slightly downward when pressed to provide tactile feedback and confirm the user's action.
Drink Menu
Drink categories reduce cognitive load by organizing beverages into familiar groups with concise descriptions.
Visit Page
Interactive locations make it simple to find nearby establishments.
Connect: Journal Screen
The Moonbeam Journal extends the brand beyond ordering by providing seasonal content and community updates.
Designing Moonbeam Coffee strengthened my understanding of mobile navigation, component systems, and interaction design in Figma. Through testing, I refined the interface to balance visual storytelling with usability while maintaining a cohesive brand experience.
Want to see the full interaction flow? Click to view the Interactive Prototype on Figma!
Role
UX/UI Designer
Tools
Figma
Illustrator
Photoshop
Platform
iOS Mobile Concept
Goals
Mobile-first navigation
Low-light readability
Minimal cognitive load
Consistent visual identity