An app for customizable flower bouquets and an online ordering system!

My Role

Solo UX Designer and Researcher

Timeline

6 weeks


Background

This was my first UX project ever! It was part of the Google UX Design Certificate, and was the first step in exploring the field of UX design for me. For this project I was given a topic (online floral arrangement app) and was tasked with creating a mobile app. I wanted to design an app that went a step above your everyday floral arrangement app. I wanted to create a way for customers to be able to quickly and efficiently order floral arrangements, with the option of customization available. This was to make sure customers would have a seamless process of viewing and ordering flower arrangements, and have the ability to create their own arrangements if those available were not to their liking. Enter: Lobo’s Flowers!


Starting the Research

Competitive Audit

I wanted to get some background information about similar apps and the competitors that my app would have. I decided to do a competitive audit with two direct competitors: “1800 Flowers” and “The Bouqs Co.”

After analyzing these two apps and coming up with their positives and negatives, I decided to come up with aspects from the two competitor apps I would like to incorporate or improve upon in my app. These are the main aspects I focused on:

  1. Bouquets for a wide range of budgets AND occasions

  2. Consistent and compelling brand image across the app

  3. Bright and cheerful tone

  4. Tracking Option

Initial User Interviews

I conducted a few initial user interviews with peers in my certificate program to understand their experiences when ordering floral arrangements from mobile apps. After finding applicable participants I conducted my interviews and gathered data points that I could group into these insights:

Time

Variety of Options

Reliability

  1. Busy customers don’t have enough time to browse through floral bouquets and order them in person.

  2. It’s difficult to find floral shops with fully customizable bouquets as well as pre-made bouquets at a decent price. There are also limited options when shopping in-store.

  3. Being able to track an order is reassuring, and necessary when ordering bouquets for special events.

User Personas

After gathering some insights I got to work on creating two user personas to keep in mind when designing my screens.

User Journey Map

I created a user journey map for Marcus’ persona that would give me an idea of the steps and feelings a user would have in their process to order a floral arrangement on the app.


Starting the Designs

Low Fidelity Wireframes

After making some paper wireframes I moved onto creating some lofi digital wireframes on Figma. I kept in mind all of the insights from my research as I designed these lofi wireframes.

Homepage

Trending

Special Occasions

Customization

Bouquet Confirmation

Cart

Billing/Shipping

Order Review

Success Page


Usability Study and User Testing

After completing my lofi wireframes and prototyping them, I wanted to test my designs so that I could get a feel for where I should make improvements in my designs. I organized a usability study with 5 people in my certificate program

Study Type

Umoderated Usability Study

Location

Remote

Participants

5

Length

30 minutes

Findings

For this usability study I had users explore the app on their own before going through the flow of ordering a customizable bouquet, and then a pre-made bouquet. Based on this and the interviews I conducted at the end of the usability study, I came up with a few changes I would want to incorporate into my final designs:

  1. Participants indicated that if they needed to modify their order or go back, there wasn’t an option for that, so in my next iterations of my designs I can add “back” buttons.

  2. Participants also expressed that after successfully placing their orders they were not given a tracking number which was confusing… so I will make sure to add this to my final designs.

  3. There was some frustration among participants who were customizing their bouquets but reported not being able to see all the options to add to their bouquets. Based on this, I will add a carousel in my final designs so users can browse through all the available flowers they can add to their bouquet.


Mockups + High Fidelity Prototype

Using the feedback from my usability study, I made design changes as I worked on my mockups. I made sure to choose a color scheme and font type that was accessible before going any further. Here are some of the design changes I made:

I made sure to include a trackig number on the success screen after a user orders a bouquet.

Users said the carousel to pick flowers for their customizable bouquets wasn’t working, so I made a carousel that users could tap and drag to reveal flowers they could add to their bouquet.

Final Screens and Prototyping

After I designed my mockups, I prototyped my final screens to finish up my high fidelity prototype! These are my final screens:

Homepage

Trending

Customization

Special Occasions

Bouquet Confirmation

Cart

Billing/Shipping

Order Review

Success Page

Reflections

Wow! This was my first ever UX project! 🎉 I am so proud of myself for creating this project from start to finish, and I am more excited than ever to keep going with my certificate and see where this UX career takes me! Here are a few if the many things I learned while working on this project:

  1. With practice comes a lot of improvement. I was completely new to using Figma and it was extremely daunting at first. However, with every hour I spent working on this project I felt myself becoming much for confident and improving my skills!

  2. Starting a project seems pretty overwhelming in the beginning… I mean, there are so many steps and stages to go through! But little by little watching the progress being made is so satisfying and it’s all worth it in the end.

  3. If you don’t understand something, take the time to go back and review lessons and texts. I found the answers I needed after backtracking and reviewing what I needed to!

Going Forward

While I am proud of the way the Lobo’s Flowers turned out, I believe there are definitely additional features I could add to make the app even more special. A few other features I would like to consider adding to the app include a quiz users can take which would help if they have trouble deciding what type of bouquet they should buy. Additionally, including a subscription service where users can schedule regular deliveries of their favorite bouquets would be a feature that would be unique and beneficial to our users. Since we focus on personalization, the option to add a note/card with each purchase would be a good idea to really emphasize on our goal of offering unique and personal floral arrangements.