Bloomie Florist
Making the flower ordering experience feel personal and effortless, from picking an occasion to contacting the shop.
Florist and hampers website helping customers discover floral arrangements suited to every occasion, then begin ordering directly via WhatsApp.
UI/UX Designer & Web Developer
2 Weeks
Figma, Next.js, Tailwind CSS
Concept Exploration
The Challenge
Customers need to find the right arrangement for various occasions and understand how to place their order. This concept explores how product selection, service details, and enquiry paths can be made immediately discoverable.
Boutique florists operate differently from standard e-commerce retailers. Floral arrangements are deeply tied to specific human emotions — anniversaries, birthdays, solemn sympathy, or celebratory grand openings. Furthermore, fresh flower availability changes daily, and customers frequently require custom greeting messages and precise delivery timeframes.
Traditional multi-step cart checkouts frequently introduce friction and fail to accommodate personalized arrangement requests. The design challenge was to create a frictionless experience where buyers can immediately find the right occasion, fill in order parameters, and transition directly into a structured WhatsApp conversation.
Project Objectives
Present catalog options tailored by occasion, such as birthdays, anniversaries, graduations, and thoughtful gifts.
Make it effortless for customers to share special requests or personalized greeting notes.
Establish WhatsApp as an intuitive, structured, and friction-free ordering channel.
Ensure an ergonomically comfortable experience on both desktop screens and mobile phones.
Concept: Brighter Moments
Warm and refined floral visuals paired with an uncomplicated, practical ordering flow.
Florals as the Visual Anchor
High-fidelity bouquet photography takes center stage, highlighting floral textures and artisanal craftsmanship.
Harmonious Typography
Editorial serif headlines for an atelier boutique feel, paired with clean sans-serif body copy for effortless reading.
Intentional Coral Accents
Warm coral accents draw eye attention to primary action buttons and urgent delivery notices without visual clutter.
Occasion Category Cards
Event-based cards guide visitors straight to relevant selections without navigating complex nested menus.
Page Breakdown
01 / Hero Section
Introduces Bloomie, core value propositions, immediate WhatsApp CTA, and direct link to collection exploration.
02 / Integrated Inquiry Form
Captures customer name, phone number, occasion, chosen bouquet, and special notes before opening chat.
03 / Service Highlights
Showcases same-day delivery cutoff, fresh stem guarantee, custom gift hampers, and fast WhatsApp support.
04 / Occasion Categories
Guides visitors to pertinent selections: Birthdays, Anniversaries, Graduations, and Sympathy/Celebration.
05 / Best Sellers & Popular Picks
Highlights proven favorite bouquets complete with transparent price estimates and preparation timing.
06 / Secondary Proof & Clarity
Provides genuine customer reviews, step-by-step workflow overview, and a comprehensive delivery FAQ.
Mobile Adaptation
The mobile adaptation is specifically tailored for one-handed smartphone browsing, rather than simply shrinking the desktop layout:
Condensed Navigation
Header neatly collapses into a clean drawer menu and high-priority enquiry/cart touch icon.
Crisp Value Proposition
Headlines and key benefits remain prominently placed, understandable within the first 3 seconds.
Ergonomic 1-Column Form
Inquiry form repositioned directly below the hero in a natural single-column flow for thumb typing.
Vertical Perk Stack
Service strengths rendered vertically with clean icons for effortless scanning while scrolling.
Touch-Friendly Occasion Grid
Category cards scaled with generous tap targets (minimum 44px) for swift touch interaction.
- Optimal Touch Targets: All CTA buttons enforce a minimum 44px tap height with comfortable thumb padding.
- 1-Column Readability: Form fields use standard 16px text sizes to prevent unwanted browser zoom on mobile devices.
- Seamless Occasion-to-Chat Flow: Selecting an occasion card automatically prefills the occasion parameter in the inquiry flow.
Visual System & Style
The visual system balances the emotional warmth of boutique floristry with the conversion clarity of modern commerce:
Color Palette & Strategic Roles
Coral Terracotta
#E05A47
CTA & Attention GrabberDraws immediate attention to primary order buttons and key occasion badges.
Petal Warm Off-white
#FBF8F5
Warm BackgroundMaintains an inviting atelier ambiance while allowing bouquet photos to stand out naturally.
Botanical Charcoal
#25201F
Typography ContrastDark charcoal with a warm undertone providing comfortable high-contrast readability.
Blush Border
#F0E4DE
Subtle Section DividerDelicate card and section boundaries that provide structure without visual clutter.
Forest Foliage
#2F4A3E
Trust & Natural DepthDeep botanical green accents for freshness guarantees and reliability callouts.
Headline Font
Playfair Display
Playfair Display / Serif — Conveys artisanal craftsmanship, boutique heritage, and the elegance of memorable celebrations.
Interface & Body Font
Inter Sans
Inter / Sans-Serif — Used for descriptive copy, form inputs, and functional UI elements for razor-sharp legibility.
Art Direction & Imagery
Warm, diffused natural lighting focused sharply on fresh petal textures, matte wrapping paper, and handwritten cards.
UI Elements & Components
Pill-shaped high-contrast buttons, softly shadowed bouquet cards, and minimalist iconography delivering instant clarity.
Order Workflow
1. Choose Occasion or Product
Visitors filter by celebratory occasion or browse featured bouquet collections directly on the home page.
2. Fill Inquiry Details
Enter recipient name, sender contact, event occasion, greeting card message, and preferred delivery date.
3. Proceed to WhatsApp
A single tap launches WhatsApp with a pre-structured order draft ready for the florist team.
4. Confirmation & Completion
Bloomie's team verifies same-day stem availability, recipient address, and finalizes the order.
Transparency note: The form compiles structured order parameters for WhatsApp rather than running an automated payment gateway. For a boutique florist, direct messaging ensures fresh seasonal stem availability, address precision, and greeting card review before finalizing payment.
Outcomes & Validation
Observable Design Outcomes & Technical Validation
Instant Occasion & CTA Visibility
Occasion filters and direct WhatsApp order triggers appear above the fold without arduous scrolling.
Hero-Integrated Inquiry Form
Form is readily available on the hero section so urgent same-day buyers can take action immediately.
Ergonomic Mobile 1-Column Layout
Mobile screen flow re-architected vertically with comfortable one-handed reach zones.
Verified Contrast & Readability
Color pairings comply with WCAG AA contrast standards, ensuring accessibility for all users.
Lightweight & Shift-Free Assets
Optimized modern image delivery with preserved aspect ratios to prevent Cumulative Layout Shift (CLS).
Note: As a design concept project (Website Concept), business conversion rates and sales metrics are intentionally omitted until validated through post-launch commercial analytics.
START YOUR PROJECT
Ready to build a warm, high-converting website for your florist or boutique?
Let's explore your catalog, your occasion workflows, and connect your customers smoothly to WhatsApp.