-05.svg)
BloomBook
BloomBook is an application designed to provide users with a seamless and engaging experience while exploring and ordering flowers. Unlike conventional flower ordering websites that offer pre-designed and uninspired bouquets, BloomBook allows users to customize every detail of their order, from the individual stems that comprise their bouquet to the paper and ribbon that bind it together. With BloomBook, users can indulge in the joy of creating a truly unique flower arrangement that reflects their individual tastes and preferences.
01. Project Overview
The Problem
Traditional flower ordering websites offer a limited and generic selection of pre-designed bouquets, leaving customers feeling uninspired and disconnected from the experience of choosing and arranging flowers. In addition, the ordering and delivery process can be uncertain, often resulting in frustration and dissatisfaction from the customer.
The goal
Design a mobile app that provides an engaging experience to users as they craft and place their orders. Allow users to create custom flower arrangements, shop from local florists, and reliably track their orders.
My role
My role in this project encompassed a range of tasks including conducting interviews to gain insights on our main user groups, creating both paper and digital wireframes, developing low and high-fidelity prototypes, conducting usability studies to validate designs, ensuring accessibility considerations were taken into account, and constantly iterating on designs to improve the overall user experience.
02. Understanding the User
User research
To gain insights into users’ experiences and attitudes towards purchasing flowers, I conducted an online survey followed by interviews. From these findings, I identified four common pain points that users experience when ordering flowers online.
One of the primary user groups that emerged from my research was working adults who value convenience and reliability when sending gifts to their loved ones. This supported my initial assumptions about the potential users for a mobile flower ordering app. However, research revealed another user segment: users who want a way to customize their own flower arrangements as a means of expressing their creativity.
Quantitative Research
First, I surveyed 50 individuals about their experiences buying and receiving flowers.
Qualitative Research
Next, I interviewed 12 potential users who have ordered or received flowers from a flower delivery service within the past year.
- What motivated you to order flowers online?
- How satisfied were you with your previous online flower delivery experience?
- What factors are important to you when purchasing flowers online?
- What did you like or dislike about the online flower delivery process?
- How important to you is delivery time & tracking information when selecting a flower delivery service?
- What would make ordering and receiving flowers an even more special experience for you?
- Respondents were largely unsatisfied or neutral towards their past experiences buying flowers online. Some of the reasons stated were as follows:
- “I didn’t know what the final product would look like”
- “Expensive, delayed, poor quality”
- “I didn’t know when my recipient was actually going to receive their order or if the flowers would look fresh and nice when they arrived”
- “Not a great selection”
- “Looked wilted when they arrived”
- When asked what would make receiving flowers an even more special experience, respondents answered as follows:
- “If they had new and exciting arrangements that can be more personal to my taste and lifestyle, and include plants that aren't necessarily popular in bouquets.”
- “Knowing the person who sent them designed the bouquet with me in mind.”
- “I would love if my flowers came with a card or tag identifying all the varieties in the arrangement in case I didn't know what they were,”
Pain Points
From my research, I was able to identify the following four pain points that are common among users who order flowers online:
1
Customization
Users are uninspired by and bored with the flower selections offered by many large flower delivery websites. They want the creative freedom to design and customize their own flower arrangements.
2
Convenience
Flowers have to be ordered from florists in advance and delivery has to be coordinated with recipients. Users want a way to order flowers at the last minute and provide recipients with a way to track the order.
3
Quality
Users are unsatisfied with the quality of flowers from large flower delivery websites and find that smaller, local florists put more effort into sourcing fresh and unique stems.
4
Delivery
Flower delivery is often unreliable, especially when flowers are sent as a gift. Recipients do not know to expect a delivery, which can result in flowers being left outside for long periods of time to wilt or get stolen.
User Personas
Based on the insights gathered from my research, I created two user personas that enabled me to gain a deeper understanding of the needs, behaviors, and goals of my target audience. My primary user persona, Jane, is a busy young professional who values convenience and desires a more personalized flower ordering experience. By keeping Jane's needs in mind throughout the design process, I was able to design an application that caters to her unique preferences and streamlines the ordering process to save her time.
Jane
Elliott
User Journey Map
03. Starting the Design
Paper Wireframes
When it came time to begin creating paper wireframes, I made sure to draft multiple iterations of each screen to ensure that the design would be user-friendly and effective. By taking the time to refine the design on paper, I was able to catch potential issues and make improvements before moving on to digital wireframes.
For the home screen, I focused on streamlining the ordering process by including clear and concise options for users to select from. Additionally, I made sure to include visual cues, such as icons and consistent spacing, to make it easy for users to navigate the app.
Digital wireframes
Home Screen
Throughout the initial design phase, a challenge for me was prioritizing what to include on the home screen. While this iteration makes it easy for users to find local florists, it is not clear how users are supposed to begin an order.
In later iterations, I added a large "start an order" button to prompt users to begin the main user flow. I also removed the “order again” section from the home screen, moving it to a page within the account tab.
Custom Order Screens
When designing the custom order screens, I was faced with the challenge of including all the necessary components without overwhelming the user with too many choices.
To address this issue, I experimented with different design solutions and found that using horizontal scroll areas was an effective way to organize and contain each section, making it easier for the user to navigate and understand the options available to them.
Final Digital wireframes
Welcome
Sign In
Join
Home
Map
Florist Page
Order Page
Order Customization
Cart
Order Review
Order Confirmation
Low Fidelity Prototype
After I completed my digital wireframes, I worked on creating a low-fidelity prototype of BloomBook's primary user flow, creating and ordering a custom flower arrangement. I focused on making the navigation between sections smooth so that this prototype could be used for usability studies.
Usability Study Findings
Throughout this project, I conducted two rounds of usability studies. The initial study was focused on wireframes and helped to collect valuable insights that informed the creation of mockups. The subsequent study centered around a high-fidelity prototype, which aided in identifying specific areas where the mockups required further refinement.
Round 1 Findings:
1
Users care less about the florist they order from and more about the actual flowers.
2
The custom ordering pages were overwhelming to users.
3
Users want a way to send their recipients order tracking without ruining the surprise of receiving flowers.
Round 2 Findings:
1
The custom ordering pages still needed more simplification.
2
Users want a way to favorite their past orders for easier future ordering.
3
The "past orders" bottom navigation tab was unnecessary and could be moved to the "account" tab.
04. Refining the Design
Mockup Iterations
Minimizing Cognitive Load
The main feedback I received during the first round of usability testing was that the order customization pages were overwhelming for users to navigate. Taking into account Hick's Law, which states that the more choices or stimuli a users face, the longer it will take them to make a decision, I sought to reduce visual clutter and the number of options presented to the user on each screen.
As I continued to refine the design, I incorporated the concept of progressive disclosure, dividing the custom ordering user flow into three screens, while keeping the order summary tab visible throughout the ordering process. This design technique allowed me to present complex information in a way that was more manageable for the user. By gradually revealing information as the user interacts with the interface, I was able to mitigate the complexity of the ordering process and create a more intuitive and user-friendly experience.
Before First Usability Study
After First Usability Study
After Second Usability Study
User Flow Adjustments
During the second usability test, participants expressed frustration with having to commit to a florist at the beginning of the ordering process. To reduce the number of choices users are presented with, I adjusted the user flow so that users begin by inputting their delivery zip code, rather than selecting a florist. Users still have the option to order from specific florists, but custom orders are now assigned to a florist based on the user's delivery location and florist availability.
Final Mockups
Splash Screen
Welcome Screen
Sign In
Create Account
Home Screen
Location Prompt
Input Delivery Location
Map
Order Screen
Stem by Stem Size Selection
Stem by Stem Flower Selection
Stem by Stem Additions
Cart
Order Review
Order Confirmation
Account
My Account
App Settings
FAQs
Favorites
High Fidelity Prototype
After integrating the feedback I received from participants during usability tests to iterate upon my mockups, I developed a high fidelity prototype for BloomBook's primary user journey, creating and ordering a custom flower arrangement.
05. Visual System
Typography
To keep the typography clean and accessible, Nunito, a sans serif typeface, was used for all interfaces within BloomBook. Swear Display Cilati was used as an accent font on the splash screen.
Color palette
For BloomBook's color palette, I opted for hues inspired by the natural tones of a California poppy. The primary color, used for buttons and on the app's splash screen, is a lively shade of orange, complemented by earthy green and mushroom shades for the secondary and tertiary colors. A soft eggshell tone was used generously throughout the design to keep the layouts uncluttered.
Components
Accessibility Considerations
1
Icons
Functional icons all have at least a 3:1 contrast ratio with the background and are simple, intuitive, and consistent shapes.
2
Consistency
I ensured that repeated components such as the home button, back arrows, and the bottom navigation bar occur in the same location on each screen within the user flow.
3
Typography
The fonts used throughout my design are accessible, clean, and simple, sans serif fonts. I use standard sizing throughout the user flow.
06. Takeaways
The Impact
BloomBook reconnects users to the experience of choosing and arranging flowers, promoting creative expression and providing a convenient way for users to send gifts to their loved ones.
What I learned
During the design process, I learned that constant iteration and user testing were crucial to creating a product that truly meets the needs of its intended audience. By continuously testing and evaluating the product at different stages of development, I was able to identify areas of improvement and make adjustments that ultimately resulted in a more user-friendly and effective application. These iterative cycles not only helped to refine the design of the app but also ensured that it remained in line with user expectations and preferences.
Next Steps
1
User Research
Conduct more user research, this time focusing on florists to understand what features they would like to see in a mobile ordering app.
2
Usability Study
Conduct another round of usability studies to determine whether users' pain points have been resolved.
3
Florist's End
Develop BloomBook from the florist's end, creating a simple way for florists to catalogue their inventories and accept mobile orders through the app.