– Case Study
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.
Available florist online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes.
Design a Flower4You’s website to be user friendly by providing clear navigation and offering a fast checkout process.
October to November 2021
Conducting interviews • Paper and digital wireframing • Low and high-fidelity prototyping • Conducting usability studies • Accounting for accessibility
Design Process – Design Thinking
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.
- Can users find the product they are looking for?
- Do users understand how to add things to their cart?
- Are there any parts of the checkout flow that users struggle with?
- Can users easily navigate to different parts of the website from the home page?
- Are users able to use the create an account to buy ?
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.
Martha is a busy worker who needs quick and intuitive website process of checkout because she wants online shopping to be stress-free.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
People deserve equal access to information, services and products, which is why accessibility is so important.
04. Going forward
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.