PROJECT OVERVIEW
Foxglove is a high-end floral and gift delivery service located in Provo, Utah. The typical client is between the ages of 20-40 years old and most users are early career professionals to working professionals. Foxglove’s goal is to making flower ordering easy, customizable, and fun.
THE PROBLEM
Available online flower shops have limited customization options when it comes to flower shopping and delivery.
THE GOAL
Create an online ordering process for Foxglove that provides easy floral customization in a streamlined user flow.
ROLE
UX Designer
PROJECT DURATION
August 2022 to October 2022
RESPONSIBILTIES
•Conducting interviews
•Paper and digital wire-framing
•Low and high-fidelity prototyping
•Conducting usability studies
•Accounting for accessibility
•Iterating on designs
•Responsive designs
UNDERSTANDING THE USER
USER RESEARCH: SUMMARY
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users like to buy flowers online for loved ones for special occasions or notable events. However, many online flower shops lack customization options. This makes users feel frustrated when they aren’t able to choose exactly what they want to give their bouquets a unique touch for their loved ones.
USER RESEARCH: PAIN POINTS
USER RESEARCH: PERSONAS
PROBLEM STATEMENT
Justin is a working professional who needs an easy and efficient way to order a customized bouquet of flowers because he wants to show his wife appreciation with a unique bouquet from him.
STARTING THE DESGIN
SITEMAP
I wanted to make sure that the website had easy navigation and that it was as seamless as possible to get to the “Make a Custom Bouquet” option. My goal here was to make strategic navigation architecture decisions that would improve the overall website navigation. The structure I chose was designed to make things simple and easy.
PAPER WIREFRAMES
I wanted to draft a homepage that was intuitive, simple, and allowed for straight-forward ordering right away. Here are some iterations based on that.
DIGITAL WIREFRAMES
I wanted to make the homepage very easy to navigate and allow users to get to creating their custom bouquets as quickly as possible. Providing intuitive button locations and visual element placement was part of my design strategy.
DIGITAL WIREFRAMES SCREEN SIZE VARIATIONS
Because Foxglove’s customers access the website from multiple devices, I adapted designs for multiple screen sizes.
LOW FIDELITY PROTOTYPE
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of making a custom bouquet.
View the Foxglove Low Fidelity Prototype:
USABILITY STUDY: FINDINGS
These were the main findings uncovered by the usability study.
USABILITY STUDY FINDINGS
USABILITY STUDY CHANGES
Based on the insights from the usability study I made changes to improve the site’s custom bouquet ordering flow. I improved the flow by adding a running total estimate as users build their bouquet, including clarification of how many items users can add for each step, and putting number confirmations next to each selected item.
HIGH FIDELITY PROTOTYPE
My high-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study as well as suggestions from my team members.
View the High Fidelity Foxglove Website:
ACCESSIBILITY CONSIDERATIONS
Accessibility considerations were taken into account for users who may have unique needs when navigating the site.
GOING FORWARD
TAKEAWAYS
Impact: Our target audience indicated that our design was an improvement on the flower ordering process. They felt that it was straightforward, easy to navigate, and intuitive.
What I learned: I learned that user testing is important. While I may believe a design works there may be small details that I’m missing that could make the experience and design even better.
NEXT STEPS
Next steps would be to conduct a follow-up usability testing on the new website and identify any additional areas of need in the design and ideate on new features.