Design a Bouquet Preview App for a Florist

Juliana Camargo

Project overview

The product:

This app was developed to solve the issue with online bouquet ordering. Lots of customers mentioned that it would be nice to be able to see the bouquet during the ordering process, to place the order with confidence.

That’s what I did with this product.

Project duration: 3 months

I worked on this project from February to April of 2023, not continuously but 2 weekends per month.

Project overview

The problem:

- Busy workers and commuters lack the time necessary to order a flower bouquet at the florist.

The goal: Design an app for Blue Blooms that allows users to easily order a flower bouquet online, with more control over the final product and pick up the exact final product at the florist with a quick stop by.

Project overview

My role:

UX Designer designing an app for Blue Blooms from conception to delivery.

Responsibilities:

My responsibilities consist on user research by conducting interviews, creating paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

● User research

● Personas

● Problem statements

● User journey maps

User research: summary

I conducted interviews and developed empathy maps of the primary users of the bouquet preview app. Their profile range from working adults with no time to spend inside a florist picking up flowers for the perfect bouquet, to anyone facing a last minute situation, when they need a specific amount of flower arrangements for a soon to happen event or celebration.

They are successful in their careers, they often work late hours or have long commute hours from getting home from work every day, and in both cases the users would use an online app to place the orders while they are ön the go”and pick up the order on the way home, but they need need adequate visual composition before placing the order to make sure it’s exactly what they are expecting to get.

User research: pain points

Lack of Visuals

Successful professionals like to have control when ordering online and expect the correct product delivery but when ordering flowers they don’t have an app that provides them with the necessary visuals.

Online options

There is no custom options to order online, only pre made selections that customers are tired of ordering.

Time

Working adults are too busy to spend time inside the florist to select all flowers they need in a custom bouquet.

Easy to use app

They need an app that is easy to use and in a few steps they place the order with confidence.

Persona: Ryan

Problem statement: Ryan is a busy content director to a big marketing agency, who needs to order a custom bouquet to his wife with an online preview app, because he doesn’t have time to stay too long at the florist on his way home from work and with this app he can be sure that the bouquet he is ordering online will be consistent with his expectations.

User journey map

Mapping Ryan’s user journey was helpful to reveal that he would benefit from a bouquet preview feature in a florist online ordering app.

● Paper wireframes

Starting the design

● Digital wireframes

● Low-fidelity prototype

● Usability studies

Paper wireframes

I started by drawing wireframes on paper, to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen,

I prioritized the area to start the bouquet customization process to help users save time.

Yellow markers were used to mark the elements of each sketch

Digital wireframes

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

Examples of bouquets to give the customer confidence and excitement.

Provide each element customization options for personalized orders.

Delivery time are to define pick-up time with customer.

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was customizing a bouquet with the preview feature, so the prototype could be used in a usability study.

Screenshot of prototype

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1

Users want to see the bouquet before placing the online order

2

User want more customization options

3

User wants to order fast through an user profile page that saves previous orders

Round 2 findings

1

The buttons are too small to click

2

Preview page with customization options is too crowded

3

Make start the bouquet customization process area at the home page the focus point.

Usability study: insights

GETTING STARTED CUSTOMIZATION PROCESS PREVIEW FEATURE

USEFUL NEW STEP NECESSITY OF FEATURE CONFIRMATION PAGE

The custom button need to be more prominent and with a better placement to make it easier to find. P1

The customization process needs to be simplified, with less options, the overall customization process need to be more intuitive, with options to select from full screen area tap and voice over for visually impaired customers.

The final preview is helpful for the overall custom bouquet process.

The app needs to implement a system of storing user profile information or a quick order saving to speed up the process to repeat customers.

That the existence of the order status for this kind of product is not totally necessary for all customers, this could be an optional feature that clients can check mark if they want it to be available for them in their personal process.

The confirmation page is something good that show clients how the service is reliable and trustworthy.

Usability study: recommendations

Round 1

● Recommendation 1: to make a more in-depth study of all the buttons to improve placement and exposure;

● Recommendation 2: to simplify customization process;

● Recommendation 3: make the final custom preview even better with check boxes for customer to confirm each item;

● Recommendation 4: implement a quick save order feature and a user profile area for repeat customers;

● Recommendation 5: make the status bar less prominent in the process, maybe make it optional per customer to decide;

● Recommendation 6: The confirmation page is great, make a ask for customer review right away!

Round 2

● Recommendation 1: make customization process more intuitive

● Recommendation 2: add elements to home page, like a drop down menu with quick shortcuts to other pages

● Recommendation 3: add striking imagery throughout the pages.

Refining the design

● Mockups

● High-fidelity prototype

● Accessibility

Mockups

Theme #1 : GETTING STARTED

Supporting evidence from the usability study.

● It was observed that 2 out of 5 participants had trouble finding the custom bouquet button.

● This means that this button needs a better placement or more evident design.

