Bloomer App

Overview

I designed Bloomer, a mobile app to modernize florist apps and provide users with peace of mind through the entire process of finding flowers to getting the flowers delivered in a timely fashion.

I focused mainly on two features: a create your own bouquet and the tracking features.

With Bloomer, users will be able to find a plethora of information on each bouquet product, utilize a modern and robust custom bouquet feature, and have full transparency over the entire delivery process.

Type

Personal UX Case Study
Mobile Design

Team

Austin Leung (Solo)

Timeline

3 Months

Role

UI / UX Designer
User Research, Visual Design, Prototyping & User Testing

With Bloomer's robust and easy custom bouquet feature, you will be able to make informed decisions and easily understand what exactly is going into your bouquet! No more scrambling to look up what a flower looks like or what flowers should go together for your special occasion! Bloomer gives you all this information while you're building your bouquet in a simplified, neat and informative package!

So long are the days of wondering if your flowers were delivered on time or even in fresh condition. With Bloomer, all orders are equipped with detailed order tracking, including a live map, delivery images, and more!

Skip to Final Design

Problem

Flowers are a universally appreciated and versatile gift in culture -- given for a happy anniversary celebration, a touching reunion or even the passing of a loved one. Because of its prominence, many of us have or will have to buy flowers at some point in our lives.

However, despite in-person shopping slowly being overtaken by online marketplaces, the florist market remains in the past with many florists choosing to focus their resources on in-person interactions rather than online. Understandably, it is often easier to advise florist customers in-person. However, many florists choose to neglect their online presence, having outdated designs or unintuitive user flows, dissuading many online shoppers.

Decorative text: Lack of information and transparency in the delivery process can lead to users feeling frustrated.

Quote: I have to keep googling what each flower looks like when making my bouquet.

Quote: I hate having to call the florist or even my recipient to see if my flowers were delivered.

Quote: I prefer shopping in-person to guarantee bouquet quality and appearance.

Quote: I'll avoid ordering online because it's easier to get info across in-person.

Currently, purchasing flowers online is an unpleasant and uncertain process, yet also the most convenient!

How can we make purchasing flowers online more accessible and reliable?

Research

Online Studies

Before tackling the problem, I did some desk research to see statistical data on how consumers have interacted with flower purchases and to note identified issues existing in the market already.

A study on millennials' habits with flowers by the American Floral Endowment and Floral Marketing Research Fund revealed issues existing within this specific demographic. Although my target users aren't solely millennials, the studied data from this report served as a good basepoint and hint as to what consumers in general look for in the online and offline floral market.

Millennials value customization and personalization.

A key finding from the study found millennials "valued customization and personalization," with many participants voicing a longing for features such as custom bouquets, as described below.

Many millennials valued things such as "more affordable prices" or "in-store deals." While reading the study, I quickly realized there were many larger factors at hand, such as prices or friendliness; however, I decided to focus on attributes that I was able to improve through a hypothetical app. This meant setting aside many users' frustrations and trying to solve several smaller problems.

After reading the report, I concluded on a few main concerns from users that were not directly related to store practices and rather the experience:

Millennials value customized features to help make their experiences special and memorable
Whether online or offline, many millennials felt that timely and detailed order tracking were pivotal in choosing where to purchase flowers
On average, millennials do not regard themselves as knowledgeable about flowers and appreciate learning about flowers and how to take care of them

From these findings, I decided to pivot Bloomer's focus:
‍

Creating features that emphasized customization and giving users more power
Providing users with information and details about products or processes in order to reduce confusion
Conduct interviews to specify what features users want in terms of customizability and transparency

Competitive Analysis

To better understand how the online florist market was unsatisfactory, I decided to learn how existing apps and mobile websites sold their products and handled their features through a competitive audit. In this report, I chose to focus on the most popular florist apps and companies, some smaller "mom-and-pop" stores, and an indirect competitor within the same market to get a wide breadth of data.

View Competitive Analysis

Defining User's Needs

| User Surveys

After doing heavy desk research, I decided to use surveys as a quick way to gather more insights on users' paint points and experiences in the online florist market. In these surveys, I mainly targeted Gen-Z and millennials, as I decided to shift my focus towards these targeted users, due to previous data and ease of access to them for testing.

| User Interviews

Then I conducted user interviews with a range of people, including regular in-person flower buyers to yearly online flower buyers. I aimed to get more detailed information on pain points and experiences that online studies or surveys could not offer. I wanted to gain information on specific issues and personal stories about the flow of online flower purchases.

After conducting the interviews, I found three major paint points, which have been personalized via personas as shown below to make designing for Bloomer more personable.
‍

Visibility of Delivery: Oftentimes, flower deliveries aren’t tracked and consumers are often left confused on whether the product was delivered or not.
Time: Working adults often can’t devote enough time to travel to the florist and spend time picking out a bouquet.
Outdated: Current flower apps feel clunky and are hard to use, hence users opting to shop in person, which can introduce another set of problems.

Learnings

Based on the desk research, competitive analysis, and user interviews, I decided to narrow the scope of my project's problem and focus on several key overlapping issues I found.
‍

Chart that shows three key user feedbacks and what solution direction I am deciding to go in.

Design

Starting Off

After creating my solution directions from my research, I decided to do an idea brainstorming session where I wrote down several key features and individual micro-features or ideas that could accompany them. The idea was to write a variety of ideas, with no restriction on cost, code, or existing market features.

Screenshot of my brainstorming of ideas for the app

Narrowing Down Features

I decided to combine several of the new ideas into a singular feature that I had initially wanted to design after user research - a custom bouquet feature. Many of the ideas above, such as more detailed information for each flowers or 3D / augmented reality depictions can be utilized in this feature.

