E-commerce Website Redesign for TAG Hardware — A UX Case study
Who is TAG Hardware?
TAG hardware sells and distributes glass shower door and railing hardware products through online and in-store. With over 1000 products on its website, each with different types of finishes, a user-friendly website design is vital to ensure customer satisfaction.
Problem Statement
TAG Hardware is currently using an e-commerce template website from BigCommerce which does not fulfill their customer needs. This leads to non- stop phone calls and overflowing email inboxes regarding purchasing products.
Users
The website is mostly used by small business owners and their staff, as well as contractors. The age demographic ranges from 21 to 55. Most contractors usually order products online and choose to pay and pick up in-store. A few trusted small businesses across Canada and the United States have store credit where they are able to place multiple orders online and make payments through online banking or a mailed cheque.
Goals
Increase online sales.
Roles & Responsibilities
The current website was not fulfilling its customers’ needs. Users find it hard to place an order online and were unable to find the products they were looking for. The current BigCommerce template is not optimized for user needs. So I proposed the idea of a redesign and did the following:
- User interview
- Quick fixes on the current website
- User Experience Research (Quantitative/qualitative data, observation, analysis)
- User persona creation
- Competitive & SWOT analysis
- Information Architecture
- Low-fi & Hi-fi prototype
The process
Before getting into the UX process, here is a detailed infographic of how the business operates.
User Interview
The best way to understand a user’s needs is through having a discussion with them. I was hired as a Web & Graphic Designer. However, I also assisted with sales and shipping as the company was short on staff. This gave me the opportunity to interact with customers regularly and obtain feedback on the website. In addition, I also learned how the business operates.
When speaking with customers, I was able to discover why they did not choose to purchase products online, as well as their experiences with using the website. Below are a few of the answers I received from customers.
Quick Fixes
With the received feedback, I decided to fix the issues which can be done quickly in a certain period of time, such as adding/editing product photos, descriptions, meta tags, search keywords, & grouping products.
User Experience Research
Collecting quantitative/qualitative data, observation & analysis
Google Analytics (Quantitative data)
I linked the existing website to Google Analytics to find out where my customers are dropping off.
Observation (Quantitative Data)
I installed Inspectlet to the website to see how users interact with the website and understand their pain points. I viewed the recorded sessions and took notes on how users are navigating the website, where users are struggling and how they achieve their goal. Additional to session recordings, I was able to view heat maps on eye tracking, scroll & click data for every page the customer visits. This data allowed me to empathize with the user and understand their pain points.
Competitive Analysis
The goal of this analysis was to see how other businesses have projected their website in the market and how TAG Hardware compares. This includes website design and features, customer service, and overall customer reviews.
Swot Analysis
User Persona
Creating a user persona for this e-commerce website was challenging. There are mainly two types of users who visit and place an order on the website.
User 1: Contractors and/or Small Business Owners
A few customers in this category use the back of the truck as their office, garage, warehouse and everything in between. They are always on the road. Users visit our website to find the price & stock availability. A few users place orders online and do an in-store pick-up. If they are not able to find the product online, they call the store and inquire about the product. Other customers in this category have their own home office and place an order from their desktop computers.
User 2: Small Business Staff
This type of user relies on product codes from catalogues or use simple foreman terms. If they can’t find the product online they generally place an order through e-mail or by phone.
However, 90% of the orders placed online are by contractors (User 1). Hence, below is a persona for this user.
User flow
Lo-fi prototype
Sketching on paper is always the best way to brainstorm ideas. For this project, I approached it using a mobile-first method. This allows me to concentrate only on the most important content first. I then used this as a base for creating the website prototype.
Hi-fi prototype recorded video
Clickable Hi-fi prototype
Please click below to experience the prototype.
Lessons learned
Every business is different and has unique customers with unique needs. As a designer at TAG Hardware, I was fortunate to have the opportunity to get an understanding of how the business operates, as well as the customer’s experience every step of the way.
The lessons I learned from this project are:
- Product image, product description and product pricing are the most important thing in e-commerce websites.
- Observation is important. Observing your users and your co-workers interact with the website gives more insights.
- User testing your wireframes is the best way to solve problems quickly.
I recommended a website redesign to the management at TAG Hardware. However, due to budget constraints, the project is put on hold. Nonetheless, it is a great experience working with our brilliant sales and marketing team. My sales manager always says:
“The customer shouldn’t feel the need to contact us with inquiries on product details or how to find it on the website. Everything should be crystal clear online.”
Goals Achieved
Working for a hardware store is challenging. Unlike other online stores, hardware stores have large inventories with a variety of products and finishes. Even though the proposed prototype is still on hold, the quick fixes made to the current website increased conversion rate by 51% year-over-year and online revenue by 47% year-over-year.
The following graphs from BigCommerce depict conversion, order and revenue data comparison for 2018 vs 2019. For confidentiality reasons, revenue numbers have been omitted.
