W FLORAL

An eCommerce experience

During the pandemic there was an unprecedented and unforeseen growth that occurred in the eCommerce sector. As lockdowns became the new normal, businesses and consumers increasingly “went digital”, providing and purchasing more goods and services online.

Some small businesses had begun to grapple with eCommerce and while setting up online is a great first step for stores, it does not bring a guarantee of returning customers. Getting consumers to converge was vital.

The Goal

To investigate the problem space of W Floral (a flower delivery business) and design UX solutions. Since mobile internet use has outgrown desktop internet use, it was important for our team to investigate the problem space focusing on mobile-first design. This project was a design sprint that lasted two weeks. It was a group project of four.

My goal was to investigate the product page in more detail and redesign it to increase conversion rate. I was tasked with the job to help users successfully pick a product to purchase. Through open communication and consistent meetings, our team created the design synergy needed to complete the project as a whole.

Project Timeline

This was a General Assembly UXDI project that lasted two weeks. It was a collaborative group project of four (Stephen, Olesia, Sam, and Teresa). I worked on UX research, usability testing, UI Design.

Current Product Page

First, I explored the current website and checked out how it worked. Then I focused on the product page to see what features were available to help with a sale. The product page is one of the most important pages in the eCommerce world and I wanted to see what W Floral had to offer.

Colour selection

At first glance the existing product page had great images. There were “Colour Themes” to choose from giving users a variety of options to choose from.

Form Fields

Scrolling down the page are form fields for users to fill out. They can select a pick up/ delivery date, add a card message and any special requests they had for W Floral before hitting “Add to Bag”.

Common eCommerce features

Below the product details there were some features like search, favourites, and the shopping bag.

Discover & Define

Our main user profiles for W Floral were:

Last minute shoppers (These consumers prioritize fast turnaround and same day shipping).
Planners (Plans for events ahead of time and will take the time to browse selection and quality).

Setting up user interviews

When it comes to the product page I conducted 4 user interviews - 2 were last minute shoppers and the other 2 planners.

Goals:

How does the current mobile website experience work for the product page?
What other experiences are users familiar with?
What do they expect from this service with W Floral?

Key findings:

Although there were several details in the product page users were looking for information that were missing that would help them successfully decide on an item.
With the principle of perpetual habit, users were expecting to fill out form fields at checkout not in the product page.
There was confusion with what exact product they were getting (for example, the images did not change when different colours and sizes were selected).

Ideation

Step 1 : Using Quantitative Data

A/B Testing

Since I discovered that users were accustomed to filling out order details at checkout I did some rapid iterations and tests. I also improved the information architecture of the page for better accessibility and usability.

Version 1 had the existing form fields while version 2 did not.

4/5 users preferred Version 2

Card Sorting

To confirm my hunch I had users perform a card sorting exercise. This helped verify the information architecture for our users’ mental model.

5/6 users preferred this flow

Step 2: Using Qualitative Data

Existing vs. Proposed

Through interviews and contextual inquiry I was able to find trends using the affinity mapping technique on Whimsical. I then tested my prototype to confirm my hypothesis.

The existing product page has a lot of information but had 3 pain points. I connected the missing links in my prototype and here is a wireframe of it on the left.

Build & Test

Keeping the user's needs and pain points in mind I created a final high-fidelity prototype to start my testing with the users

Usability Testing

I recruited 5 people to test the prototype. The participants were aged between 25 - 35yrs.

Goals :

How easily users selected a product they were happy with
How easily users found information they needed on the product page
How does the overall experience feel like
What improvements need to be made

Test Results

100% Test completion rate

90% Smooth and easy experience

95% Are willing to use the app

What next

Working my way up to creating a responsive design for tablets and desktops. Focusing on mobile-first design gave me the opportunity to get the essential features right which is the heart of UX.
Conducting more usability testing and research would uncover additional pain points and lead me to make better design decisions. One takeaway from working on this project was the value of user testing and rapid iterations.