B’s Blooms
An end to end application providing users the ability to customize bouquets from a local florist and place the order for delivery to avoid missing out on high quality bouquets.
Role
UI/UX Design, User Research, Interaction Design, Paper and Digital Wireframing, Low and High-fidelity Prototyping, Conducting Usability Studies, Iterating on Designs.
Problem
Busy people often lack the time to pick up bouquets themselves or be able to deliver flowers to others. The ability to get good quality bouquets is another problem, since by the time most are able to stop for flowers, most bouquets are gone or are low quality.
Product Goal + Target Audience
The goal is to design an app for B's Blooms that allows users to easily order customized and quality bouquets for either themselves or others that is conveniently delivered to their doorstep. The target users are between the ages of 18-60 years with busy schedules.
User Research
I conducted interviews and created empathy maps to gain a better understanding about the users I’m designing for as well as their needs. A primary user group identified through research were working adults who enjoyed getting flowers for themselves and others but didn't have time to stop at a store and get them. They also aimed to get fresh quality flowers.
Major Pain Points
Time: Working adults are too busy to be able to stop and get flowers
Quality: Sometimes by the time they are able to get bouquets its not the best quality.
Price: Buying lower quality bouquets for higher prices
User Journey
Design
Connecting ideas with design solutions
Following research I started drawing and iterating sketches on my iPad. This helped me decide which feature I liked from each draft when I started to create the low fidelity wireframe.
These are the low-fidelity sketches of the home screen. The stars signify the features that I liked for the final sketch.
Low Fidelity Digital Wireframes
I created the low fidelity digital wireframes through Figma. As the design phase continued, I made sure to base screen designs through the feedback and findings from the user research. After creating the digital wireframes I continued by creating a low- fidelity prototype. The primary user flow I connected was going through and ordering a bouquet. This prototype was then used in a usability study.
High Fidelity Mockup
Using Figma the low-fidelity wireframes were turned into high fidelity mockups.
Color Palette
When designing the app the goal was to create a simple, clean look that is gender neutral. Shades of green are shown throughout multiple screens. The color green was chosen as it often comes to mind when thinking of nature. Black is also found throughout the app. Both colors help give a clean and modern look.
Logo
The logo was created using the brand colors found in the app specifically dark green used for B’s Blooms and a slightly lighter green for the bee. Using a typography that is clean and easy to read. Attached to the letter s in the word blooms is a bee flying away from the company name.
Typography
For the typography I chose Nunito as the main font that can be found throughout the screens. Nunito has multiple different weights, emphasis, and sizes throughout the screens. Nunito was chosen because it is easy to read and is well-balanced. For the headings on top of each screen I chose to use SF Pro Display and the regular weight. SF Pro Display was used also because of easy readability and giving a clean look.
High Fidelity Prototype
Takeaway
Through this case study, I learned how to empathize and think about user needs. I also learned that there are many iterations when designing for an app and that it is good to have iterations. With each iteration and user research conducted, it helped ensure that the app is designed with user needs in mind. This case study also helped me better understand how to properly display visual hierarchy for users. I learned a lot about how effective visual design is as well as how powerful layout and design elements are.