UX/UI design of E-commerce website

E-commerce Website Redesign for TAG Hardware – A UX Case study

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.

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 them 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.

Increase website visits and online sales.

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 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.

As a result of the user interview, here are a few answers I received from customers

1. Product codes are too long

2. Price difference between instore and online

3. Cant find products on the website

4. Website is not like Google

5. Prefer buying instore

6. Inventories are not up to date

7. Unable to find products in the search bar

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.

Collecting quantitative/qualitative data, observation & analysis

I linked the existing website to Google Analytics to find out where my customers are dropping off.

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.

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.

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: 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.