Coastal Pedals
Project background:
I'm creating a responsive website to help people schedule flower delivery or store pickup for themselves or others. I need to find out if the main user experience, scheduling a delivery, and flowers being offered in photos resembles exactly what users get. I would also like to understand the specific challenges that users might face in the searching, scheduling, and purchasing processes.
.png)
Project Overview
The Problem:
Users need a way when ordering flowers to have a functional way to access the website on mobile devices and be able to make purchases smoothly throughout the checkout process.
Goals:
-
Determine if users can complete core tasks within the prototype of the florist website in app.
-
Determine if the website is difficult to use.
​
-
Find out how long it takes a user to find and purchase certain flowers.
My Role:
lead UX designer, UX researcher, UI designer
Responsibilities:
user research, wireframing, prototyping, Affinity Mapping, Customer Journey Map, User Flow, Problem Solution.
Understanding
The User
-
User research
-
Personas
-
Problem statements
-
User journey maps
User Research: Summary
I conducted interviews created empathy maps, made competitive audits, and personas to understand the users I am designing for and their needs. A primary user group identified through research were young working adults, florist, and event planners.
When conducting research I revealed that time was not the only factor limiting users from purchasing flowers online, other problems included unfriendly user interfaces, and not knowing how fresh the flowers are when ordering.
Competitive Audit
To start, I conducted a competitive audit analysis in order to get ideas of what features were being offered in by other key competitors and what their values were.
Who are your key competitors?
Our key competitors are Alpha Floral and Pink Cloverwhich are both floral companies and 1800 flowers which is an online shop product offerings to fulfill more of its customers gifting needs they started off with just flowers now they offer edible arrangements, chocolates, and fruit. Alpha Floral and Pink Clover are direct competitors to my website, and 1800 flowers is an indirect competitor.
quality of competitors’ products
Alpha Floral has a visually bland website design but makes up with a number of helpful features to make the order and checkout process easy. High-quality images help support browsing through flower options but they could have added more.
Pink Clover is well-designed and the easiest website to use of the three competitors. Features available are focused on creating a quick order and checkout process. The visual design is clean and simple.
1800 Flowers had a clear brand identity, but relies heavily on text descriptions. 1800 Flowers website navigation is often confusing and it is hard to distinguish what buttons are on the website. 1800 flowers has great features in their site, but are lacking in smooth user flow.
​
​
.png)
Competitors’ strengths
1800 Flowers strengths include:
-
Features on their desktop website that are comprehensive and useful.
-
Engaging visual design High-quality product imagery that supports browsing.
-
Great filters to slim down what the user is looking to buy.
Pink clover strengths include:
-
Clear, simple site design that supports intuitive navigation.
-
Quick pay and progress bar features that provide a fast and easy checkout process.
-
Same day shipping.
-
Videos.
Alpha floral strengths include:
-
Simple selection of flowers with unique vases
Competitors weaknesses
1800 Flowers weaknesses include:
-
Information architecture that is cluttered and disorganized
-
Browsing options and breadth of offerings that is overwhelming
-
Website layout that isn’t easy to navigate through
Alpha Floral weaknesses include:
-
Low-quality images and overall visual design Bland user interface
Pink Clover weaknesses include:
-
No filters
-
Not being able to arrange your own bouquet
Gaps:
-
1800 Flowers and Alpha Floral responsive design is lacking or non-existent.
-
Browsing features for all three competitors are cumbersome and not helpful.
Opportunities ​
-
Create fully responsive design.
-
Provide easy access to browse product offerings.
-
Support browsing through high-quality imagery and clean IA.
-
Optimize design for screen reader usage.
I created Personas to better understand potential users and what pain points they might face when using the app.
​
User Research: Personas
User Research: Pain Points
.png)
lengthy web flows
frustrating user interface
Web layout
text heavy
user interfaces are big when getting customers to finish flows and the majority of sites had not the best color schemes and layouts.
from start to finish on multiple websites for the competitive audit, the checkout process often left users confused and frustrated resulting in unfinished flows of purchasing a product.
many florist websites are very text heavy making it hard to navigate through the site.
multiple web layouts for florist websites were not user friendly.
User Flow
I created a user flow that maps the user’s step by step process of how they would be able to purchase flowers from a florist with ease.
mobile homepage
Starting
the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to the digital wireframes would be well-suited to address the user pain points. For the home screen, I prioritized a quick and easy ordering process to help the users save time.
Paper Wireframes
Desktop layouts
Mobile layouts
Digital Wireframes
Desktop
homepage webflow is structured for easy navigation to checkout. I listed the most searched products in a rotating carousel
different designs are broken up into groups while making for easier navigation such as love and romance, sympathy, congratulations, just because.
Mobile
Low-Fidelity Prototype
The Low-Fidelity Prototype connected the primary user flow of purchasing flowers for delivery or pickup that would be able to be used for usability studies to gain research.
Usability study: findings
I conducted two rounds of usability studies. Finding from the first studies helped guide the designs from wireframes to mockups. The second study used a high fidelity prototype and revealed what aspects of the mockup needed refining.
Affinity Diagram 1st Round
I enjoy using the Affinity mapping process to get all my information that I have gained from usability studies in one area. when grouping together the information, it makes it easier for me to know what the highest priority items to be completed are. P0, P1,
Refining the Design
-
Mock ups
-
High-fidelity prototype
-
Accessibility
Mockups
After usability studies, I added a larger top menu bar that is pinned to the top while scrolling to make for easy access. I also revised the the primary CTA buttons to be more visible to users making the flow smooth. Secondary buttons are ghost framed so it has a different look than the primary buttons.
Desktop
Mobile
With the smaller responsive screen I condensed all the main flows closer together to make for easier navigation. I added a "browse designs" carousel that is grouped in a lavender card so users will be able to find that section with ease.
Mockups
The second usability study revealed frustration with the checkout flow as well as the button size. I made the arrow buttons to travel back to recent pages for easy navigation. I also added a tip box so users would have the choice to tip. The user info strip now turns lavender after you have finished adding information for a fast way to find all the information one has already inputed.
Desktop
Mobile
Video
Here is a quick flow of the checkout process
Key Mockups
UI Kit
Going Forward
-
Takeaways
-
Next steps
Takeaways
Impact:
Coastal flowers really cares about their users and loves giving back to their community. Implementing Inclusive design throughout the whole interface makes for a smooth navigation process that allows the users to get to point A to point B without any pain points.
One quote from pier feedback: “I love how this site isn't super text heavy and confusing.”
What I learned:
During my case study I learned a lot about how other florist websites lean more towards having text heavy sites, that can sometimes confuse the costumers on what they agreed to purchase. Since the Pandemic, more and more flower shops have implemented flower pickup and delivery services. These services have not been executed well and have left users frustrated. I created this responsive website so that whether someone is trying to purchase flowers on their desktop or mobile device, the experience will always be enjoyable.
Next Steps
Let's Connect!
Thank you for your time reviewing my work in the Museum Check In app! If you'd like to get in touch, my contact information is provided below.