Marketing collateral design for a non-profit organization focused on sports injury prevention
Google UX Design Course - Project 1:
Design a Bouquet Preview App for a Florist
This app was developed to help users with the online ordering process of a custom bouquet of flower. By providing a preview feature, we intend to help users by giving them more control over the ordering process. This feature will speed up the process and give more confidence and consistency on bouquet online ordering.
3 months - I worked on this project from February to April of 2023, 2 weekends per month.
Busy workers and commuters lack the time necessary to order a flower bouquet at the florist, and the wait time for it to get ready. Assembling a nice bouquet takes time and florists can't do it on a rush.
Design an app for Blue Bloom's florist store that allows users to easily order a flower bouquet online, with the freedom to customize the whole bouquet with clear options, that will speed up the process and result on a exotic and unique bouquet of flowers.
UX Designer of an app for Blue Bloom Florist from conception to delivery.
My responsibilities consist on user research by conducting interviews, creating paper and digital wireframes, creating before and after mock-ups of each app pages, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
1 - RESEARCH PHASE
User Research: Summary:
I conducted interviews and developed empathy maps of the primary users of the bouquet preview app. Their profile range from working adults with no time to spend inside a florist picking up flowers for the perfect bouquet, to anyone facing a last minute situation, when they need a specific amount of flower arrangements for a soon to happen event or celebration.
They are successful in their careers, they often work late hours or have long commute hours to get home from work every day, and in both cases the users would use an online app to place the orders while they are "on the go”and pick up the order on the way home, but they need a good preview feature, in order to give them a visual feedback before they place the order.
User Research: Pain Points:
- Lack of visuals: Successful professionals like to have control over online ordering apps and they expect the correct product delivery. When ordering flowers they don’t have an app that provides them with the necessary visuals.
- Customization options: Is hard to find good florists that allow for bouquet customization's online. They usually have only pre-made selections that customers get easily tired of ordering.
- Lack of time: Working adults are too busy to spend time inside the florist to select all flowers they need in a custom bouquet.
- Easy to use app: They need an app that is easy to use and in a few steps they place the order with confidence.
Ryan is a busy content director to a big marketing agency, who needs to order a custom bouquet to his wife with an online preview app, because he doesn’t have time to stay too long at the florist on his way home from work and with this app he can be sure that the bouquet he is ordering online will be what he is expecting.
User Journey Map:
Mapping Ryan’s user journey was helpful to reveal that he would benefit from a bouquet preview feature in a florist online ordering app.
2 - DESIGN PHASE
I started by drawing wireframes on paper, to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mock-ups. The second study used a high-fidelity prototype and revealed what aspects of the mock-ups needed refining.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was customizing a bouquet with the preview feature, so the prototype could be used in a usability study.
After making a mock-up study with before and after for each page of the app, I started to refine the design on every page detail, made accessibility adjustments and added striking imagery.
3 - ITERATION PHASE (REFINEMENTS)
• Bouquet Customization Preview Feature: Users want to see the bouquet before placing the online order. User want customization options. Users want to order fast through an user profile page that saves previous orders. Make start the bouquet customization process area at the home page the focus point.
• Apply findings and Insights from Usability Studies.
• Accessibility considerations: Added the movement to every page on the app, that will move pages forward or backward with a screen drag movement. Used icons in a lower navigation bar to help make navigation easier and more intuitive. Used detailed imagery for flower bouquet and their elements to help all users better understand their final designs.
Finally, I created a high-fidelity prototype with a closer to reality user experience.
The high-fidelity app is clean and intuitive. Pages reflect a consistent look & feel and the functionality resulted from direct usability studies on different phases.
Try the hi-fi prototype app on Figma: https://www.figma.com/file/2ZtMXzq6vHKpskK6Nu262Z/Untitled?type=design&node-id=179%3A190&t=hcdzH77XFfrVL63g-1
How: Coursera X Google UX Design Certification Course
What: Design a bouquet preview app for a florist
Who: Juliana Camargo
Industry: UX/UI Design