Design a flower arrangement customization flow for a trendy florist

Adobe XD
Project Overview
I created a website for a local florist, which allows customers to create custom arrangements.
Responsibilities
- User research
- Prototyping
- Wireframing
- Low and high fidelity prototypes
The Problem
There isn't an easy way to customize an arrangement for the florist's buesiness. The only route to order an arrangement prior to the website was calling and doing a phone order, or stopping by the store.
The Goal
- Create a seamless booking process that works for all users.
User Research
Summary
User Research
Summary
We conducted a survey of the stores current and new customers to see what they would want out of the website functionality. A low-fidelity prototype was tested in an unmoderated study to determine overall function and to have the users review the website's features.
User Research
Pain Points
1) There needs to be a custom arrangement option:
The user specified that they needed an area to request customizations. We will include a box for this request.

2) The user usually requests a florist-suggested design:
The user specified that they usually request the florist to make an arrangement based on their own design. The customization box can be implemented for this request.

3) Some users want to book multiple arrangements for a special event:
The user needs multiple arrangements for her wedding. The special events section of the website will allow her to connect with the florist for this request.

4) Users pointed out that they need inspiration for their arrangement:
The user isn’t a designer and doesn’t know where to begin. The florist’s pinterest board will be linked for inspiration. 

Persona: Lisa

Lisa is a frequent customer who needs an easy way to order arrangements because she doesn’t always have time to call and order.

She has been a long term customer of the florist shop and loves their work. Her funeral home has recently picked up in business and she doesn’t have a lot of time to book arrangements or stop by the shop. She is in need of a quick and simple way to order flowers and have them delivered to the funeral home.
Goals:
- Quickly book flower arrangements.
- Have a set business account with a built-in payment method.
- Be able to request delivery.
Frustations
- She doesn't have time to troubleshoot issues with deliveries.
- She needs a reliable ordering system.
- She doesn't always have time to get on the phone to order, or resolve customer service issues.

Persona: Sarah

Sarah is newly engaged and needs an easy way to see floral inventory and book a vendor for her wedding.

She has been engaged for six months, and is starting to book her wedding vendors. She really wants a way to see a florist's work and see their offerings prior to booking them.
Goals:
- Have an easy way to ask questions and contact vendors.
- Have a way to see florist's work in a portfolio.
- Would love to see an inventory of available flowers.
Frustations
- She previously had problems contacting floral vendors.
- She doesn't have the time or capacity to wait for inquiry responses.

Paper wireframes

User testing findings

Round 1:
- The users need more custom options.
- The users need buttons to have more contrast.
- The delivery confirmation items need to be more clear.

Round 2:
- The contact page needs to have an inquiry form.
- The cart needs to have a clear payment method.
- The user needs confirmation screen.
‍

Low-fidelity prototype

High-fidelity prototype flow

Individual mockup frames

Link to prototype:

https://xd.adobe.com/view/39254840-f500-4dbc-bd56-11efb6146939-6c76/

Impact

This website will make the florist’s business run smoothly in operation and take the middleman out of the ordering process. It will also make the process simpler for the user.

Next Steps

- Create another usability study for the launched website.
- Find a way to give the florist access to the system, so they they can continue to add flowers and custom options as needed.
- Look into additional payment options that would be beneficial to users.
Powered by Webflow
FacebookTwitterInstagram