Floare: Global Floral Delivery App – User Experience Case Study

Project Overview

The Product:

Floare is a mobile application that helps busy customers and expats to order and receive fresh bouquets with tracked home delivery worldwide. Floare provides a time-saving solution for users to express their sentiments with beautiful bouquets delivered precisely when and where they want, eliminating the need to visit physical florist shops.

Project duration:

June 2024 to October 2024

Problem statement:

Due to time and geographical limitations, busy professionals and individuals living abroad face challenges in presenting flowers to loved ones in person.

The goal:

To design a user-friendly mobile application for Floare that allows users to order and send floral arrangements to their loved ones anywhere in the world.

My role:

As the lead UX/UI Designer, I was responsible for the entire design process from concept to completion.

Responsibilities:

Conducted user interviews to understand user needs and pain points.
Developed design storyboards to visualize key interactions.
Created paper and digital wireframes to define the app’s information architecture and user flow.
Designed low-fidelity and high-fidelity prototypes for iterative testing and refinement.
Conducted usability testing sessions to gather user feedback and identify areas for improvement.
Ensured accessibility guidelines were adhered to throughout the design process.
Iteratively refined designs based on user feedback and project requirements.

Understanding the User

User research: summary

I conducted in-depth user interviews and created empathy maps to understand the users.

My research showed that a key user group was busy working professionals living away from family and friends. This user group, characterized by time and geographical constraints, confirmed my initial ideas about the target audience for the Floare service.

Furthermore, research revealed additional user concerns, such as:

Limited control over delivery time. Users expressed their worries regarding potential delays or uncertainties in delivery times.
Lack of customization options. Users wanted flexibility in customizing bouquets to reflect their preferences and the recipient’s tastes.

These insights helped me in the design process. I made sure it met user needs and addressed their concerns.

User research: pain points

Time. Working adults lack time for phone calls to local florists
Accessibility. Existing platforms for ordering flowers are not equipped with assistive technologies
Control. The absence of control over delivery time hinders home delivery orders.
Visualization. Text-heavy platforms with a lack of photos are frustrating and difficult to navigate.

Meet the users

Primary. The Expat

Name: Martin
Age: 32
Occupation: Software Engineer
Location: New York City, USA (originally from Soria, Spain)
Goals: To easily make lovely surprises for his family and friends back home, especially for birthdays and holidays. He wants to maintain strong connections despite the distance.
Frustrations: Difficulty finding reliable international delivery services. Insufficient imagery on existing platforms. Concerns about flower quality and freshness upon arrival.
Tech Savvy: Very comfortable with mobile apps and online shopping.
Quote: “I love my family and friends, and I want them to know it even when I am far away. Sending flowers helps me feel closer to my family. I need a service I can trust.”

Secondary. The Busy Professional

Name: Sara
Age: 47
Occupation: Marketing Executive
Location: Sydney, Australia
Goals: Order beautiful bouquets for clients and colleagues, without taking time out of her busy schedule.
Frustrations: Limited time for shopping, wants a seamless ordering process and control over delivery time, needs reliable same-day or next-day delivery options. Seek high-quality arrangements that make a good impression.
Tech Savvy: Comfortable with mobile apps, but values efficiency and speed above all.
Quote: “I need to send flowers often, but I don’t have time to go to a flower shop or to call a florist. A quick and easy app is essential.”

Supplementary. The Occasional Sender

Name: Agneska
Age: 62
Occupation: Retired Teacher
Location: Prague, The Czech Republic
Goals: To send flowers for special occasions easily, primarily within her country. Values simplicity and affordability.
Frustrations: Complicated ordering processes, confusing websites, hidden fees.
Tech Savvy: Comfortable with basic technology. Prefers simple and intuitive interfaces.
Quote: “I just want to send flowers to my friends and relatives for special occasions. It shouldn’t be complicated!”

Starting the Design

Paper wireframes:

I began with paper wireframing, ensuring a user-centered design approach. This iterative process allowed me to explore various screen layouts and interactions rapidly. It enabled me to identify and address key user pain points early in the design cycle.

For the home screen, I prioritized a user-friendly experience by introducing the following design elements:

