Overview

An end-to-end shopping and ordering experience for a floral arrangement e-commerce website to improve conversion rate.

My Role

UX Research

UI Design

Prototyping & Testing

Duration

Five weeks

Tools

Figma

The Challenge

Shopping for bouquets of flowers online for others has been a convenient way to send gifts, especially for special occasions. Browsing through various arrangements by categories, such as birthdays, weddings, and seasonal holidays, is accessible and easy for a broad age range who have access to the internet. Life-like and colorful photos are helpful for users to understand the type of bouquets available, making it an experience as close as possible to actually being in a floral shop. However, some users feel hesitant when purchasing bouquets online. I would like to explore how to enhance this experience for users in order to improve conversion rates.

fleur is a flower delivery company that sells floral arrangements online, and seeks to enhance their browsing and checkout experience to improve their product’s usability.

The company’s product manager shared data showing that:  

50% of users abandon the site without moving any items into the cart. The product manager’s hypothesis is that users are unable to determine which floral arrangement is best based on their preferences and needs. 
70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.

I looked at ways to improve the conversion from browse to completion of checkout to increase revenue on the product’s website.

The Solution

I wanted to design a website that reflects a brand who sincerely cares about the customers, and is willing to assist with professionalism. I kept in mind the various user types, such as those who are knowledgeable in shopping for flowers and know what to filter by, and those who are less experienced with flower shopping and would benefit from more assistance.

Finding the perfect product based on the customer’s needs.

Search for available products by delivery location and date, or browse through arrangements at your pace, with various filtering options.

Once a product is selected, view similar options in the same price range to compare at ease.

Creating the optimal checkout process.

Customize your order with add-ons.
If you’re shopping for someone special, select a card and write a personalized message.

When checking out, use the guest checkout option for flexibility, clarity, and ultimately, to save time.

Project Plan

Before diving into designing solutions for my product, I created a project plan to optimize my time and efforts during six phases of the design process: one discovery phase, followed by five alternating design and validation phases.

PROJECT PLAN WITH SIX PHASES

Phase 1: Discovery

Research

To better study the current trends, I looked at industry experts to see how they approached similar problems and achieved similar business goals. I conducted a competitor analysis on three different companies: 1-800-Flowers.com, Edible Arrangements, and Send Flowers.

VIEW ALL COMPETITOR ANALYSES

I then created a research plan, and came up with three research questions that I wanted to answer:

What are some of the user's priorities when shopping for flowers online?
What are some of the user's pain points when shopping for flowers online?
How can the online shopping experience be more pleasant and seamless?

In addition to analyzing competitors myself, I decided to also conduct remote competitive usability tests on five users on 1-800-Flowers.com and Send Flowers. I chose users who have experience shopping online for flowers, and those who are very knowledgeable about flowers, as well as those who are not.

I observed users while they interacted with the two websites, and had them go through the tasks of:

searching for a product using filters, then adding a product that they like to the cart
checking out an item as a guest.

Below were some of the reactions:

After discovering what worked and didn’t work for users when going through the product search and checkout flow with existing solutions, I dove right into designing my product.

Phase 2: Design

Low Fidelity Sketches

To achieve the business and user goals for my product, I decided to break down my one user flow for the entire conversion process into two. These flows helped to provide a foundation for a smooth interaction between the user and the website.

VIEW COMPLETE USER FLOWS

Following the structure of my user flows, I designed low fidelity sketches of my screens to eventually transform into high fidelity wireframes.

VIEW COMPLETE LOW FIDELITY SKETCHES

Phase 3: Validate

Guerrilla Usability Testing

I then created a working prototype of my low fidelity sketches, and performed five remote guerrilla usability tests to get feedback on the two major flows.

I had the participants run through similar tasks to my competitive usability tests. I also made sure to gather the participants’ thoughts on finding another product in the same price range with similar colors and flowers (comparing products), and how they felt about the placement of add-ons (specifically, what stage of the flow they expected to see them).

To my surprise, the participants had no one common frustration. They all had great reactions and comments, specifically with the product page and entire checkout process! I heard multiple times that the tasks they completed were “straight-forward and clear.” However, there were three takeaways that I wanted to improve in designing my high fidelity screens next:

Key Takeaway 1

Key Takeaway 2

HOMEPAGE

Recommendation 1: The homepage was too simple, and the organization/placement of elements wasn’t logical.

Solution 1: I needed to design a homepage that caught users’ attention more. One way was to add animations in my prototype.
In addition, I needed to study design patterns of popular e-commerce websites and come up with a new, more standard layout for stronger information architecture.

PRODUCT PAGE

Recommendation 2: Change the calendar interaction when selecting a date, and the interface itself.

Solution 2: One user mentioned that they would expect the calendar to collapse once they selected a date, rather than having to click “OK.” This would eliminate the unnecessary additional click. Including important holidays/occassions for each month for users to refer to would be beneficial moving forward.

Key Takeaway 3

PRODUCT PAGE

SHOPPING CART

Recommendation 3: Although all five users responded really well with the add-ons showing up once they selected the product size, I felt there was a better location for this cross-selling. It was simply too many selections for users to make at this stage.

Solution 3: Design the shopping cart to include the add-ons instead. Two users said it would make sense to have add-ons in the shopping cart, so they could see everything they’re purchasing at once. On top of this, it seemed overwhelming to have both the add-on products as well as personal cards at one time.

Note: scroll down to the Study for a more in-depth look!

Phase 4: Design

High Fidelity Screens

Before working on my high fidelity screens, I wanted to ensure a consistent design was applied through my company’s branding, and created a design system. I wanted to design a product that has a classy as well as trendy and calm personality.

