MAREA Café: A Brand & UX Case Study
MAREA UX/UI App Design
Designing a community-focused coffee app inspired by the effortless rhythm of surf culture.
THE STRATEGIC APPROACH:
My Core Strategy: I developed the brand and UX around the central concept of "flow." This strategy was inspired by the ocean and was designed to create a seamless, intuitive experience from the brand's visual identity to the app's user interface.
Why this was the right approach: A strategy rooted in an authentic insight—the lifestyle and rituals of surfers—allowed for a more meaningful and differentiated product. The focus on "flow" and "connection" directly informed the key feature: effortless group ordering, which simplifies a common social interaction for the target community.
The Creative Execution: The process began with a strategy-driven mood board and culminated in a high-fidelity prototype in Figma. The visual identity uses a color palette inspired by the ocean, clean typography for clarity, and soft, fluid logo elements. The UI was designed with user-centered flows, an intuitive navigation system, and seamless social features like group ordering to encourage adoption.
THE OUTCOME:
The Qualitative Result: The project resulted in a fully realized brand identity and a high-fidelity, interactive prototype for a conceptual app. It successfully translates a core strategic insight into a cohesive and user-friendly digital product.
The Strategic Impact: As a portfolio piece, MAREA serves as a powerful case study demonstrating my ability to lead the entire brand-building process. It showcases a deep understanding of user-centered design, strategic brand positioning, and the development of a complete visual system, from initial concept to a polished UX/UI experience.
THE CHALLENGE:
Business Goal: To design a conceptual mobile coffee ordering app, MAREA, that could stand out in a saturated market by targeting a specific niche community: surfers and coastal adventurers.
Brand Challenge: The brand needed to feel authentic to surf culture—capturing the feeling of effortless connection and the rhythm of the tides—without feeling cliché. It had to be modern, simple, and community-oriented.
User Experience (UX) Challenge: The app's core functionality needed to go beyond a simple transaction. It had to foster genuine connection and solve a real-world problem for the target audience, such as coordinating group coffee runs before a morning surf session.
C R E A T I V E D I R E C T I O N B O A R D
S I P . S U R F . R E P E A T
Where inspiration meets intention — a foundation built on simplicity, balance, and surf culture.
Where inspiration meets intention — a foundation built on simplicity, balance, and surf culture.
Marea Cafe
Visual Identity
Marea’s design is rooted in calm, movement, and simplicity—a reflection of the ocean's natural energy. The color palette, featuring soft neutrals, deep blues, and crisp whites, evokes the tranquility of the sea while maintaining a modern, elevated aesthetic.
Typography plays a crucial role in Marea’s identity. Poppins, a geometric sans-serif, was chosen for its clean, approachable look. Its structured yet rounded form balances modern minimalism with warmth,
creating a seamless reading experience across the app. The logo and brand elements incorporate soft curves and fluid motion, reinforcing the effortless interaction Marea aims to provide.
The result is a timeless, sophisticated, and intuitive brand experience—one that feels as natural as the waves.
The Icon Mark (Wave & Sun) serves as Marea’s secondary logo, offering a simplified and instantly recognizable representation of the brand. Designed specifically for compact usage, it maintains visual clarity across digital platforms such as social media profiles, app interfaces, icons, buttons, and favicons.
The Icon Mark minimalist aesthetic also makes it perfect for subtle branding applications, including watermarks and small-scale placements, ensuring brand consistency without compromising style or recognition.
The Story Behind
Marea's Colors
Marea’s color palette celebrates surf culture, inspired by ocean waves, sandy shores, and energizing coffee rituals. Vibrant blue evokes refreshing waves, while soft neutrals reflect serene sands. Rich browns represent the grounding strength of freshly brewed coffee—essential fuel for surfers at dawn patrol.
Typography: Crafted
for Clarity & Connection
Marea’s primary typeface, Poppins, is carefully chosen to embody both clarity and warmth, much like your favorite freshly brewed coffee. Its clean lines and balanced curves create a modern, inviting atmosphere, reminiscent of relaxing mornings spent seaside. This approachable yet refined typeface captures the essence of Mare, where coffee culture blends effortlessly with surf-inspired living.
Every word was crafted to reflect the brand’s light, fresh, and effortless energy.
Effortless Ordering,
Thoughtful Connection
Marea’s intuitive design streamlines group orders, fostering genuine connections within the surfing community. Its personalized features create a seamless ordering experience, bringing users together to share their passion—one cup, one conversation, one wave at a time.
Effortless Group Ordering, Designed for Connection
Marea is more than great coffee—it’s about connection. Its seamless group ordering lets friends, coworkers, and family easily place and manage shared orders in one place, eliminating the hassle of coordinating. Whether for an office coffee run or a beach meet-up, Marea ensures everyone gets their perfect order effortlessly.
With Marea, group ordering is effortless—members add their selections anytime, with real-time updates and a synced checkout. A built-in chat keeps coordination simple, while one tap finalizes the order. Marea takes care of the rest, ensuring everything is ready for pickup or delivery, just in time for the perfect surf-side moment.
Surf together. Sip together. Share the ride.
Surf together. Sip together. Share the ride.
Designed to Ebb, Flow and Connect.
Marea’s brand presence adapts to every scene with ease. Fresh, intentional, and community-driven.
An exploration of the Marea brand and its online presence — showcasing how it evolves and adapts across diverse platforms and touchpoints while staying true to its essence. From playful, surf-inspired messaging to clean, minimal product highlights, each story adapts to its own scene while staying connected to the brand’s soul: light, fresh, and rooted in community. The result is a cohesive, dynamic presence that feels intentional, effortless, and alive with the tide.
Bringing the Brand to Life in Stories.
Represent Marea
While Looking Great
The Marea apparel line combines casual comfort with thoughtful design, bringing our surf-inspired identity beyond the café. Crafted to be both stylish and wearable, each item effortlessly expresses the spirit of Marea—whether you're at the beach or on-the-go.
Merch that extends the brand story. Functional, stylish, and fresh.