Responsive eCommerce Website for Florists

Project overview

This project involved designing a fully responsive eCommerce website for a local florist business. The platform was intended to allow users to easily browse, customize, and purchase floral arrangements such as roses, tulips, and gift bouquets across all device types. The primary goal was to enhance user experience through thoughtful design decisions that addressed real customer pain points, especially in mobile usability, product clarity, and checkout processes

The problem: 

Most local florist websites lacked responsive design and intuitive user flows. Users often struggled with:

  • Overwhelming product options

  • Small, unclear visuals

  • Limited customization features

  • Frustrating and lengthy checkout processes

This created a subpar experience that failed to meet the expectations of modern, mobile-first users.

The goal: 

To create a responsive, user-friendly website where customers can:

  • Easily browse and filter flower collections

  • View clear, detailed images of arrangements

  • Customize orders (e.g., with vase types or messages)

  • Complete purchases smoothly on desktop, tablet, and mobile

Client :

Local Florist Business

Role :

UX Designer (Sole Designer)

Tools :

Figma, Pen & Paper, UsabilityHub

Duration :

March 2025 – April 2025

Deliverables :

Wireframes, High-Fidelity Prototypes

My Design Process

1. Empathize 

User Research: Conducted remote user interviews to identify behavior patterns, frustrations, and feature expectations. Participants included professionals and regular gift-buyers.

Key Insights:
  • Users want fast, mobile access
  • Lack of visual clarity impacts decision-making
  • Checkout friction leads to cart abandonment
2. Define Persona Example: Sarah A busy professional who shops for gifts on the go. She needs a quick and smooth mobile experience and gets frustrated by unresponsive layouts.

I conducted user interviews and empathy analysis to understand how customers browse and purchase flowers. The research focused on key motivations, frustrations, and common behaviors when shopping for floral arrangements online.

Pain Points:

Using affinity diagrams and sketching, I conceptualized streamlined solutions. I focused on:

  • Clean navigation
  • Thoughtful product filters
  • Clear call-to-actions
  • Mobile-first hierarchy

3. Ideate

  • Can’t filter by price, color, or type
  • Hard to judge product quality from unclear photos
  • No way to add notes or special delivery instructions

Wireframes

Sitemap

Sitemap Notes

Developed a clean sitemap prioritizing essential user tasks: browsing, filtering, customizing, purchasing, and managing accounts.

Paper Wireframes

Wireframe Notes

Initial sketches helped me outline core sections: hero, categories, product cards, and filtering options.

Digital Wireframes

Lo-fi Digital Wireframe Notes

Transitioned into Figma to build responsive digital wireframes. Emphasis was placed on spacing, button placements, and intuitive UI alignment across devices.

Low-fidelity prototype

Low-fidelity prototype note

Linked key user flows—such as selecting a bouquet, adding it to the cart, and checking out—to simulate user navigation and support early testing.

View Lo-Fi Prototype

Usability Testing
  • Method: Unmoderated Remote
  • Location: United States
  • Participants: 5
  • Duration: 20–30 minutes
Findings:
  1. Users could not change quantity from the product detail page
  2. Checkout process felt disconnected on mobile
Mockups & Iterations
Based on usability feedback, I refined the design by:
  • Adding “+” and “–” quantity buttons to product detail and cart pages
  • Improving spacing and readability for mobile views
Screen Size Variants Created mockups for:
  • Desktop
  • Tablet
  • Mobile
This ensured a consistent and responsive experience across all screen sizes.

Hi-Fi Digital wireframes

High-fidelity prototype

Built a clickable hi-fi prototype incorporating all refinements, ready for developer handoff or further validation.

🔗 View Hi-Fi Prototype

Accessibility considerations

Thank you for viewing my project. I’d love to hear your thoughts or answer any questions you may have. Feel free to reach out!