top of page
Screen Shot 2022-12-14 at 1.51.56 PM.png

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
Screen Shot 2022-12-14 at 3.50.14 PM.png
Personas

Using information from interviews I created two personas to get a better idea of who Daylily’s users are. Meet Miranda and Luna!

Miranda Persona.png
Luna Persona.png
User Journey Mapping

Mapping Miranda’s user journey revealed how helpful it would be for users to have access to a florist app.

Miranda User Journey Map.png

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. 

Sitemap.png
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.

1.png
2.png
3.png
4.png
5.png
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 wireframes - desktop.png

Digital wireframe 

screen size variations

With responsive web design in mind I created a mobile version of Daylily’s site

Digital Wireframe - Iphone.png
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.

Prototype Flow 1.png
Usability study: findings
Screen Shot 2022-12-14 at 4.47.05 PM.png

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.

Screen Shot 2022-12-14 at 4.49.46 PM.png

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. 

Screen Shot 2022-12-14 at 4.52.14 PM.png
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

Daylily Mobile Homepage.png
Screen Shot 2022-12-15 at 8.25.55 AM.png
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. 

Screen Shot 2022-12-15 at 8.29.58 AM.png

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
Screen Shot 2022-12-15 at 8.35.54 AM.png
bottom of page