Project Overview
Floria by Catherine is a Kansas City-based flower shop that was looking to start selling flower arrangements and floral services online. After a year of operating only through Instagram, they were needing a responsive website for their clients to purchase flower arrangements, inquire about floral services, and to learn more about their company.
Scope of Work
Research, UX/UI Designer, Product Strategy
Project Goals
Learn how users currently shop for flowers
Discover problems they face while shopping
Design a website for my client that meets her criteria
Challenge
How can a small flower shop stand out in its local market and compete with big-box flower companies?
Solution
Design a responsive website with thoughtful features to create more orders and inquiries for Floria by Catherine.
Process
After meeting with my client, we discussed her vision and created a game plan with these goals, design needs and restrictions in mind:
Appeal to a millennial demographic with bright, quirky and playful branding
Create a design that can be built in Squarespace
She doesn’t want an e-commerce feature at this time in her business
She doesn’t have professional photography of the actual arrangements
All of her flowers are made-to-order and vary based on the freshest flowers she finds
Work with the colors and fonts she has been using already
Create forms for customers to order flowers and inquire about events
Research > Develop > Revise
Learning from Competitors
I looked at direct competitor websites to better understand their strengths, weaknesses, opportunities and threats and used that information to be come up with the following features to include in Floria by Catherine’s website:
Zip code checker so customers can ensure their zip code is in the delivery range and see a delivery cost estimate before they order
Beautiful, professional photography and well-written descriptions so customers know what to expect
Unique branding that stands out from other Kansas City flower shops
Various price-point options to appeal to a wide range of customers
Stories and personal photos to get to know my client to give the website a local feel
Order updates to keep clients in the loop about their order
Offer a free pick-up option
User Interviews
Since Floria by Catherine is a small, local business based out of Kansas City, I interviewed users in the area who have worked with local competitors. I also interviewed customers of big-box companies such as Flowers.com or Urbanstems to find out what they liked and didn’t like about these companies.
How do they decide where to shop for flowers online?
What reasons and occasions do they shop for flowers?
Why did they like or dislike their experiences?
Affinity Map to sort user research findings:
Key Findings:
After user interviews and learning about their wants, needs, feelings, and goals, I learned the following key findings that will benefit the Floria by Catherine’s website:
They need to know the flowers can deliver fast or next day
Various price points, especially between $50 - $100
They want to support local businesses
They want high-quality, unique flower arrangements
Need order updates
Want to know what they are going to get
Easy to order online
Enjoy working with an actual person and have a human experience
Meet Sara
I consolidated key findings from research into a persona to highlight the key frustrations and goals that my designs needed to address.
How might we help Sara?
The last step in my research process was to form How Might We questions to start ideating key features for the website. These questions were based on Sara’s goals and helped as a launching point for the Development phase.
How might we assure fast delivery and delivery confirmation?
Zip code checker to see if the user’s address is within the delivery zone
Show upcoming days that are available for delivery so that users can quickly select
Offer order updates so users can stay updated on the status of their order
How might we assure clients they will receive the highest quality flowers?
Information about Catherine’s flower-picking process
“Verified Fresh” checkmark or graphic
Testimonials from past clients
How might we help Floria stand out in the KC flower market?
Bright, fun branding
Offer free consultations for small events
Social share buttons to users can follow her business and share with friends
Research > Develop > Revise
Getting Users What They Need
Based on my research and How Might We questions, I developed the below site map and user flows that will help with developing wireframes for the site. Easy order forms = happier customers = more business.
Mid-Fidelity Wireframes
One of the constraints for this project was the need to use a website builder. I studied Squarespace to make sure what I created in Figma could be applied to the website builder. I first designed mid-fidelity wireframes for desktop, then once I finalized my UI design components, I created high-fidelity frames for both desktop and mobile.
UI Design
The primary colors and fonts were already selected by my client. I wanted to add in bright photography and quirky headings to give the website the playful feel she was hoping for. I also needed to create simple forms that wouldn’t be too overwhelming for the user.
Final High-Fidelity Wireframes
Research > Develop > Revise
What can make it better?
After usability testing, I revised main features such as the zip code checker, form structure and UI components. Users discussed their wants of learning more about the Floria by Catherine brand, feeling confused about how to check their zip code, and feeling overwhelmed by selecting a size and price point in the order form. Below are the revisions of adding the zip code checker popup and the new revised form structure with feedback submission form.
Users said the zip code checker was confusing and ruined the flow of the website. They wanted to click the order now button instead of the search icon button.
I created a pop-up that gave me more room to create a user-friendly zip code checker with easy-to-comprehend buttons.
Next Steps & Closing Thoughts
What’s next?
I am going to help create the website in Squarespace and add coding where it’s needed with my coding experience. I will keep everything as close to my Figma designs and edit where it’s needed. Down the road when my client is ready to upgrade her Squarespace account, I will also design e-commerce features.
What I learned:
Designing within constraints can be tricky, but not impossible! As long as you remember to put your users’ wants and needs first, it’s possible to create a user-friendly website. It was also so fun working with a client and being able to deliver a product that achieved her vision. I was able to share with her important research I learned while interviewing users and how she can use their goals to grow her business.
