# Petals Pro UI — case study

> A practice design for a flower shop’s mobile app: browse arrangements by category, check a product, put it in the bag, and find florists nearby on a map.

- **Type:** practice
- **Industry:** Floral e-commerce
- **Role:** UI/UX design
- **Platform:** Mobile app · iPhone-sized frames (390 × 844)
- **Tools:** Figma
- **Status:** Practice project — design only, not built

- Case study: https://ministar-samuel.com/project/petals-pro-ui
- Figma file: https://www.figma.com/design/SaTgNiRPXg6KG9PjrYnqxc/Petals-Pro-UI?node-id=0-1

![Petal Pro store front on a phone: a two-column grid of bouquets, roses, lilies and orchids, each with a yellow price button](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/02-card-view-products.webp)

## Overview

Petals Pro is a practice design for a flower shop’s mobile app. You browse arrangements by category, open a product, put it in the bag, and find florists nearby on a map. It was designed in Figma on a single board of iPhone-sized frames, with no client and no build.

The board is organised by job — login and registration, list and card views, navigation, details and profile, main tabs, map views, and pop-ups — so every state of a screen sits beside the others. [Open the Figma file](https://www.figma.com/design/SaTgNiRPXg6KG9PjrYnqxc/Petals-Pro-UI?node-id=0-1) to see it whole.

- **44** Phone frames
- **390 × 844** Frame size
- **7** Board sections
- **5** Tabs in the bottom bar

## Challenge

*the problem*

### Let the flowers do the talking.

Buying flowers online can feel impersonal: crowded grids, small photos, and options that arrive before you’ve chosen anything. The brief asked for something calmer, for two kinds of buyer — someone sending a gift, and someone who knows exactly which stem they want.

So the interface stays quiet and warm — cream screens and brown text rather than black — and the photography does the selling. Each screen has one obvious next step.

![Product details for Bouquets: a large photo, a $20.00 price tag, a short description, a four-star rating, 300 orders, an Add to bag button and similar products below](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/03-product-details.webp)
*Product details: one photo, one price, one button.*

## Goals

*goals, as the frames express them*

**Photography first.** Product and store cards lead with a large image; the words stay short.

**One action per card.** On a product card, the price and the add-to-bag button are the same button.

**Two ways in.** Categories for gift-givers (Occasions Flowers, Gift Combos) and for people who know what they want (Single Stem Flowers, Arrangement Types, Plants).

**The florist is part of the product.** A map of stores nearby, a page for each store, and favourite stores on the profile.

**Clear feedback.** Field errors, stock problems and bag changes each get their own frame.

![Profile screen: avatar, the name Samuel Ministar, a Premium badge and 1103 points, a short bio, favourite stores and recent purchases](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/07-profile.webp)
*Profile: favourite stores sit beside recent purchases. The name is sample content.*

## Research & discovery

Petals Pro was a practice project, so there were no interviews, analytics or usability tests behind it. The work started from the usual shape of a small-catalogue delivery app and from the two buyers in the brief, and asked what each needs at each moment: what to buy, whether it’s any good, and where it comes from.

The categories answer the first question for both buyers at once. A rating, a popularity count and similar products answer the second. The third — where the flowers come from — is why the app has a Map tab and store pages instead of a faceless catalogue.

**Two buyers, one store front** (flowchart):

1. Sending a gift
2. Knows what they want
3. Occasions, Gift Combos — Category names from the file: Occasions Flowers and Gift Combos.
4. Single stems, Plants — Single Stem Flowers, Arrangement Types, Special Collections and Plants.
5. Products — A list with descriptions or a card grid; filter chips across the top (Bouquets, Single Stem Flowers…).
6. Product details — A rating, a popularity count and similar products help the decision.
7. Bag

*How the brief’s two buyers map onto the category list.*

## Information architecture & flows

The app runs on five tabs in a bottom bar: Map, Categories, Favourites, History and Profile. The bag sits in the top-right corner of every screen with a count badge, so it’s one tap from anywhere; the back arrow and screen title sit top left.

**App map** (flowchart):

1. Log in or register — Six login frames, three registration frames and a two-step password reset.
2. Map — Stores nearby, with a search field.
3. Categories — Fresh Flowers, Occasions, Arrangement Types, Special Collections, Plants, Gift Combos — each with an item count.
4. Favourites, History, Profile — Favourites: liked stores and products. History: in the bar, but its screen is still empty. Profile: badge, points, bio, favourite stores, recent purchases.
5. Store page — Opening hours, address, rating, price range, popular products and a Browse the product button.
6. Products — As a list with descriptions, or as a card grid.
7. Product details
8. Bag — One tap away on every screen.

**Choosing a gift** (flowchart):

1. Category
2. Products
3. Product details — The heart saves it to Favourites; the liked state has its own frame.
4. In stock?
5. Add to bag
6. Added to bag — Drawn three ways: a centred card, a bottom sheet, and a bottom sheet with a thumbnail.
7. Checkout or keep shopping?
8. Checkout — The file stops at this button; checkout itself isn’t designed yet.
9. Out-of-stock toast — “Product out of stock”, shown over the product.

*The buying path the frames cover, from a category to the Checkout button.*

## Wireframes

*first screen*

### Start with one card.

The board opens with a block-out. Its first frame is a single card in grey shapes — an image, a title, three lines of text and a button — and that card skeleton carries through every product, store and pop-up screen. (Its purple button is the one colour the finished app never uses.)

Layouts were then tried side by side: the category list three ways (two list treatments and a two-column grid), and products both as a list with descriptions and as a card grid.

![First screen frame: a placeholder card in grey blocks — image, title, three text lines — with a purple gradient button](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/01-first-screen.webp)
*Figma · First screen.*

Wireframes: Category list (phone), Card view (phone), Product details (phone).

*Code-drawn wireframes of the three main layouts, following the frames’ structure.*

## Navigation: before, blueprint, after

The navigation is the clearest piece of process in the file. It was worked out in three frames named **Before**, **Blueprint** and **After**, then tried again as a bottom bar.

**1. Before**

The category list on its own: a hamburger icon top left, a search field, six categories and the bag. Nothing opens yet.

Wireframes: Before (phone).

*A sketch of the Before frame (not exported).*

**2. Blueprint**

The drawer slides over the dimmed list. Before filling it, one row is laid out as a template — an icon square marked “Ico” and a label marked “Text” — and the first two real items, Map and Shops, are built from it.

![Blueprint frame: an orange drawer headed Petal Pro online, a placeholder row labelled Ico and Text, then Map and Shops, over the dimmed store list](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/05-menu-blueprint.webp)
*Figma · Navigation Hamburger Menu: Blueprint.*

**3. After, and a bar**

In the After frame every row follows the template: Map, Shopping Bag (selected, on a white pill), Favourites, History, Profile and About Us, with Log Out pinned to the bottom.

The same destinations were then tried as a bottom bar — Map, Categories, Favourites, History, Profile — in three variants. The main-tab and map frames are all built on the bar; the drawer doesn’t appear again.

![Figma board: list and card view screens on the left; on the right the Before, Blueprint and After hamburger frames, with three bottom-bar variants underneath](https://ministar-samuel.com/covers/petals-pro-ui.webp)
*The board: Before, Blueprint and After top right, the three bar variants beneath them.*

## Visual design & system

The palette is warm and earthy: cream screens, bark-brown type, and two flower colours — orange and sunflower yellow — for anything you can press. The main colours live in Figma as named styles and variables; the hex values below were sampled from the exported frames and match them.

- **Orange** #FB8D0C — Page titles and price tags — “Primary color”
- **Sunflower** #FFD952 — Add-to-bag buttons and the bag badge — “Second accent color”
- **Bark** #A47947 — Body text and icons — “Text Color”
- **Peach** #FEDCB4 — Secondary buttons such as Register — “Secondary Color”
- **Linen** #FCF3E8 — Screen background
- **Petal white** #FDF8F1 — Cards and sheets
- **Gradient top** #FFC300 — “Main Gradient” start: Log In, the logo, the active tab
- **Gradient base** #F18404 — “Main Gradient” end
- **Error** #F52424 — Field errors such as “Password was incorrect”

- **Poppins** — The only typeface. SemiBold for most labels, Bold for titles (32 px on the store front), Medium for chips, Italic for field placeholders.

*scaffolding*

### A size scale and OS helpers.

Beside the screens sits a size scale — squares from 8 to 64 px, each labelled — which sets the icon boxes and spacing.

Every frame also carries an **OS Helpers** group marking the status bar (44 px), nav bar (60), tab bar (64) and safe area (22). On the exported login frame they’re visible, which is why red bands frame that screen.

The photography is stand-in imagery: the image layers are named after image-generator prompts.

![Login screen: Petal Pro logo, email and password fields, Forgot your password?, an orange gradient Log In button and a peach Register button, framed by red helper bands top and bottom](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/06-login.webp)
*Figma · Login, with its OS helper layers showing.*

## Key screens

**1. Store front**

The Categories tab opens on the store front: a big orange title, search, filter chips (Bouquets, Single Stem Flowers…) and a two-column grid. Each card is a photo, a name and a yellow button that carries both the bag icon and the price.

![Store front card view: Bouquets $20, Roses $12, Lilies $5 and Orchids $10, with filter chips and a bag showing 4 items](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/02-card-view-products.webp)
*Figma · Card View Products.*

**2. Product**

Product details lead with a large photo, then the name, an orange price tag kept apart from the button, and a short description. A star rating and a popularity count (“300 Orders”, sample data) sit just above one full-width Add to bag button; similar products scroll sideways underneath.

The heart top right saves the product to Favourites, and the liked state has its own frame.

![Product details for Bouquets: photo, $20.00 price tag, description, four-star rating, 300 orders, Add to bag, similar products](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/03-product-details.webp)
*Figma · Products Details.*

**3. Stores nearby**

The Map tab drops a pin for each florist, with a field to find a store by name. Selecting a pin raises a card with the store’s photo, hours and address; the store page adds a rating, a price range, popular products and a Browse the product button.

![Map tab: “Stores nearby” with a search field, a street map of Wuse, Abuja with brown pins, and the bottom bar with Map selected](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/04-map-view.webp)
*Figma · Map View, built on the bottom bar.*

**4. Profile**

The profile is personal rather than administrative: a photo, a membership badge and points, a short bio, favourite stores and recent purchases. Signing out asks first, and warns that unfinished checkout details would be lost.

![Profile screen with a Premium badge, 1103 points, favourite stores and recent purchases](https://ministar-samuel.com/case-studies/petals-pro-ui/figma/07-profile.webp)
*Figma · Profile Screen.*

## States & feedback

A large share of the board is states rather than screens. The login alone has six frames — empty, email entered (ticked once valid), password entered, weak, strong and incorrect — and registration adds a “Passwords do not match” state under the confirm field.

**Signing in** (flowchart):

1. Log in — A strength hint (weak or strong) shows under the password.
2. Details right?
3. Register — For new accounts: email, password and confirm password; a mismatch shows “Passwords do not match”.
4. Forgot password — Enter your email, then “Send password reset instructions”.
5. Error under the field — “Password was incorrect”, in red, with the field outlined; the form stays filled for another try.
6. Store front
7. Reset with a code — The code from the email, a new password and a confirmation, then back to Log in.

*pop-ups and toasts on the board*

- **Added to bag** — drawn three ways: a centred card over the product, a bottom sheet, and a bottom sheet with a thumbnail. Each offers “Shop some more” or “Checkout”.
- **Out of stock** — a toast over the product: “Product out of stock”.
- **Sign out** — a confirmation that warns unfinished checkout details would be lost.

## Outcome & learnings

Petals Pro is a design exercise: 44 frames on one Figma board, **not built and not tested** with anyone. Naming frames by state — Before, Blueprint, After; Weak, Strong, Incorrect — is what makes the board read as a process rather than a gallery, and it’s the habit worth keeping.

Two things from the original brief aren’t in the file: a way to **customise** an arrangement and a way to **schedule delivery**. This is where a next round would put them — a proposal, not a designed flow:

**Next round · customise and schedule (proposed)** (flowchart):

1. Product details — Designed.
2. Customise — Not designed yet: the brief’s customisation tool would sit here.
3. Add to bag — Designed, with its confirmation pop-ups.
4. Delivery date & time — Not designed yet: scheduling, from the brief.
5. Checkout — Not designed yet.
6. Order in History — The tab exists; its screen is empty.

*Proposed. Only Product details and Add to bag exist in the file today.*

*open, if it goes further*

- ☐ Customisation and delivery scheduling, then checkout
- ☐ The History screen
- ☐ Real photography in place of the stand-ins
- ☐ Turn the repeated parts (cards, menu rows, buttons) into Figma components — the file has none yet
- ☐ Test the buying path with people who actually send flowers

---
By Samuel Ministar · https://ministar-samuel.com/project/petals-pro-ui