OVERVIEW
Giardino Di Fiore is a fictional flower shop I created during the Google UX Design Certification course. It's not only a place for users to purchase bouquets, but a place to educate users about the flowers and how to properly care for them.
My Role
UX Researcher, Concept Developer, UX/UI Designer
Timeline
3 Months
PROBLEM
Buying flowers isn't typically an activity people do often and it can be overwhelming to try to pick out the perfect bouquet without much knowledge about flowers. Users need a tool that would guide them in picking out flowers for their special occasions and help them learn about the included flowers. I had to figure out a way to give the users all the necessary information for each bouquet in a digestible way.
SOLUTION & IMPACT
The Giardino Di Fiore interfaces help reduce the anxiety users have to find the perfect bouquet. The main features include being image-heavy, having a visual reference for the flowers included in the bouquet, and educating the user about how to care for the bouquet. The results from my system usability scale (Google Survey) determined users felt confident in their interaction of finding and ordering a bouquet and were satisfied with the information provided about each option.
PROCESS (APP)
I started by conducting phone interviews to understand the process people go through when selecting bouquets for an event, to identify the information they seek during that process, and to understand their pain points and needs for a bouquet preview app.
Pain Points
- Flower Unfamiliarity: Most users don't know what flowers look like by name
- Trend Unfamiliarity: Don't know what the current bouquet trends are for special occasions
- Order hesitance: Don't want to spend money on bouquets that won't last long
Personas
User Journey
This journey allows users to shop for pre-made bouquets by occasion or use a quiz to help them build a customized bouquet.
Paper Wireframes
Several iterations were made for each screen in the app. I wrote elements down that I needed to incorporate in the design next to the wireframe to make sure I added all of the important pieces.
Digital Wireframes
Low-Fidelity Prototype - Link to prototype
Usability Testing Insights - Round 1
- It was difficult for most users to make a custom bouquet
- Some users prefer not to create an account in order to make a purchase
- It was difficult for participants to find flowers for specific occasions
Revised User-Journey
Usability Testing Insights - Round 2
Some users had trouble finding the home page and were looking for a menu that they were used to using on other apps.
There is now a hamburger menu that will help users find important pages.
Most users skipped right over the bottom section of the left screen where it has buttons to choose whether they want to pick up the bouquet or have it delivered.
I moved those preferences to the following screen so users can focus on one task at a time.
High-Fidelity Prototype - Link to prototype
The flow is for the "Colorful Birthday" bouquet
Sticker Sheet
Making and using the components sped up the design process while ensuring consistency across screens. The color palette feels natural, warm, and earthy to pair with the flowers. The typeface chosen is easy to read and has many style variations for me to user for contrast.
PROCESS (WEBSITE)
Information Architecture
This sitemap gives the user many ways to search for a bouquet. They can search by flower, season/holiday, or occasion.
Paper Wireframes
Creating the same page on different screen sizes was a fun challenge and brought creative problem-solving, especially using horizontal scrolling for the mobile version.
Low-Fidelity Prototype - Link to prototype
Having a responsive website design gives users the freedom to have a great experience finding a bouquet on whichever platform they are most comfortable using.
Usability Testing Insights - Round 1
- Most users had difficulty during the checkout process
- Most users felt the checkout process was too long
- Most users didn't know they could click on a bouquet to find more details about it
Usability Testing Insights - Round 2
I added lines underneath the title of each bouquet so users know they could click on them for more details.
Users were confused during checkout and felt it took too long, so I combined pages for a quicker checkout.
High-Fidelity Prototype - Link to prototype
The flow is for the "Colorful Birthday" bouquet
TAKEAWAYS
I learned how important feedback from the end user is. My initial idea included a quiz for users to take that would guide them through building the perfect bouquet, but it turned out to be confusing for almost all users who tested it.
