Flower Garden

Flower Garden is a mobile app for a florist's boutique that allows users to order flowers from specific collections. In this project, I used the Design Thinking process to develop the user experience.

User Survey

Competitive Analysis

User Flow

Medium-Fidelity UI

High-Fidelity UI

Grid Check

Type of project

App

My Role

UX/UI Designer

User Survey

To understand how both experienced and inexperienced users would prefer to interact with a flower shop app, I conducted a user survey. The survey was conducted in person with 5 participants and consisted of 10 questions.

5 participants

Interview in person

10 questions

Comment from participant

"For me, buying flowers is always connected to some special occasion. It's why I like this process. Unfortunately, sometimes there are problems with the design of the florist's web shops or applications. I cannot imagine I would buy something that needs to be designed by people who cannot make their app beautiful and user-friendly."

Summary

User needs:

Categories of flowers

Clear navigation

Real photos of the flowers

Option to see the actual status of an order

Option to contact a florist

The overall design should illustrate the value of flowers as a gift

Competitive audit

After conducting the user survey, I decided to analyze webs of Prague's three most famous flower shops. Since none of them had an app, I reviewed their websites. The following observations were made:

Several languages

Many additional services

Minor bugs and issues on the web

Inconsistent design

No proper order system

No visual hierarcy

Consistent design

Accessible design

Old-fashioned web

a mockup with three phones. Each of them represents Flower Garden's screen

User Flow

Based on the user survey's main points, I created a user flow that represented the desirable process for users to purchase a bouquet.

Diagram legend

Mid-fidelity designs

After establishing the user flow, I created medium-fidelity designs to structure my ideas into something real and receive feedback. I made sketches and created wireframes for the catalog, home, and cart pages.

I picked up serif font for the headers to emphasize the theme of the brand

“Filled” cart icon represents that user added something

Search helps users easily find some composition.

High-fidelity designs

After defining the basic design structure, I experimented with fonts, imagery, and colors to create the complete design.

I chose an 8-point grid with margins of 24, 32, and 64 pixels between the groups of elements.
‍
To make the app look more elegant, I combined serif and sans serif fonts. The dark background helped to emphasize the flower photos and make the app more presentable.

The hard-shaped corners of the main elements, such as the navigation and tab bar menu, allowed me to keep consistent with the app's brand image as a luxury flower studio.

A mockup with different phone screens of Flower Garden project

Usability Study

At the end of the previous design phase, I asked four people from the first user survey to test the prototype of the app for ordering flowers.

The results showed that users found Flower Garden more attractive in terms of UX and UI compared to the concurrent websites. However, one tester suggested that there is always room for improvement, such as adding more custom order tracking screens or more "chat" buttons during the process.

After gathering feedback, I made some changes, such as adding a chat button to the checkout screen. This enables users to easily contact the florist if they want to add special notes or ask questions.

Check more projects