Bouquetiful
UI/UX Case Study
Overview
Role: UX/UI designer
Scope: Google UX Certificate Project
Duration: October 2021-November 2021 (1 month)
Bouquetiful is a mobile app that allows user to search for floral arrangements by occasion, flower type, and best sellers. Users can then preview the arrangement, place an order and make online payments for flower delivery.
Problem:
"
Busy family and friends who want to buy a sentimental gift for friends and family but don’t have time to browse for flowers in person.
"
Goal:
Develop an app that allows users to preview flower bouquets in advance online and allows for online payment for delivery
Research
User Interviews
Empathy Maps
User Personas
User Journey
I conducted virtual, one-on-one interviews and created empathy maps to get an initial understanding of what issues users face when purchasing flowers. The results showed that the primary user group tends to buy flowers for special occasions and is inconvenienced by the process of buying flowers. They are also looking for the best value for money.
The results differed from initial assumptions which thought that a flower preview app would be used by users who enjoy making recurring purchases for themselves, however, research showed that these individuals prefer buying flowers in person and the experience of buying flowers in a shop.
Pain Points
01
Time
Users feel that they don't have enough time to buy flowers in person.
02
Value
Users are looking for the best value for money; they don't want to spend too much for a decent looking arrangement
03
Convenience
Users want to search for flowers by occasion; it's troublesome for users to arrange bouquets on their own.
Ideation
Ideation
Paper Wireframes
Digital Wireframes
Low-fidelity
Prototype
User Flow
User Flow
After the initial interviews with users, I spent some time ideating on ideas for an app. I wanted to place emphasis on the preview aspect but also wanted to include features that would address users pain points. Since most of the users are looking to buy a beautiful arrangement at a reasonable price, and quickly, I placed importance on a simple, streamlined user flow.
Wireframe
Now for the initial designs. I sketched out a few preliminary ideas for each screen to generate multiple layout ideas. I then pieced together some of my favorite components and layouts to create the desired layout for each screen. Next step was to digitize the wireframes and make some low-fidelity prototypes for usability testing.
​
View interactive prototype here.
Conceptualizing occasion filter nav options. Desk background image sourced from Unsplash.
Initial digital wireframes for user flow outlined above.
Prototype for user flow 1.
Design & Usability
Usability Test 1
High-fidelity Prototype
Usability Test 2
Mockup
User Flow
First iteration of high-fidelity prototype for the Order Checkout Process
Task
1. Find bouquet for special occasion.
2. Place order online.
3. Go to checkout and input your credit card details
4. Complete payment and confirm order
The low-fidelity prototype outlined above was used for the first usability test, where 5 remote users tested the checkout user flow. The test found that users had difficulty finding the "search by occasion" filters, which were not clearly labeled in the wireframe. This led to changing the filter from a pop up modal, to a simple navbar.
Before
After
Not clearly labeled
Easy to find navigation
Many users also noticed there wasn't an area to add delivery details; address fields were also added to the high-fidelity mockup.
Before
After
Delivery details section added
Usability
After conducting the second usability study with the high-fidelity prototype, 3 out of 5 users mentioned they would like to see more details about the flowers or bouquets before adding item to cart. Users gave the following main reasons:
Users felt that the industry standard is to have a stand-alone page where users can view item details.
Standard
Users wanted to be able to see what other users were saying about a product. The main user of this app is looking for best value for price so places importance on product reviews.
User Reviews
Since the user is not able to speak with staff directly, user want to be able to read details about what is included in the product and preview zoomed in details of the product photos.
View Details
Final Solution
Based on the feedback from the second usability study, an additional user flow was added to the checkout process that allows users to click on an item and view the details as well as customer reviews. This process is more in line with other online shopping apps and gives a richer ordering experience while keeping the checkout process simple and concise.
Key Frames
Next Steps
Must have
-
Change typeface in the app for better readability and accessibility
-
Add delivery date selector to the Order Checkout Process
-
Add error messages and tooltips to help users resolve issues on their own (eg: credit card input validations)
Nice to have
-
Option for recurring orders
-
Product detail overlay on hover for thumbnail items
-
Desktop version