My original design for the customization page
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.
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
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.
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.
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.
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.
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.
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 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.
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
Customize page design needed better cues for users
App features should be more intuitive
Input and search features should be refined
Round 2 Findings
Homepage layout was not intuitive
Iconography needed for better navigation
Refine button copy and wording for better clarity
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.
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.
The color contrast ratio used throughout the app design passes the Web Content Accessibility Guidelines.
Animations provide direction without interfering with navigation or becoming a distraction.
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.