Flora & Fauna
Project Overview
-
The Product
This floral boutique has a website that’s under serving customers because of an inaccurate bouquet preview
-
Project Duration
April 2021-May 2021
-
Business Problem
The Baltimore, MD based flower shop wants to expand its delivery nationwide. It’s eCommerce store needs convey value better.
-
Primary Goal
The first goal is to improve the checkout process online to be error free, accessible, and easy to do.
-
Secondary Goal
The second goal is to improve customer support to recreate part of the in-store florist shopping experience online.
-
User Perspective
From the user perspective, the problem is locating the right flower arrangement and placing the order online without any problems.
Contribution
My Role
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Responsibilities
User research, visual guidelines, wireframes, mockups, prototypes, and usability testing.
Tools
This product was built in Adobe XD. Usability studies were conducted through UsabilityHub.
Understanding the User
User Research
Personas
Problem Statements
User Journey Maps
User Research Summary
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
User Research Summary
-
Empathy Map
I conducted a survey to create an empathy map to truly understand the user point of view as far as what they think, feel, see, do, say, pains, and gains to mold the online shopping experience for flower bouquets into a happy user journey.
-
Assumption
One of the key assumptions made about this process is that women would want to buy flowers either for themselves or for a loved one, for fun and for an occasion respectively.
-
User Preferences
After the research was complete, I was able to understand that the online ordering process needed to include a freshness guarantee, filters, and better photos to give women greater certainty that the flowers would be both beautiful and fresh.
User Pain Points
Flower Type
When shopping for flowers online, some users wanted to buy a specific flower type for their loved one.
Bouquet Size
Many online bouquet photos only have 1 view of the bouquet, leaving doubts as to the full flower bouquet style.
Flower Preview
Small, medium, and large bouquets struggle to create a big difference in size visually. Users struggle to see value.
Fast Checkout
With the absence of alternate payment methods, users want Apple Pay and Google Pay to checkout faster.
User Journey Map
![Flower Shop User Journey Map [Assignment].jpg](https://images.squarespace-cdn.com/content/v1/607a4c794afcb51ff8a25ac9/1625632948677-8JY9VSTJQ4PK1UQV0VMQ/Flower+Shop+User+Journey+Map+%5BAssignment%5D.jpg)
Starting the Design
User Research
Personas
Problem Statements
User Journey Maps
Paper Wireframes
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Digital Wireframes
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Low Fidelity Prototype
Usability Study Parameters
Dream it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Grow it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Build it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Sell it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Usability Study Findings
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Dream it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Build it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Grow it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Refining the Design
User Research
Personas
Problem Statements
User Journey Maps
High Fidelity Mockups
High Fidelity Prototype
Mockup Usability Study
-
Dream it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
-
Build it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
-
Grow it.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.
Mockup Design Revisions
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Accessibility Considerations
-
Color Contrast
The color contrast meets WCAG AAA; font legibility is supported with larger text size and bolder text.
-
Alt Tag for Screen Readers
The website icons were paired with text to help visually impaired individuals read the screen better.
-
Range of Motion
The animations are about 300 ms which is in the middle range for motion. This speed is accessible for most users.
Forward
User Research
Personas
Problem Statements
User Journey Maps
Takeaways
The checkout sequence completion improved by over 17%. Users were able to navigate through the screens easily with the use of ecommerce conventions paving the way.
As I self-reflect on this case study, I found it quite encouraging to let user feedback inspire the design revisions in a constructive direction to help the online florist sell more bouquets in and beyond Baltimore, MD.
Next Steps
Additional testing of the design would help more users finalize their online purchase.
The developer handoff is being facilitated by using Figma. Documentation is ready to implement too.
It would be helpful as well to do A/B testing of photos and prices to optimize online sales.
Thank you
Let’s Connect
If you’d like to discuss a UX/UI opportunity at your company, please get in touch to chat further.