Cate Hayes
UX designer

Blossom

Custom Bouquet App

Blossom is an app that allows users to design and order custom flower bouquets, order from a selection of pre-arranged bouquets, and live chat with florists for advice on flower arrangements.

The problem: Ordering custom bouquets require a trip to the florist, but many users who want the ability to customize their bouquets lead busy lives.

The goal: Give users the ability to quickly design and order flower arrangements, chat with a florist, and send arrangements to different recipients without a trip to the florist shop.

Understanding the User

Interviews

To best understand the users of my app, I conducted interviews that asked users what their user journey looked like when buying flower arrangements. 

The majority of respondents preferred the convenience of buying flowers on an app or website but said the downfalls of this were:

  • Limited customization features

  • Hard to tell how big the arrangement would be

  • The checkout process for sending arrangements could be confusing

User Pain Points

  1. No customization on flower delivery apps/websites

    Most online floral delivery services only offer pre-arranged bouquets. This app will help solve this pain point by offering online flower bouquet customization.

  2. Can’t consult with a florist when ordering online

    Ordering flowers online often lacks the personal connection of speaking to a florist. With the chat feature of the app, users can ask for recommendations from a florist in real-time.


  3. The checkout process can be confusing when sending bouquets

    Sending a bouquet online can be confusing, whether it be sending multiple bouquets or confusing wording throughout the checkout pages. This app allows you to fill in separate delivery info for each bouquet. 

  4. Can’t always tell the scale/size of the bouquet

    Ordering a bouquet online means there is often no way to know how large or how many stems will be in the arrangement. Users will be able to customize the size of their bouquets and will know what they are getting. 

Blossom

Personas

This project was my first experience with creating personas, and I found that they really helped me design with a user-centered mindset.

Throughout the design process, I kept in mind the need for customization when ordering flowers and I wanted any user to be successful in completing this user flow, no matter if they have experienced ordering flowers online or not.

Sketches

I began the iteration process by drawing some quick sketches of the ideas for a homepage. This was the first app I designed, so I drew from my knowledge of shopping apps as well as user pain points to try and create a few different homepage designs. Once I was done, I put a star next to my favorite aspects of each wireframe.

My original design for the customization page

My original design for the customization page

Wireframes/Low-Fidelity Prototypes

My first iteration of wireframing was focused on creating a custom bouquet and being able to shop for pre-arranged bouquets as well.

To the left, you can see my original wireframe design for the customization page had the flower options along the side with a bouquet preview and text at the bottom showing the user’s choices. However, after my first usability test, I found that this design was the most confusing page of the whole app, which led me to change the design in the next iteration.

Checkout user flow

Checkout user flow

User Testing

I conducted unmoderated usability studies to truly test how usable my app was with no guidance. I had five participants each time record themselves performing basic tasks using the app.

Round 1 findings

  1. Customize page design needed better cues for users 

  2. App features should be more intuitive

  3. Input and search features should be refined

Round 2 Findings

  1. Homepage layout was not intuitive

  2. Iconography needed for better navigation

  3. Refine button copy and wording for better clarity

Customization user flow

Customization user flow

Mockups/High-Fidelity Prototype

The biggest challenge I faced when designing the mockups/hi-fi prototypes was figuring out a way to design and prototype the flower customization screen. Since this was my first design project using prototyping features, it was a learning curve to figure out how to correctly prototype the elements I had created in my mockups. I had a specific idea in my head that I really wanted to see through, and so I ended up digitally drawing the flower illustrations in order to provide the customization that I was picturing.

Accessibility Considerations

  1. From the start, I made sure that my app had a settings page where users could change their language, text size, and other settings for maximized accessibility.

  2. The color contrast ratio used throughout the app design passes the Web Content Accessibility Guidelines.

  3. Animations provide direction without interfering with navigation or becoming a distraction.

Takeaways

What have I learned from this project?

I learned an incredible amount of hard work and patience from this project, not to mention all the technical skills that a UX designer and/or researcher needs. Working on an app for the first time taught me how to conduct research for a UX project and how to iterate on a design to help a user solve their problem. I found creative ways to work around the technical challenges I faced during the prototyping phase of the app, and I'm proud of the solutions I came up with to improve the user experience.

“I could definitely see myself using this app, the navigation and flow of the app are very straightforward and easy to use. Having the option for customization is really helpful.”
-Study Participant A