The main banner that leads users to useful information about flowers. These resources aim to guide users in choosing the perfect bouquet, answer frequently asked questions, reduce decision times, and enhance the overall user experience.
Simple intuitive category navigation. The home screen features easily navigable categories, allowing users to browse and discover bouquets with minimal effort.

Focused on these key elements, the paper wireframing phase laid a solid foundation for the following digital wireframing and prototyping stages.

Floare Homepage v1.0. Red dots were used to mark the elements of each sketch that would be
used in the initial digital wireframes.

Digital wireframes:

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

The main banner on the top of the page leads users to articles about flowers, and special offers.
Users can easily start navigation from one of the main categories at the bottom of the page.

Easy navigation and bouquet photo preview were the key user needs to address in the designs, in addition to equipping the app with assistive technologies and real-time order delivery tracking.

Product preview with detailed photos and zoom in option for visually impaired users.
Suggestion with similar products is saving user’s time on choosing a bouquet.

It was essential to provide users with a calendar and time picker for delivery service and the option to choose a safe and fast online payment system.

Day and time picker for delivery service at checkout page
Secure online payment systems to choose from.

Low-fidelity prototype:

Using the completed set of digital wireframes, I created a low-fidelity prototype. For usability testing, I focused on the primary user flow of choosing and ordering a bouquet.

*Please wait until the lo-fi prototype is loaded then click around.

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from low-fidelity prototypes to high-fidelity mockups. The second study, based on the high-fidelity prototype, revealed specific areas where the mockups could be improved.

First round findings

Users want to track their orders easily
The “Delivery City” button frustrates users
Users want to customize their orders easily

Second round findings

Users want to continue shopping without taking additional steps
Users want more customization
Some users felt tired of the colors

Refining the Design

Before Usability Study Round 1

After Usability Study Round 1

Mockups

After the usability studies, I replaced the “Delivery city” button with the “Track your order” button, so that users can access their order status easily. I also added customization options on the product preview page, including a changeable number of flowers, and additional gifts.

Before Usability Study Round 2

After Usability Study Round 2

The second usability study revealed users’ desire to continue shopping without taking extra steps. To streamline this flow, I added a “Continue shopping” button on the “Added to cart” screen. Also, I reduced the presence of yellow color to make the design more appealing to users’ eyes. More customization options are added on the single product page.

High-fidelity prototype:

The final high-fidelity prototype presented cleaner user flows for ordering bouquets, simple checkout, and more product customization.

*Wait a second if it is not loaded, then click around the prototype.

Accessibility considerations:

These accessibility considerations were integral to the design process, ensuring that the Floare app is usable and enjoyable for everyone.

1. Visual Impairment Support

Integrated zoom functionality across all screens to accommodate users with low vision.
Added descriptive alt text to all images and interactive elements, enabling screen readers to convey information to visually impaired users.

2. Enhanced Understanding of Options

Utilized high-quality, detailed imagery for bouquets and their customization options. This allows users to visualize available choices and make informed decisions, reducing cognitive load.

3. Improved Navigation and Usability

Employed clear and universally understood icons to enhance navigation.
Designed touch-friendly buttons with ample size and spacing to facilitate easy interaction for users with motor impairments.
Implemented a balanced high-contrast color scheme to ensure optimal readability and visibility for users with varying degrees of visual acuity.

Takeaways

Impact

Floare’s intuitive design facilitates effortless purchases and successfully addresses user needs, as evidenced by positive user feedback. One participant noted, “The app made it easy to order a beautiful bouquet for my friend’s birthday! And the gift suggestions are handy. I would use this app frequently.”

What I learned

Floare app project highlighted the importance of iterative design, usability testing, and design critique sessions in creating user-centered products.

I also learned that continuous improvement is essential in the design process.

Next steps

A final round of usability testing will validate the effectiveness of design revisions. Further user research will identify any remaining areas for improvement and uncover potential new user needs.

Let’s Connect

Thank you for your time reviewing my work on the Floare app!

I welcome your feedback and would be happy to discuss this project further. You can find my contact information below.

For more projects navigate to the portfolio section or visit my portfolio on Dribbble or Behance.

Email: vera@espinacco.es