E-commerce Website Re-Design

Summary

TAG Hardware sells glass shower doors and glass railing hardware to installers and distributors. They use an e-commerce website from BigCommerce that doesn't meet customer needs, leading to many inquiries about products and ordering online. I enhanced the e-commerce website by following UX principles and here are the results

Increase conversion rate by 51%

Increased online revenue by 47%

As a result of Implementing UX processes, including user interviews, quick fixes on the current website, user experience research (utilizing quantitative and qualitative data, observation, and analysis), creating user personas and journey maps, conducting competitive analysis, establishing information architecture, restructuring the website we increased the conversion rate by 51% when compared to the previous year. Furthermore, these enhancements resulted in a substantial 47% increase in online revenue.

Read the full case study below

My Role:
UX/UI and Web graphic designer

Methods:
User research, user persona, user flow, user testing, SWOT & Competitive analysis, prototype, interface design

Timeline:
6 months

Overview

TAG Hardware is a hardware store that sells glass shower door hardware and glass railing hardware to installers and distributors. It has over 1000 products on its website with different types of finishes.

Users & Audience

The website is used by Installers, contractors, small business owners and their staff.

Roles & Responsibilities

As a solo designer, my role was to create a positive, seamless, and user-friendly experience for the e-commerce website and generate income through online orders.

Scope & Constraints

Implement UX processes, including user interviews, quick fixes on the current website, user experience research (utilizing quantitative and qualitative data, observation, and analysis), creating user personas and journey maps, conducting competitive analysis, establishing information architecture, developing low-fi and hi-fi prototypes, and designing the interface.

Despite limited funding and resources for professional website development, we successfully boosted online sales using tools provided by the vendor and engaging in conversations with users.

My Process

User Interview:
Talking with the user is the only way to understand what the user needs. Although hired as a designer, I also assisted with sales & shipping due to staff shortages. This provided regular interaction with customers, enabling me to gather feedback on improving service and the website. I spoke with almost every regular customer, asking about their online preferences and how to enhance their experience, resulting in valuable insights.

Problem Statement

What's wrong with the product?
TAG Hardware is using an e-commerce template website from Big Commerce which doesn’t fulfil their customer needs. This resulted in a substantial number of inquiries concerning products and the online purchase/ordering process.

Upon receiving feedback, I decided to address minor issues promptly. This involved adding and editing product photos, descriptions, meta tags, search keywords, and sorting out product orders.

Quantitative analysis using Google Analytics:
I connected the existing website to Google Analytics to determine where customers were losing interest and leaving the site.

Qualitative analysis using Inspectlet:
I integrated Inspectlet a tracking tool into the current BigCommerce website to analyze user interactions and identify pain points. I reviewed recorded sessions daily for insights into user behaviour, noting confusion areas and tracking navigation. Heat maps provided additional data on eye movements, scrolling, and clicking, revealing patterns in login behaviour, goal achievement, and exit reasons.

SWOT & Competitive analysis:

The goal of these analyses was to compare and learn about other businesses that have projected their website in the market, their customer service, features, customer reviews, and designs.

User persona:
Installers and small business owners, often working from their trucks, visit our website primarily for price and stock information. They either place orders online for in-store pickup or call if the product is not found. Some customers with home offices order from desktop computers.

User flow:
Created the user flow to map out the step-by-step journey a user takes to accomplish product purchase and checkout

Low-fidelity prototypes:
Developed a low-fidelity prototype to facilitate ideation, assess core interactions, and user flows, and evaluate the overall usability of the design.

Hi-fidelity prototypes:
Developed a high-fidelity prototype for user testing and development

View prototype by clicking the button below


Results & Outcomes

Increased conversion rate by 51% and Online revenue by 47%

The quick fixes on the current website, such as optimizing product photos, refining descriptions, enhancing meta tags and search keywords, reorganizing products, and establishing a new information architecture, significantly increased the conversion rate by 51% compared to the previous year. Furthermore, these improvements led to a 47% increase in online revenue.

Lessons Learned

  • Talk to customers and conduct user interviews to understand customer struggles and needs.

  • Maintain a balanced mix of text and images on an e-commerce website.

  • Keep product names concise and memorable.

Cloud Marketplace Platform

Cloud Analytics Platform