Rosedale Fleur

Project Overview

The product:

Rosedale Fleur is a flower shop that offers affordable and amazing arrangement designs. The typical user is between 19-50 years old, and most users are young to senior professionals. Rosedale Fleur’s goal is to make ordering flower gifts easy and accessible.

Project duration:

December 2022 to Feburary 2023

The problem:

Most flower shops don’t have a working website. When they do, it doesn’t allow for online purchasing.

The goal:

Design a flower shop website that allows customers to check all available inventory, shop by categories, and purchase online.

My Role:

UX designer leading the Rosedale Fleur website design

Responsibilities:

  • Conducting interviews

  • paper and digital wireframing

  • low and high-fidelity prototyping

  • conducting usability studies

  • accounting for accessibility

  • iterating on designs.

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 want an easier way to purchase flowers and view inventory.

However, many flower shop websites are underwhelming and don’t allow for online purchases, frustrating many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of an easier business transaction.

User research: pain points

1

2

3

The graphic that makes most flower shop websites is often too simple. The graphics used doesn’t reflect the actual product in person.

Most flower shop website doesn’t showcase their full inventory online.

Flower shop websites often don’t allow for online purchasing.

Graphic
Content
Experience

Persona: Anastasia

Problem statement:

Anastasia is a busy young professional who loves purchasing flowers. Her go-to flower shop doesn’t even have a website and the ones that do, lack up-to-date inventory.

User journey map

I created a user journey map of Anastasia’s experience using the site to help identify possible pain points and improvement opportunities.

Sitemap

I created a sitemap to help design the overall structure of the website.

My goal here was to make strategic information architecture decisions that would make for a simple and easy website navigation.

Paper Wireframes

Next, I digitally sketched out paper wireframes for the main page of the site, keeping in mind the user pain points about content, browsing, and user flow experience.

The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.

V.1

V.2

V.3

Final V.

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button locations and visual element placement on the product page was a key part of my strategy.

Because Rosedale Fleur’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Digital wireframe
screen size variations

Low-fidelity prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.

At this point, I received feedback on my designs from members of my team about things like the placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Check out Rose Fleur Low Fidelity Prototype

Usability study: Parameters

Study type:
Unmoderated usability study

Participant:
5 participants

Length:
20 - 30 minutes

Location:
Canada, remote

Usability study: findings

These were the main findings uncovered by the usability study:

Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart

Users weren’t able to easily copy the shipping address information into the billing info field

During the checkout process, there wasn’t a clear way for users to log in to their account to save billing and shipping info

Sizing
Order Summary
Account

Mockups

Based on the insights from the usability study, I made changes to improve the site’s checkout flow.

One of the changes I made was displaying the price along with the sizing instead of using a drop-down menu. This way their product’s available size and price are presented more openly.

Mockups

To make the checkout a more enjoyable experience, I added similar products to go with whatever customer already has in their cart. This way they could go back to the category option more easily.

I also put more description on the product they’ve chosen. I also swapped the drop-down sign and used “+” and “-” to change the quantity.

Mockups

My first prototype was missing an account component to the checkout process, so I added an option for customers to either login or create their account button or continue as a guest.

I also added an order summary to the page, to break down the total amount of orders.

Mockups

My first prototype was missing an order number in case a confirmation email wasn’t delivered. So I added an order number on the final page of the checkout.

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

Check out Rose Fleur's High Fidelity Prototype here.

Accessibility Consideration

1

I used headings with different-sized text for a clear visual hierarchy

Used detailed imagery for each menu page to help users understand what they're ordering.

2

Takeaways

Impact

What I learned

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.


While designing the Rose Fleur website, I learned the importance of usability study and the more you do it the better your design will be.

Next Steps

1

Conduct follow-up usability testing on the new website

Identify any additional areas of need and ideate on new features

2

Let’s work together