Flora & Folio

Role: UX/UI Designer

Tools: Figma, Jitter

Project Duration: 8 Weeks // 2023

View Prototype

Background

For the first project of the Google UX Design course, I chose to design a flower arrangement preview app. Many mobile apps are used for viewing and ordering different products, so I felt this was a good first project. It will give me a comparative basis for evaluation while offering the opportunity to better understand user habits.

The Problem

Selecting flower arrangements can be a difficult and frustrating process. Shops tend to have a seemingly unlimited number of options, which is often attractive to many customers because they have a better chance of finding something that matches their preferences. However, convoluted descriptions and poor organization can make it nearly impossible for customers to settle on an option they feel confident in. As a result, customers may feel that their time and money have been wasted.

The Solution

Flora & Folio is a mobile app designed to help users build or select flower arrangements perfect for any occasion. The app provides a comprehensive list of browsing categories, options for customization, and fast and easy checkout in order to create a seamless experience for customers.

Selecting flower arrangements can be a difficult and frustrating process. Shops tend to have a seemingly unlimited number of options which is often attractive to many customers because they have a better chance of finding something that matches their preference. However, convoluted descriptions and poor organization can make it nearly impossible for customers to settle on an option they feel confident in. As a result, customers can be left feeling like their time and money is wasted.

The Problem

The Solution

The Problem

Navigation

Oftentimes flower arrangement sites and apps are congested and overwhelming resulting in confusing navigation

Sites often use the same exhausted layouts which can lead to poor findability and be visually boring for users.

Experience

Support

Many users are unfamiliar with arrangements and bouquets and have difficulty selecting the perfect item or finding contact information to help them.

01 Empathize

Research Approach

In order to better understand the habits, needs, and pain points of customers, I decided the user interviews were an essential first step. The goals of my research included the following:

Identify patterns in how often users are purchasing bouquets

Explore motivations for purchasing flowers

Identify hindrances customers face when shopping for flowers

Explore the confidence levels customers have during their shopping experience

User Interviews Summary

Through user interviews I found that many target users shop for arrangements due to holidays or special occasions. However, many sites are congested and overwhelming making the process difficult for users. So what should be an exciting and fun process becomes frustrating for users, further swaying them to not shop for flower arrangements outside of special occasions.

In order to better understand the habits, needs, and pain points of customers, I decided the user

interviews were an essential first step. The goals of my research included the following:

02 Define

Based on the user interviews conducted I was able to generate user persona that is representative of key audience targets. These personas help identify the most important needs to address based on the majority of expected users. Let’s meet Ezekiel…

User Persona

User Journey Map

Application Map

After gaining a better understanding of the users wants and needs, I developed an application map to layout essential pages and features.

Task Flows

Based on the defined pages and features, I created the main user task flows.

Paper Wireframes

With a clearer picture of the necessary features for the application, I began sketching out the main wireframe screens. Personally, I'm a pen to paper kind of girl. I think physically sketching the ideas first allows for faster and more creative ideation.

Task Flow 2 : Build and Purchase a custom flower arrangement

Task Flow 1 : Select and Purchase a flower arrangement for a specific occasion

03 Ideate

Lo-Fi Prototype

View Lo-Fi

04 Design

Style Guide

During the revision process, I realized the project’s visual style needed a refresh. The original color palette felt overwhelming and didn’t guide the user’s attention effectively. In the redesign, I applied the 60-30-10 color rule to create better visual balance and updated the typography to establish a clearer, more consistent hierarchy

05 Test

Usability Study Details

Research Questions

How long does it take a user to find and order an arrangement in the app?
What can we learn from the user flow, or the steps that users take, to order an arrangement?
Are there parts of the user flow where users get stuck?
Are there more features that users would like to see included in the app?
Do users think the app is easy or difficult to use?

Participants

5 participants

Three men, two women between the ages of 20 and 55. One participant is a person with a visual impairment.

Methodology

10 minutes per participant

United States (remote)

Unmoderated Usability Study

Users were asked to perform tasks on a low-fidelity prototype

Usability Findings

Priority 0

We found the home page needs clearer labels and more options.

Priority 1

In general, users need better cues for category and filter options.

Priority 2

Users would benefit from calendar view scheduling and the ability to schedule varying arrangements in one order.

Hi-Fi Prototype

View Prototype

Considering the goals and pain points outlined at the beginning of the design process, I believe my original design effectively met many of the needs and requirements. However, revisiting this project after gaining more experience allowed me to recognize areas where my execution had failed. The main thing I wanted to address in this revision process was to fix inconsistencies and some of my visual design choices.

Welcome Pages

Revisions

Home

Categories and Items

Build Your Own Bouquet

Checkout

1

For the welcome page, I wanted to have cleaner first impressionn. I updated the font sizes so that a consistent hiearchy is established from the beginning and is consistent throughout the app.

2

Button styles were standardized to a 44px touch target with 16px text for accessibility. The Log In button became primary and Sign Up secondary to create clear visual hierarchy, guide the user’s eye, and streamline task completion.

3

For the log in and sign up pages, the alternative login options were moved to the top to support faster account access.

1

Replaced the hamburger menu with a horizontal nav bar to streamline navigation and support quicker wayfinding.

2

Shop Now button given primary hierarchy and button for BYOB was given secondary hierarchy

3

Shadows and outlines changed to reduce visual load

4

Shop by category section moved up on page and best sellers moved within category options.

Designated a page specifically to category browsing

1

2

Designated a page specifically to category browsing

3

Changed 'Add To Cart' button to primary hierachy and Customize to seconndary hierarchy

4

Removed icons from buttons to reduce unnecessary visual clutter

5

Item page updated to match established hierarchy and overlay added to confirm item selection.

1

Multiple dropdown bars on single page replaced by progress stepper

2

Dropdownns and descriptions replaced with image carousel to decrease confusion and improve task completion speed

1

The main changes necessary for the checkout pages were matching the style to previous pages. These changes improved readibility and ultimately made the checkout process smoother.

Considering the goals and pain points outlined at the beginning of this design process, I feel that I met the needs and

Reflecting on this project, I can see how much my design approach has evolved since completing the original Google UX certificate work. At the time, I often got stuck on small visual details too early, which slowed my progress and kept me from focusing on the bigger picture. Since then, I’ve learned to approach design decisions more strategically—keeping the user journey front and center, validating assumptions through testing, and using UX principles like visual hierarchy, accessibility, and task efficiency to guide iterations.

Reflection

This shift in mindset motivated many of the improvements I made, such as restructuring navigation for faster wayfinding, clarifying button priorities to guide users toward key actions, and rethinking page layouts to reduce friction. Each change was driven by a stronger understanding of how design choices directly impact usability and overall experience.

Looking ahead, I’m committed to continuously refining my process—whether it’s through deeper user research, experimenting with new interaction patterns, or seeking feedback from peers and mentors. My goal is to keep growing as a designer who can balance creativity, usability, and technical execution to create products that truly meet users’ needs

Thank You!

requirements of our users. To further improve Flora & Folio I would conduct another usability to determine if there are features that could further benefit users. Based on original goals and initial feedback, I believe that adding a page dedicated to flower care would improve the experience of users unfamiliar with purchasing flower arrangements. This is the first feature I would address, but further research would be essential in identifying improvements for users.

I hope you enjoyed this case study. Check out my other work.