Practice · Floral e-commerce
Petals Pro UI
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.
Contents · Overview
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 to see it whole.
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.
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.
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
- Sending a gift
- Knows what they want
- Occasions, Gift Combos — Category names from the file: Occasions Flowers and Gift Combos.
- Single stems, Plants — Single Stem Flowers, Arrangement Types, Special Collections and Plants.
- Products — A list with descriptions or a card grid; filter chips across the top (Bouquets, Single Stem Flowers…).
- Product details — A rating, a popularity count and similar products help the decision.
- Bag
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
- Log in or register — Six login frames, three registration frames and a two-step password reset.
- Map — Stores nearby, with a search field.
- Categories — Fresh Flowers, Occasions, Arrangement Types, Special Collections, Plants, Gift Combos — each with an item count.
- 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.
- Store page — Opening hours, address, rating, price range, popular products and a Browse the product button.
- Products — As a list with descriptions, or as a card grid.
- Product details
- Bag — One tap away on every screen.
Choosing a gift
- Category
- Products
- Product details — The heart saves it to Favourites; the liked state has its own frame.
- In stock?
- Add to bag
- Added to bag — Drawn three ways: a centred card, a bottom sheet, and a bottom sheet with a thumbnail.
- Checkout or keep shopping?
- Checkout — The file stops at this button; checkout itself isn’t designed yet.
- Out-of-stock toast — “Product out of stock”, shown over the product.
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.
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.
Petal Pro store front
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.
Key screens
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.
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.
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.
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.
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
- Log in — A strength hint (weak or strong) shows under the password.
- Details right?
- Register — For new accounts: email, password and confirm password; a mismatch shows “Passwords do not match”.
- Forgot password — Enter your email, then “Send password reset instructions”.
- Error under the field — “Password was incorrect”, in red, with the field outlined; the form stays filled for another try.
- Store front
- 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)
- Product details — Designed.
- Customise — Not designed yet: the brief’s customisation tool would sit here.
- Add to bag — Designed, with its confirmation pop-ups.
- Delivery date & time — Not designed yet: scheduling, from the brief.
- Checkout — Not designed yet.
- Order in History — The tab exists; its screen is empty.
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
