UX Case Study: Floral District
Google UX Design Certificate Project
About the Project
For my second project for the Google UX Design Certificate, I was tasked to design a flower arrangement website for a florist. I was excited to jump into this project because I've always been a big fan of flowers and their beautiful vibrant colors.
This case study showcases my process in creating a mobile ordering app from concept to final design for Floral District, a hypothetical flower shop.
The Problem
Available online floral websites often have outdated and clustered designs, and users are not able to effectively search for their desired bouquet.
The Goal
The goal of this project is to design a bouquet ordering flow that provides clear navigation, easy bouquet customization, is user friendly, and offers a fast checkout process for Floral District, a hypothetical flower shop.
My Role
Since this is a project I created, I am responsible for the full design process of the website and app from conception to delivery
Timeline
2 Weeks
My Design Process
I chose to use the UX design framework to guide this project. This process includes five stages, which are empathize, define, ideate, prototype, and testing. By following this process, I can create a solution in an efficient and methodological manner.
User Research: Understanding the User
To better understand the target users of floral shops, I decided to conduct some online research and give user interviews. Coming out of research, I learned that most of the online customer market for floral shops are those looking for a gift or corporate buyers.
Competitive Analysis
Before jumping into the process of creating a solution, I checkout out some existing bubble tea apps and interacted with them. I also read their customer reviews to help me identify some drawbacks of the existing medication reminder apps and what can be improved on.
Click here to view the competitive analysis
Pain Points
Based on the research above, three major pain points were identified from users:
Persona
Based on the information I have gathered through research, I have created a persona whose demographics, motivations, and goals represent a large portion of the target users. This will help me identify certain behaviors and patterns that other users, and point towards a common pain point.
Here's Thomas:
User Journey Map
Mapping Thomas' user journey displays areas where we can adjust to improve his user experience.
Starting the Design
To start the design of the web page, I drew a sitemap which displays all the information that will be presented in the website. Creating this sitemap will help me organize my thoughts and help as a guide when creating wireframes.
Paper Wireframes
To start brainstorming the layout I sketched out a few paper wireframes for various screens, keeping the user pain points about navigation and bookmarks in mind.
Starting on Digital Wireframes
After creating the paper wireframes, I created low-fidelity wireframes in Figma and proceeded to test it with users. I referred back to the user flow to make sure that I would not miss anything important in each screen.
Click here to view the low-fidelity prototype
Usability Study
I asked some participants to test the low-fidelity prototype to get an insight into the app's usability. By watching and reading what the participants wrote about their thoughts on the app via google forms, I was able to identify a couple of problems with the initial design. I used an affinity diagram to organize results and identify key patterns. The results of the usability study are noted down below:
Changes I Made Based on the Usability Study
Based on the insights from the usability study, I made changes to improve the site’s overall checkout flow. One of the changes I made was an option to edit or customize the quantity of bouquets in the individual bouquet page without going through a complicated process, as well as adding an “Add-ons” section that allows users to purchase additional gifts to go along with their bouquet. I’ve also added to select the desired delivery date, as well as a box for the user to add a special message if they wish.
I’ve also added the “favorites” icon on the main header for users to easily find their bookmarked bouquets. The favorites area was previously going to be underneath the profile icon, but having it out in the navigation bar is much better.
Final Design
You can interact with Floral District's High Fidelity website on Adobe XD here
Style Guide
Accessibility Concerns
1. I used headlines with different sized texts for clear visual hierarchy
2. Icons were added to help users easily navigate through the page
3. I used the accessibility standards and guidelines like WebAIM: Contrast Checker to bring a better experience to the user
Takeaway
From this project I learned that implementing small changes can greatly affect the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas.
Next Steps
The next steps would be to conduct another round of usability studies with more participants to identify any additional areas of need and ideate on new features.
Thank You for reaching the end of the case study!
