Project Brief

Unofive is a commercial gym equipment dropshipping business run by two Canadian entrepreneurs. I was invited to begin this project a year after the store was launched, and figure out why they had such high bounce rate at various points of the user journey.

Duration

June 2021 - present (ongoing)

MY ROLE

Solo UX Designer

Tools Used

Figma, Miro

UX Techniques Used: Competitive Analysis, Card Sorting, User Personas, Customer Journey Map, Site Map, Wireframing, Usability Testing

Brief

The Problem

Unofive wanted to find a way to increase their conversion rate as well as reducing their bounce rate at various points of the user journey. I was tasked with understanding why users were leaving at various points of the journey.

The Solution

The solution was to consider all the various user groups, understanding the brand’s appeal, and targeting the website to these particular users. As well, I streamlined particular processes to make it easier.

About the Client

Unofive is a commercial gym equipment business run by two Canadian entrepreneurs who prioritize selling Canadian products.

Defining the Problem

Unofive has high bounce rates on various pages. It seems common for people to visit the site and leave quickly. This can occur after several interactions with the pages.

After talking to the owners of Unofive as well as observing customer interactions on hot jar, I was able to gather some information of the customers who were making purchases or repurchases. As well, I was able to talk to 2 customers who made repeat purchases to explore their experiences and establish personas.

Main Goals: 1) Clearer hierarchy of products; 2) Clean visual design; 3) smoother checkout process

Constraints

I was invited to begin this project a year after the store was launched - I was unable to participate in terms of selecting a theme and therefore had to work within the restrictions of their current Shopify theme.

Competitive Analysis

I began by identifying 3 main competitors (Canada Fit, Rogue Canada, gorilafitness) that do dropshipping of gym equipment within Canada, as well as three main indirect competitors (SportChek, Canadian Tire, Sporting Life) in the sports equipment retail space. My goal was to compare and identify common features and flows across these sites and to identify potential opportunities for Unofive to improve upon and to differentiate themselves. I've also identified some larger indirect competitors that offer general sport products on an international level to compare and identified their strategies.

Personas & Journey Map of Customer

The client had defined 2 main user personas, each with specific needs and pain points that needed to be addressed in the website.

Outcome: I created an in-depth journey map of those customers. This allowed us to uncover findings about the customer’s journey, and their interaction with the website. I’ve included a side-by-side comparison between the personas & their corresponding user journey.

Relevant Findings (Primary Persona)

Customer cares about high quality products with specific specs.

Customer cares about specific details such as the kind of wood the product uses, whether certain components are replaceable, what kinds of foam is utilized.

Wants to identify product by title and image alone.

Due to the large selection of products Unofive provides, multiple versions of one product often occurs. Customers want to immediately differentiate products based on their needs.

Customer appreciates customer service who truly understand their products.

Customer appreciates a customer service who truly cares to figure out the details of products to really serve their service base.

Wants to know shipment options

Wants to know various shipment/pick up options as well as various costs.

Relevant Findings (Secondary Persona)

More likely to buy from a trustworthy brand.

Needs social proof and other data to figure out how reliable the brand is.

Knows what general products she’s interested in but unsure about specifics

Wants to have clear access to good product descriptions and easy comparison between multiple products (from within the brand as well as in comparison to other brands)

User Needs

Based on these 2 user personas, I identified some main user needs to take into consideration while redesigning Unofive’s website.

The primary needs defined were:

1. Clear and user-friendly product organization for a less overwhelming shopping experience

2. A consistent design system that aligns with its current brand and establishes trust

3. Efficient checkout to save users time and allow for easy purchase of products

4. In-depth product information to ensure proper product selection

5. Product Reviews & Q/A section to allow for user input, to make informed buying decisions, and for social proofing

6. Easy way to access customer service for quick questions that further inform buying decisions and create a seamless shopping experience

7. Product search to easily find products

8. In-depth shipping information to ensure an optimal delivery service within the desired timeframe

