top of page

Case Study:

ColorPetals Website Design

Project Overview

The Problem: 

Available online floral websites have cluttered designs, inefficient systems for browsing through bouquets, and confusing checkout processes.

The Goal:

Design a ColorPetals website to be user friendly by providing clear navigation and offering a choose own flowers for the bouquet to send.

The product:

ColorPetals is a floral website that gives quality, affordable and exquisite flowers for all occasions. 

The typical users are the adult who are searching for gifts or self use. The goals is that the users can 

customizing their personal bouquet of flowers.

Project duration:

December 2021 to February 2022

My Role:

UX designer leading the ColorPetals website design

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the user

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I find out many users send flowers as presents which lead them to be satisfied. However, many floral websites don’t have a choice bouquet, which frustrated many target users. 

This caused a cheerful experience to emerge as tough for them, defeating the cause of happiness.

User pain points
Experience

Floral website often does not have choose of own flower arrangement in bouquet

Quality

Online floral website the flower images won’t match while delivery.

Interaction

Users are always concerned about the delivery time.

Persona & Problem Statement

Sophia is a senior scientist who needs the floral website to be more reliable, so she can send flowers for special occasion.

User journey map

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

Starting the design

Sitemap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. 

 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy. 

Paper wireframes
Wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

 

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

Screen size variations 

ColorPetals’ 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 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 home page was a key part of my strategy.

Wireframes
Screen size variations 
Usability study findings

o start testing the designs, I created a low-fidelity prototype which you can view here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study: 

1. Login

Users don't have the option to log in and save their address once fill the payment method

2. Time 

Users don't have a time choice option while in the checkout

3. Own flower choice

There wasn’t have options to select more colors or flowers when the users are on the Make your Bouquet page

Refining the design

Mockups

Based on the insights from the usability study, I made changes to add the login and sign-up icon. This allowed users more freedom to add their address for easier payment options.

To make the checkout flow even easier for users, I added a time choice option that allowed users to select the time as per their comfort.

High-fidelity prototype

The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by members of my team. 

 

View the ColorPetal website prototype Click here

Screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users have the smoothest experience possible.

Accessibility consideration

Start testing the designs, I created a low-fidelity prototype which you can view here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study: 

1. Bright Color Buttons

I designed the buttons bright and clear for easy to clickable.

2. Headings

I used headings with different sized text for clear visual hierarchy 

3. Screen Readers

I used landmarks to help users navigate the site, including users who rely on assistive technologies

bottom of page