Improving online buying experience

OVERVIEW

Evergreen Market is a retail recreational cannabis store that offers recreational cannabis products and accessories, as well as medical marijuana sales at Western Washington

The aim of this project was to improve the online buying experience, enable customers to complete the three main tasks: search, discover and repeat orders, utilizing an online checkout system.

ROLE

I am working as a Lead UX Designer throughout the project cycle from requirements gathering to strategy, wireframing. design planning.

TOOLS USED

Figma, Balsamiq

PRODUCT

Goal of the project

The primary purpose of the e-commerce website was to

improve the online buying experience,
drive people into the store
expand their customer reach beyond North & South Renton by allowing products to be purchased online for delivery.

The Research Process

To make applications that are useful for users, I applied Design Thinking in making this project.

The Challenge

I had to pay special attention to the homepage because it is the first thing users view and the most crucial of the touchpoints. We had to figure out what they wanted to see and what the most critical features in an e-commerce UX scenario were.

Discount popup blindness, despite having good offers and discounts, users are not taking advantage of them.

It takes a long time to browse item photographs in stores.

Customer loss at the checkout.

User Research

As a first phase of the product design process, we carried out several interviews with people from the target audience and identified three main personas for this e-commerce UX project.

Who exactly are we developing this website for? The client had already identified three user personas in the brief I was given, each with particular demands and pain areas that needed to be addressed on the website.

I determined the major user demands I intended to address in the website based on the three user personas, while also considering the needs of Stockholders.

The primary needs were as follows:

Clear product organization ensures a smooth shopping experience.
Product search to quickly locate products
Product recommendations that reflect product knowledge and handpicked inventory
To build trust, establish a customer-brand relationship.
Product details are provided to ensure accurate product selection.
Product reviews to assist in making informed purchasing decisions and to allow for user feedback
Efficient checkout process to save users time and facilitate product purchases

User Flows

After defining the "larger picture" of the experience I needed to deliver to the users, I designed a user flow for each of the personas to tailor this experience to each of their objectives.

The purpose was to identify the planned stages that each user might follow through various pages and actions on the website in order to achieve their goal.

This would allow me to focus not just on what each user needs to accomplish, but also on how to offer that experience in the most efficient way possible when developing my website.

The first user persona I addressed in my user flows was Rachel.

Her main goal was to find the right product in the limited time that too in her budget, for this she use to visit websites multiple times a day. She uses to search for products in several different paths she could take to successfully purchase it.

Both Ellen and Carly wanted an efficient checkout process, so it was important that I cover this in one of my user flows. The flow below shows how Ellen might accomplish her goal of buying a product once she has selected it. I wanted to minimize the steps she needed to take to complete the checkout process by allowing her to sign in to her account. This would automatically input her checkout information for her to streamline the process.

Information Architecture

We conducted a fast card sorting test before beginning work on the prototype's homepage to determine consumers' mental models of landing on an e-commerce site.

We generated several cards with potential homepage elements and asked users to sort and arrange them in the order that made the most sense for them. They were also permitted to design new cards.

Wireframing

I started designing my first wireframes in Figma based on the feedback and personal insights I gained during the drawing phase. Throughout the website, I made sure to prioritise the features that would best serve the demands of the users.

User Interface Design Solution

We had to pay special attention to the homepage because it is the first thing users see and the most significant of the touchpoints. We had to figure out what customers wanted to see and prioritise the most crucial pieces.

The paradigm of popup blindness

Rachel, the price-conscious persona, wanted to know if she could get a discount on things without having to spend a lot of time looking. She didn't want to have to look too far: she needed something obvious.

We chose to emphasize the discount accessible to email members. Most e-commerce sites simply slap a huge subscription popup window in the face of the buyer. They believe that this will suffice, but it will not. People wanted to get rid of any popups that were in their way since they saw them as advertisements. So I made a small change and developed a slightly different modal window that glides up from the bottom-right corner of the screen rather than appearing in the center (on desktop).

It takes a long time to browse item photographs in stores.

The younger segment like Rachel of our target audience found browsing item photos in online stores very time-consuming.

We wanted to show all the pictures of an item right from the list/category page. We implemented a quick-view solution in the prototype, a simple carousel that can be used to check all the photos of an item. Our users loved it.

Customer loss at the checkout

All of our personas became stressed at the online checkout process, being afraid of technical problems or security issues.

We created a straightforward web checkout process with steps that people found easy to understand, including:

delivery options,
shipping address/pickup details,
payment options,
summary.

We found that people perceive the checkout process trustworthy if:

we actually tell them it is secure, by placing a “secure checkout” label somewhere,
they can use the interface easily and have an overview of all the steps,
we mention partner companies (banks, shipping companies, etc.) they trust.