Bloom & Roast is a conceptual coffee landing page created to capture the warmth, craftsmanship, and elegance of a modern boutique coffee brand. The goal was to design a minimal yet emotionally rich digital experience that feels both premium and cozy, inviting users to slow down and enjoy the story behind every roast.
I was responsible for the entire process — from UX research and strategy to UI design, layout creation, and responsive design for mobile.
The Challenge
Coffee brands often struggle to stand out online, with cluttered visuals or overly commercial tones that don’t reflect the authenticity of their product. The challenge was to design a landing page that communicates quality, craftsmanship, and warmth — while keeping navigation effortless and focused on conversion.
The Goal
·Design a clean and elegant landing page that establishes trust at first glance
·Showcase the brand story and its craftsmanship visually
·Simplify navigation to lead users toward product discovery and purchase
·Create a mobile-first experience that feels smooth and natural
·Strengthen the emotional connection through consistent design language
Design Process
The design process for Bloom & Roast followed an iterative and user-centered approach, combining research, ideation, design, and refinement to create a minimal, elegant, and cozy landing page experience.
1. Research & Discovery
The project began with understanding the specialty coffee market and identifying what makes boutique coffee brands appealing to modern audiences.
User Research
User Persona
Competitive Analysis
Informational Architecture
2. Ideation
Based on insights from research, I mapped out the user journey and organized the content into a logical and emotionally engaging flow. The structure was designed to lead visitors smoothly from brand introduction to coffee offerings, customer stories, and a clear call to action. The main goal was simplicity — helping users feel relaxed and confident as they explore.
User-Persona
Low-Fidelity Wireframes
Interactive Wireframes
3. Design
With the foundation set, I developed the visual identity by blending soft neutral tones, warm imagery, and clean typography to evoke the feeling of a calm morning coffee ritual. Each design choice — from white space to button styling — was intentional, ensuring the interface felt premium yet approachable.
Visual Concept
Design System
Responsive Design
4. Iteration & Refinement
Multiple micro-iterations followed, refining interactions, typography scale, and image balance to enhance visual harmony. The final design reflects a thoughtful combination of user empathy, brand storytelling, and aesthetic precision.
User Personas
Mark Zuckerberg
• Age: 41
• Occupation: Business Owner
• Behaviors: Orders online before commute, values speed & convenience
• Goals: Quick menu access, pre-order for pickup, clear store hours/location
• Frustrations: Complicated navigation, hidden contact info, slow-loading pages
Amy Cark
• Age: 23
• Occupation: Student
• Behaviors: Goes to cafés to meet friends, loves Instagram-worthy places
• Goals: See café atmosphere (photos), check reviews
• Frustrations: No photos of interior, no clear vibe conveyed
Competition Analysis
Starbucks:
•Strengths → Seamless app/ordering, strong brand story, loyalty system
•Weakness → Overloaded info, less unique/local feel
Blue Bottle Coffee:
•Strengths → Clean minimal design, strong storytelling, product education
•Weakness → Less focus on social proof/community vibe
Local Indie Cafés (general patterns):
•Strengths → Authentic, local identity, strong atmosphere conveyed
•Weakness → Often outdated websites, missing core info, weak mobile usability
Low-Fidelity
Wireframes
Final Design
Ordering
Branding
1. Logo
Bloom &
Roast.
The Bloom & Roast logo captures the essence of the brand — elegant, warm, and artisanal. The typography choice combines refined serif details with graceful curves that echo the natural flow of coffee aroma and steam. The ampersand adds a touch of sophistication, visually linking the ideas of bloom (the freshness and aroma of coffee) and roast (its craftsmanship and depth).
The deep burgundy color evokes warmth, richness, and comfort, mirroring both the tone of roasted coffee beans and the cozy experience the brand aims to create. Overall, the logo reflects a balance between modern minimalism and handcrafted tradition, perfectly aligning with the brand’s aesthetic and emotional identity.
Bonny
Sophisticated serif font known for its high contrast, elegant curves, and refined character shapes. Its graceful letterforms evoke a sense of craftsmanship and warmth, making it ideal for a boutique coffee brand rooted in quality and experience.
Satoshi
Main font for body text and interface elements because of its clean, geometric, and highly legible design. Its modern simplicity perfectly complements the elegance of the Bonny logo, creating a balanced contrast between warmth and clarity that enhances readability and visual harmony across the brand.
3. Colors
Accent
Metallic Red
B32D2D
000000
FFFFFF
The color palette combines Metallic Red as an accent with black and white as the primary tones, creating a refined and timeless aesthetic. The Metallic Red adds warmth, sophistication, and a touch of luxury that reflects the cozy yet elegant atmosphere of Bloom & Roast, while the black and white foundation ensures clarity, contrast, and a minimal, modern balance throughout the design.
Responsiveness
Landing page was designed with a fully responsive layout, ensuring a consistent and enjoyable experience across desktop, tablet, and mobile devices. Each element — from typography and imagery to navigation and spacing — was carefully adjusted to maintain readability, visual balance, and intuitive interaction on smaller screens. The result is a design that feels seamless and intentional, whether users are browsing from a laptop at home or scrolling on their phone in a café.
Outcome
The final design for Bloom & Roast successfully captures the essence of a modern, cozy coffee experience through its elegant typography, warm color palette, and minimal layout. The website delivers a seamless user journey — from exploring coffee varieties to visiting the café — blending aesthetics with functionality. The result is a brand presence that feels sophisticated yet approachable, inviting customers to slow down, connect, and enjoy every cup.
Duration:
1 Month
Programs used:
Figma
The design and ideation process were carried out in Figma, allowing for a seamless workflow of wireframing, prototyping, and visual exploration. Figma’s collaborative and flexible environment made it easy to iterate quickly and refine every detail of the layout, typography, and color harmony.
Framer
The final concept was then brought to life in Framer, where animations, transitions, and micro-interactions were implemented to enhance the overall user experience. Framer’s real-time design-to-development capabilities made it possible to create a fully functional and visually engaging website that feels fluid and immersive.
Let’s chat about all things design, being creative, AI, watches, perfumes, music, food, anything goes!
Let’s
connect!
Made with ❤️ by Aleksa
2025