Daylily
Project Overview
Daylily is an online flower store that offers customizable bouquets make to order. The typical user is between 25 and 40 years old and most users are career professionals. Daylily’s goal is to make flower shopping fun, fast and easy for all types of users.
Project Duration
November 2022 to December 2022
My Role
UX and UI designer from conception to delivery.
Tools
Adobe XD, Canva
The Problem
Available online shopping websites have cluttered designs, inefficient systems for flower customization, and confusing checkout processes.
The Goal
Design a Daylily website to be user friendly by providing clear navigation and offering a simple customization process.
My 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
User Research
I conducted user interviews, which I then turned into empathy maps to better understand the targeter user and their needs. I discovered that target users will often window shop online as a fun and relaxing activity. They also like how convenient shopping online can be if they don’t have time to visit a florist in person. However many flower websites are overwhelming and confusing to navigate, which frustrated users. This caused a normally enjoyable experience to become challenging for them.
User Pain Points
Personas
Using information from interviews I created two personas to get a better idea of who Daylily’s users are. Meet Miranda and Luna!
User Journey Mapping
Mapping Miranda’s user journey revealed how helpful it would be for users to have access to a florist app.
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 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
To get started, I created paper wireframes based on the user research I had conducted so far. I wanted to show the user flow of customizing a bouquet, adding it to the cart and checking out.
Paper 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.
Digital wireframe
screen size variations
With responsive web design in mind I created a mobile version of Daylily’s site
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screen involved in the primary user flow of customizing a bouquet, adding it to the cart, and checking out.
Usability study: findings
Refining the Design
Mockups
To create a low-fidelity prototype, I connected all of the screen involved in the primary user flow of customizing a bouquet, adding it to the cart, and checking out.
Users were having difficulties navigating to the homepage from other pages of the site so I added the ability to return to the homepage by clicking on the Daylily logo.
Mockups: 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 devices so users have the smoothest experience possible
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.
View the high-fidelity prototype here
Refining the Design
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images and demonstrated a clear visual hierarchy
What I learned
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Steps
