Hero overlay

This hero is built with a flex layout, aligned and justified so that the content will always be centered horizontally and vertically. To change this section’s background, select the “Hero Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast.

Button text
all IMAGES SOURCED FROM UNSPLASH.COM

Pruning the Mobile Floral Industry

UX Research, Conceptualization, and Design
Project Overview
This project modernizes the floral arrangement mobile ordering industry through increased transparency with the user.
My Contributions
These designs were created as part of the Google UX Design Certification program. I worked on every part of this project, from conceptualization and user research, wireframes, prototypes, usability studies, and designs.
Multiple mockup screens for FlowerApp with a red background. The center of the image focuses on the Welcome screen.
User Research
Initial user research showed that many users who frequently buy flowers experience significant pain points with the most popular apps and websites available for ordering flowers. The worst of these pain points revolved around the hidden taxes and fees that companies add on to the user's order at various stages throughout the checkout, sometimes even after the user has inputted their credit card information.
Our users
Data from user research interviews was synthesized into two personas that summarize our two main user groups.

One group ordered flowers online on a semi-regular basis, but experienced frequent and severe problems as mentioned above.

The other group had never ordered flowers online, preferring to buy their flowers in person. This group represents the secondary target market for FlowerApp, as making the app meet the needs of these users would increase the user base for the app significantly.
Persona image for Jocelyn Lee. Describes her goals, frustrations, and attributes.Persona image for Franco Gonzalez. Describes his goals, frustrations, and attributes.
Paper Sketches
low-fidelity designs
organized wireframes
Wireframes for FlowerApp were created on Figma, and can be viewed at the link below.
Click here to view the FlowerApp wireframes.
Closeup of the Live Cost Calculator instructional page.
LIVE COST CALCULATOR
Initial user research showed that many users who frequently buy flowers experience significant pain points with the most popular apps and websites available for ordering flowers. The worst of these pain points revolved around the hidden taxes and fees that companies add on to the user's order at various stages throughout the checkout, sometimes even after the user has inputted their credit card information.
POST-ORDER PHOTO
User research also showed a lack of accountability and follow up from the florists when there was an issue with the contents of the order (such as flower selection or vases), leaving the user's recipients with something that looked completely different (and often far worse) than the arrangement originally ordered.
Closeup of the post-order bouquet photo sent by a florist.
Design Solutions
HOME PAGE
Users can access all of the information they need right from the home page. This is the first real encounter the user will have with the Live Cost Calculator, aside from the instructional popup. A header image that echoes the brand colors stands out to the users and encourages them to stay and browse for some neat products.
FEATURED FLOWERS
Each new category and page of flower listings gets a fun curved line and flower doodle to add to the whimsical feel that flowers often bring to people's lives. It will brighten the user's day, just like they're setting out to brighten a recipient's day by sending them a bouquet.
Visual designs
NAVIGATION MENU
FlowerApp's menu is clean, organized, and high-contrast. The icons will help users get where they need to go from just about any screen. A semi-transparent overlay covers the background to help the user focus solely on the menu while also allowing them easy access back to the previous page with just a tap.
POPUP OVERLAYS
Almost all of FlowerApp's overlays create a semi-transparent background when opened. This keeps the user's focus on the task they selected. All of these overlays can be exited by completing the task, clicking/tapping the X, or clicking/tapping outside of the overlay.
Second decorative layout of mockup screens from FlowerApp. The highlight on the right of the image is of the item details page.
HIGH FIDELITY PROTOTYPE
To try out the full prototype for yourself, click here.
FULL case study
To view this project in more detail, view the entire case study here: Link to Case Study

Want to work together?

If you like what you see and want to work together, get in touch!

rebecca.cardianle@outlook.com(310) 528-6727View My Resume
Powered by Webflow
FacebookTwitterInstagram