Flower Catalogue App for a Florist

Design a user-friendly flower catalogue app for a local florist that allows customers to easily explore, select, and order flowers, with features that support usability, accessibility, and convenience.

Project overview

The problem:

Many local florists lack a digital platform where customers can conveniently browse flower collections, compare options, and place orders. This creates friction for users who want a smooth, modern shopping experience.

The goal:

Client :

Local Florist Business

Role :

Lead UX/UI Designer

Tools :

Figma

Duration :

6 Weeks

Deliverables :

User Research, Wireframes, High-Fidelity Prototypes, Usability Testing

Project overview

My role:

UX Designer (Sole designer on the project)

Responsibilities:

I was responsible for the entire UX process including user research, creating personas and user journey maps, defining problem statements, wireframing, prototyping in Figma, conducting usability studies, analyzing results, and iterating on the high-fidelity design of a flower catalogue app for a florist.

User research pain points:

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.

Persona: Jhon

Problem statement:
John is a busy professional who needs a quick and easy way to choose and send flowers because he often shops last-minute and feels overwhelmed by too many choices.

Paper wireframes

Wireframe Notes

Lo-Fi Digital wireframes

Wireframe Notes

Search Bar at the top for easy product search.
Category Tabs (Roses, Tulips, Bouquets, Fresh Flowers) for quick navigation.
Promotional Banner with a 50% off offer to attract attention.
Recommended for You section showcasing personalized product suggestions.
Featured Products to highlight popular or on-sale items.
Cart Icon for easy access to the shopping cart.

Flower app product and product detail page digital wireframes indicating the userflow, how user will select the product from product page and will be directed towards the product detail page

Low-fidelity prototype

Low-fidelity prototype note

View Flower Catalog low-fidelity prototype
From home page to product page and moving forward to product detail page, cart icon is appeared any time user can visit the cart to proceed toward and onward to checkout.

Usability study: findings

To evaluate the usability of the flower catalogue app for a florist, I conducted two rounds of usability studies with a total of five participants. The goal was to understand how easily users could browse floral arrangements, customize their selections, and place an order for delivery or pickup. In the first round, I tested a low-fidelity prototype and gathered feedback on core features such as flower browsing, product customization, and the checkout flow. Based on user observations, I made several design improvements and tested the revised prototype in a second round of usability testing. The findings from both rounds provided valuable insights into user needs and highlighted opportunities to improve the overall user experience.

Round 1 & Round 2 Findings

Users want to browse flower categories quickly
Users expect to see large, clear images of the flowers.
Users want an easy way to filter products by price and availability.
Users need a preview of the full bouquet or flower details before checkout
Users want to customize delivery options (e.g., same-day, scheduled).
Users want to save their favorite arrangements.

Hi-Fi Digital wireframes

Low-fidelity prototype

Here is the link to the high fidelity prototype

Accessibility considerations

Made sure that the text (e.g., flower names, prices, and descriptions) on product cards had high color contrast and readable font sizes, so users with low vision can browse with ease.
Designed the flower filter options (e.g., by type, color, occasion) and navigation tabs to be fully accessible via keyboard, supporting users with mobility challenges.
Added descriptive alt text for each flower image (e.g., “Red Rose Bouquet with white ribbon”) to support screen readers and assist users who are blind or visually impaired in understanding product visuals.