Information Architecture

With an inventory of different products to use as a guide, it was essential to organize the information in an understandable way so that customers can find what they’re looking for.

Open Card Sorting: I asked 6 participants to organize the 102 products into categories of which they considered most logical. The goal was to understand how user groups categorized the content to help us determine the hierarchy of the navigation.

Site Map

To define the overall structure of the website, I created a site map. This was to make sure that products are placed where users would most expect to find them when visiting the website.

The Checkout Process

I applied the Fogg Behaviour Model to the eCommerce checkout: Behaviour = Motivation x Ability x Trigger. I made sure that the process of entering information is easy and fast to eliminate any user friction.

This process was difficult due to the constraint of the current Shopify preset which restricted the seller to setting only one fixed shipping cost. However, Unofive itself had various shipping costs dependent on the manufacturer and the location of the customer. One of the difficulties was taking account of all the edge cases associated with shipping when it came to location. For ex., Unofive wanted to include the free shipping banner when the customer was within a certain proximity to Toronto due it being a major selling point for customers located in the GTA area. I streamlined this process by creating a flow.

The banner will appear on the top for free shipping dependent on location of customer. Free shipping is not guaranteed until customer enters in their postal code information.

Development Phase

Wireframing

By using the customer journey maps as a guide, I began to explore concepts for the website layout. I prioritized the “defined primary needs” as a basis to address the needs of the users throughout the site.

Rough Wireframes

Before jumping into the hi-fidelity, I created rough wireframe user flow to show the business owners the relationship between all areas of the page. This ensures a frictionless user journey.

Website Redesign

By using the customer journey maps as a guide, I began to explore concepts for the website layout. I prioritized the “defined primary needs” as a basis to address the needs of the users throughout the site.

Main Page/Hero Section

For the home page, I made it a goal to reduce the clutter within the site. I tried to include as many similar elements to the current website with the goal of simplifying the page. This includes changing up the navigation, the hero image, simplifying existing product images to emphasize features, as well as adding typography that gives a more modern and sleek look. I also included the popular items section, as well as popular categories below.

Product Categories/ Product Page

On the product category page, I included visual images of categories of items to guide users who are less knowledgable in gym equipment terms. I simplified the product images to reduce visual clutter.

On the product page, I include a signifier to show when products are Canadian made, as well as including existing shipping methods on the page so that users can take cost of either methods into consideration while deciding on their purchase. I’ve also given priority to details, reviews, and Q&A to allow for user input and establish trust while users make a more informed buying decision.

About/FAQ/Chat

I also redesigned the “About Us” page to emphasize how Unofive distinguishes from other gym equipment retailers. This page was also an opportunity to reinforce credibility as well as reinforcing their brand values. I’ve also included a Contact page where users can inquire about products, as well as an FAQ page embedded with Contact so customers can easily access answers to questions they may have.

Checkout Process

By using the “checkout process userflow”, I tried to make as seamless an experience as possible in relation to the Shopify preset. Before the user arrived on the preset Shopify page, I created a previous page that allows customers to estimate costs with different delivery methods while including the total costs on the sidebar with the rest of the items. I’ve also included the other payment options below Checkout for easy access.

On the shopping cart slide out, I’ve included an “Estimate Shipping” feature that gives users immediate access to shipping costs based on their location.

Finally, in the case where the customer orders multiple products from different suppliers, an alert message will appear which informs the customer that “to place a pick up order, all items must be available for pickup”.

Future Development

This case study is just the start of a larger design process for the development of this e-commerce website.

Other features for future consideration include:

1. Mobile redesign

2. Usability testing of current design (on both desktop & mobile)

3. Survey to figure out what type of gym equipment customers needs

4. Better branding to establish trust

5. Sign in for returning customers

What I Learned

Not only is it important to consider template constraints, but also development time of certain features. When redesigning a website in multiple phases, it’s essential to prioritize certain features over others to maximize sales.