STYLE GUIDE

Based on the user feedback from the guerrilla usability testing and the design system I created, I put together high fidelity screens, and assembled a prototype for users to test.

VIEW COMPLETE HIGH FIDELITY SKETCHES

Phase 5: Validate

Usability Testing

My second round of remote moderated usability testing involved another five participants. Similarly to the tasks during the guerrilla usability testing, I had participants search for a product and add it to the shopping cart, then checkout.

Additionally, I asked them to voice their opinions while browsing the homepage, and also the shopping cart and location of add-ons, since I had updated the design of these pages quite a bit.

Phase 6: Design

Iterate

I did one final round of designing to iterate my designs after considering key takeaways from my usability testing, which included:

Key Takeaway 1

Homepage - High fidelity screen tested

homepage - iterated design

Recommendation 1: Three users had trouble reading some text and colors on the prototype. Also, “A Perfect Gift for Everyone” was also overlooked, as three users thought it was a function to subscribe to a newsletter.

Solution 1: I first needed to change the contrast of several elements, and enlarge text for accessibility. In addition, according to an article on Curatti, “70% of small business websites do not have clear calls-to-action for anything on their homepages.”1 This is a main reason that businesses experience low conversion rates. With this in mind, I updated the CTA colors from light pink to dark green in order to grab the user’s attention more.

Key Takeaway 2

PRODUCT PAGE - High fidelity screen tested

PRODUCT PAGE - iterated design

Recommendation 2: Two users attempted to click on the “Add to Cart” button to add the arrangement to the cart before inputting the “Deliver to” and “Deliver on” fields. I designed the button to be disabled to signify to users that they had to fill out the delivery information first, but it wasn’t evident that the button wasn’t clickable.

Solution 2: In an article published on Smashing Magazine, it notes that, “Whenever anything in the interface is disabled, it’s an indicator that something is wrong.”2 To avoid any frustration and lessen cognitive load, the CTA is now a higher-contrast color, and is displayed at its default clickable state. It is imperative that an e-commerce site is a seamless experience for the customers.

Key Takeaway 3

SHOPPING CART - High fidelity screen tested

SHOPPING CART - iterated design

Recommendation 3: While I didn’t receive negative feedback on the shopping cart page during my guerrilla usability testing, I wanted to get user’s thoughts on the use of a cart drawer instead. Having the shopping cart accessible on every page was an idea I wanted to test with quick A/B testing.

Solution 3: During the A/B testing, three users said they liked the cart drawer, and two preferred a separate page like my original designs. I decided to go back to having a separate page for the shopping cart.

Key Takeaway 4

Checkout (DELIVERY INFO) -
High fidelity screen tested

Checkout (DELIVERY INFO) - iterated design

Recommendation 4: Although none of the participants had any issues during the checkout process, one participant mentioned that the “Order Summary” column on the right caught their attention more than the column on the left, which was where all the fields were to be filled. Another user also felt that it would make more sense for the CTA button to be in the right column, below the order summary total.

Solution 4: I switched the light pink background over to the left column, where I intended the user to focus on most to complete the checkout process. I also added the CTA button (in the updated color) to the right, as it seemed to make the most sense there.

Study: Cross-Selling Feature

PRODUCT PAGE TO CHECKOUT FLOW -
LOW FIDELITY SKETCHES

Checkout (delivery INFO) - iterated design

Recommendation: In my sketches, I had the add-ons display only after the user clicked on a product size. I felt this was a nice way to conceal the add-ons if the user were just browsing, but definitely caught their attention when adding the arrangement to their cart.
I also had repeated the add-ons in the checkout process, just in case a customer decided they wanted to additionally purchase an item. All five users during the guerrilla usability testing had great responses to the repeating elements. However, I felt it was necessary to look into other options to reduce the cognitive load.

Solution: In my iterations, I decided to separate the two types of add-ons to be in different stages of the checkout process. I placed the add-on products (chocolates, vases, etc.) in the shopping cart, and left the message and card add-on options during checkout.
This was because the add-on products, such as a glass vase, could be for a customer’s own purchase, whereas a message and card are usually added when customers purchase a gift for someone.
Users said that this placement didn’t bother them, and that it made sense to separate the two.

After completing these iterations, I finalized my prototype.

INTERACT WITH THE FINAL PROTOTYPE!

Conclusion

Next Steps

Although I felt this project was a success based on the positive feedback from users, there were still points I was hoping to explore in the future:

1. Product page.

Under the product description, I listed the flowers in the arrangement. My vision was that once a user clicks one of the flower names, such as “garden rose,” a pop-up would appear with pictures, information, and specific care instructions, along with a carousel of arrangements that included that flower. I felt this would be beneficial for users, and also the business for up-selling.  

2. Cross-selling.

I think further exploration is needed to discover when the most appropriate step of the purchasing process is to ask customers about add-ons. While the users I tested thought the add-ons were in a good location, everyone has their own opinions. It would have been ideal to do more usability tests and get feedback from others. 

3. The header.

I was looking into editing the header to include a field for delivery zipcode. This would be helpful for users who easily want to view products that are only available in the specified location.

Final Thoughts

Having a clear project plan that I created helped optimize my time and efforts. I found that people have their own opinions on the information architecture and visual design, but generally have the same thoughts on an overall flow of an e-commerce website.

Footnotes

1 https://curatti.com/web-design-usability/
2 https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/

All flower arrangement and add-on images are from https://urbanstems.com/
All card images are from https://riflepaperco.com/
Additional images: https://www.instagram.com/lif_design/ & https://www.instagram.com/martin__dumont/