Participant 5, was confused when looking for the custom bouquet button: “"button too small and by the end of the page, is not super easy to locate..." P2

What changed?

● It was created an area with more exposure for custom bouquet orders at the top of screen.

Mockups

Theme #2 : CONFUSING CUSTOMIZATION PROCESS

Supporting evidence from the usability study.

● It was observed that 3 out of 5 participants had a hard time with the bouquet customization process.

● That means this process need to be simplified and made more intuitive.

Participant 1 felt frustration because they “got lost when working on the customizations because is not totally clear on which button to press and when..." P0

What changed?

● It was created a more organized customization screen split into 2 screens.

Mockups

Theme #2 : CONFUSING CUSTOMIZATION PROCESS

New page

● In this new step we have the last customization options, and the card area to fill out. After this step the customer will add the order to cart and go to the next screen.

Mockups

Theme #3: PREVIEW FEATURE

Supporting evidence from the usability study.

● It was observed that 3 out of 5 participants enjoyed to see the final bouquet preview with all items listed.

● This means that the preview feature is helpful with the ordering process.

Participant 3 was happy that “the final preview gave them the final look to make sure of all the customizations included, and yes, in the end that was how I wanted the bouquet to look like"

What changed?

● This screen was simplified but still accessible for the wide range of people with disabilities because it shows the items in a list and imagery, beside the voice over option for visually impaired persons.

Mockups

Theme #4: NECESSITY OF STATUS BAR

Supporting evidence from the usability study.

● It was observed that 2 out of 5 participants don’t see the necessity of having the status bar for a bouquet ordering app.

● This means that the majority of the customers would still like to see the status bar, but maybe that feature could be optional.

Participant 2 clarifies that "no need to see the status bar, putting the order was enough for me..."

What changed?

● Now the delivery area has an option for who would like to follow the order with a status bar.

Mockups

Theme #5: USEFUL NEW STEP

Supporting evidence from the usability study.

● It was observed that 3 out of 5 participants were disappointed with the payment page, because there is no option to save the information for future purchases.

● This means that we need to implement a system of user profile or a quick order saving option to speed up the process to repeat customers.

Participant 4 “the process was easy to understand but I wasn't happy at the end, we need to make available the option to a repeat customer or to create a saved profile with maybe a login area to store all the previous orders from that customer..."

Mockups

Theme #5: USEFUL NEW STEP

What changed?

● Now we have the opportunity to save the payment information by checking this checkbox, the customer will then be taken to the user profile page, to fill out the info, save and go back to the cart.

Mockups

Theme #6: CONFIRMATION PAGE

Supporting evidence from the usability study.

● It was observed that 4 out of 5 participants was happy to see the final confirmation page with all items added correctly.

● That means that the service is seen as something with a high quality of service, which would influence the customer to place a good review.

Participant 4 was happy because "the preview feature was helpful for me, I kind of was happy to see that I actually was able to assemble a nice bouquet at the end..."

What changed?

● Now the confirmation page is more clean with the review button just below it.

Mockups

Theme #6: CONFIRMATION PAGE

New page

● Review page added to close the user journey, when clicking submit review, the user is taken to the home page, where he can read the newest reviews at the bottom of the screen.

High-fidelity prototype

Fase 1: Solving issues

with pages flow, user

experience sequencing

High-fidelity prototype

Fase 2: Solving issues with navigation, button location and sizes, and customization process

High-fidelity prototype

Fase 3: Solving issues with navigation bars, delivery time, payment pages, and user profile pages, setting up final aspects of customization process.

https://www.figma.com/file/2ZtMXzq

6vHKpskK6Nu262Z/Untitled?type=de

sign&node-id=179%3A190&t=hcdzH

77XFfrVL63g-1

Final Usability Study

Accessibility considerations

Added the movement to every page on the app, that will go forward or backward with a screen drag movement now.

Used icons in a lower navigation bar to help make navigation easier and intuitive.

Used detailed imagery for flower bouquet and their elements to help all users better understand the designs.

Going forward

● Takeaways

● Next steps

Takeaways

Impact:

The app makes users feel like Blue Blooms really thinks about how to meet their needs.

What I learned:

Onequotefrompeerfeedback:

"Ilikethisappbecauseitasksmethingsthatnootherfloristapp everaskedmebeforelikebouquetstyle..."

"Theappwashelpfultospeedupmybouquetorderingprocess thatIusuallydooverthephone.IamgladthatIwasabletosee thebouquetwhileIwasdecidingonflowersandcolors."

While designing the Blue Blooms’ app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs and they are as important as the ideas from designer, this is a collaborative

effort for the best User Experience app.

Next steps

1 2 3

Improve the Customization process by incorporating slider feature for all bouquet

itemized options, on all preview pages.

Review Payment page and make it more user friendly.

Improve User Profile capabilities by incorporating slider feature in the previous section part.

Let’s connect!