– Case Study

Flower4You Website

The product

Flower4You is a florist store that offers delivery options. The typical user is between 25-55 years old, and most users are busy professional and generally buys flowers for friends & family. Flower4You’s goal is to make shopping fun, fast, and easy for all users.

Website Flower4You

The problem

Available florist online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes.

The goal

Design a Flower4You’s website to be user friendly by providing clear navigation and offering a fast checkout process.

Project duration

October to November 2021

My role

UX/UI designer 

Responsibilities

Conducting interviews • Paper and digital wireframing • Low and high-fidelity prototyping • Conducting usability studies • Accounting for accessibility

Design Process – Design Thinking

Empathize

Define

Ideate

Prototype

Test

01. User Research

I conducted user interviews, which I later turned into empathy maps to better understand the target user and their needs. I have found that many targeted users enjoy sending flowers and find the online shopping process to be a fun and relaxing activity.

However, many websites that sell flowers online are overwhelming and confusing to navigate, which has frustrated many targeted users. This made a normally pleasant experience a challenge for them, defeating the purpose of relaxation.

Interview questions

  1. Can users find the product they are looking for?
  2. Do users understand how to add things to their cart?
  3. Are there any parts of the checkout flow that users struggle with?
  4. Can users easily navigate to different parts of the website from the home page?
  5. Are users able to use the create an account to buy ?

Pain points

Navigation: Shopping website designs are often busy, which results in confusing navigation.

Interaction: Small buttons on shopping websites make item selection difficult, which sometimes leads users to make mistake.

Experience: Online shopping websites don’t provide an engaging browsing experience.

Persona

Martha is a busy worker who needs quick and intuitive website process of checkout because she wants online shopping to be stress-free.

Persona Flower4You
User Journey - Flower4You

User jorney map

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

02. Starting the design

I initially create sitemap than used paper and digital wireframes and low-fidelity prototype to test design ideas and user flows. I also carried out a usability study to test the “inicial product experience”.

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 Flower4You
Paper wireframe Flower4You

Paper wireframe

Because Flower4You’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 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 Flower4You

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 had received feedback on my designs about things like 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.

Low-fidelity prototype Flower4You
Usability study Flower4You

Usability study

Conducted usability studies to help guide wireframe designs to mockups. I also used a high-fidelity prototype to reveal which aspects of the mockups needed refinement.

03. Refining the design

 Based on the insights from the usability study, I create mockups and high-fidelity prototype to test design ideas and user flows.

Mockups

One of the changes I made was adding the option change quantity of items in a flower item options using a simple “button” option and add Delivery time checkbox. This allowed users more freedom to edit options without going through a complicated process to choice options.

Mockup 1 Flower4You
Mockup 2 Flower4You

To make the checkout flow even easier for users, I added breadcrumb that allowed users to go back or go forward.

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 and tablet so users have the smoothest experience possible.

Screen size Flower4You
high-fidelity prototype Flower4You

High-fidelity prototype

High-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study, as well as several changes suggested by team.

Accessibility considerations

People deserve equal access to information, services and products, which is why accessibility is so important.

Accessibility considerations Flower4Yoy
Final Flower4You

Final output

04. Going forward

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

Next steps Flower4You

Let’s talk?

If you have a project in mind or are simply interested in finding out more, don’t be shy. It would be my pleasure to work on the next big idea.