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