Because custom bouquet features generally have a very similar linear flow, instead of testing design alternatives I decided to begin designing for an improved version of existing custom bouquet features.

| Iteration 1

Iteration one revolves mainly around having sizes in the bouquet. It allows the users to pick between four sizes, each with a set number of flowers/stems the user can pick. The initial aim was to simplify the users' process, attempting to reduce choice paralysis on the flower selection screen by limiting the number of flowers they can pick. The full user flow involves four screens.

| Feedback 1

I presented this feature alongside the entire Bloomer app to close friends and peers at UCI to gather some insights. Since I had already designed some basic wireframes on Figma, I let the participants interact with them, asking them to perform moderated tasks, such as creating a custom bouquet of five flowers.
‍
Users enjoyed the flow as an idea; however, there were some limiting features that muddled their experiences.

Chart of pro's and con's and user feedback of iteration 1

| Iteration 2

This iteration of design improves upon the first iteration in several ways due to the usability testing.

Stepper / Progress Tracker: I decided to add a stepper at the top of the feature, showing the user where they are in the custom bouquet creation process, as many users complained about confusion in terms of length of the process. This also doubles as navigation, as users can press one of the three page names to go back and forth.
View Selection Button: Users can click this button to quickly view at their full bouquet selection and make changes easily
Search Functionality: Added a search button for users to quickly parse through
Increased visibility of CTA Button: Added a sticky button at the bottom of the page, showing users at all times the next step

| Feedback 2

Most users reported back with a more positive experience with this iteration, claiming it was "more clear what [they] had to do [during the entire process.]" Improvements through added features like a sticky button and restructured UI proved to raise their experiences. However, with these new features, some were not implemented in the most ideal way, leading to confusion and mixed emotions as depicted below.

Chart of pro's and con's and user feedback of iteration 2

| Final Iteration

After going through rounds of usability testing, I decided to both incorporate old, positively-received features and and add new additions, as described below in the graphic.

A large issue for confusion I found while testing was uncertainty on navigation. Previous iterations utilized singular CTA buttons at the bottom of the page moving the user to the next step of customization; however, many users voiced confusion about the linear path through customization and "if the back button exits the entire feature or just the current page" or how to go back to edit their bouquet due to a change of mind. I decided to employ more of a split navigation style versus the previous very linear navigation style to help this issue.

Additionally, aside from the new navigation style, I utilized changes in certain buttons, such as the visual rework of the "View Selection" button, to make the screen less visually cramped and refined other details as well, as shown below!

High Fidelity Design

Given all the usability testing and user goals discovered, I heavily shifted the user interface to be more clean and simplistic. I also made many changes in simplifying the user processes for many of the features, constantly reviewing the initial design goals as a guide to my process.

View Figma Design Prototype

Features in the App

From my desk research and competitive analysis, I found that users wanted a level of customization in their purchases to make it feel personal and special. When looking at existing apps on the market, the custom bouquet features felt unrefined and outdated. In Bloomer, I implemented features like extensive flower details, split navigation, and clean UI to help the user have an easy and fruitful process in creating their own bouquet!

Whether it be on a flower product page or an individual stem in the custom bouquet feature, Bloomer will have extensive flower information for each one! Gone are the days of you looking at a flower's scientific name and wondering "what does this look like?" or "what does this flower go with?" Helping beginners and experts alike, this new feature will make shopping online for flowers an informative and easier task -- just like in-person.

Ever left wondering if your flowers were delivered or how they were delivered? Does the bouquet you bought really look like what it's portrayed online? Bloomer utilizes delivery pictures, live tracking, and a fully transparent end-to-end process to help guarantee customers' sanity and peace of mind!

All important information will be present above the fold, allowing users to see what they need immediately!

Through user interviews, I found that many flower buyers find online options to feel outdated and simply not worthy of use, often opting to buy flowers in-person due to unhappy experiences online. Whether it be on an app or a mobile website, many florists neglect their online presence. Bloomer applies modern principles and design choices to make the user's experience on the app straightforward and happy!

Future Steps

| Redesigning the design system and brand identity

Looking back on the case study months later, I feel that my user interface design skills have improved and that the overall aesthetic of the app feels a bit dated. I think there's too much white space -- although nice on the user -- and thus, it doesn't feel very unique and doesn't have a strong brand identity. When I designed this app, I initially designed it with mainly user experience in mind, thus making it not visually as pleasing.

| Utilizing more modern ideas to further improve

I think the features included in the app are all good for the user, as bolstered from my desk research, competitive analysis, and interviews. However, I feel that the app could do better than simply improve on existing market features. I think that my next steps in the app would be trying to incorporate even more modern features, such as AI or 3D models or such.

By including more modern ideas, the app would grow from simply a clean upgrade to a new, perhaps revolutionary app!

Reflections

🗒️ Keeping myself accountable

Bloomer being a solo case study served to challenge me in staying motivated and committed to keep progressing. The biggest issue I experienced with this project was keeping myself on a timeline, as there would be no one to keep myself accountable in terms of completion. I found myself feeling unmotivated many times or in a slump. However, a bit into the project, I started setting hard deadlines and dated milestones for myself, which helped a lot in keeping this case study from going on forever.

⚒️️ Iterating through the entire process is essential

Before starting this project, I wasn’t aware of how many times I would have to keep iterating through my designs, whether it be through user testing or design changes based on new data. This was especially eye-opening when I reached the high-fidelity mock-ups where I previously assumed that the product would be “done” at that point.

🌻 Good design can sometimes not be pretty

When first making designs for Bloomer, I found myself trying to design the most aesthetically pleasing screens. However, as I kept testing my designs through user testing, I often found those designs to be not intuitive for users or simply too complicated if viewed from the developers' side. I found myself putting too many elements or colors on pages which served to detract from CTA buttons or the overall theme of the site.