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.