Progress Hardware Case Study


Progress Hardware has been Aldgate’s local hardware store since 1964. 
They have built their business model on customer service, reasonable pricing, and keeping it local. Progress Hardware felt the time was right to build an e-commerce website which could showcase there products whilst maintaining their small shop appeal.

With the rise of online retail giants we have lost that personal shopping experience gained when shopping in smaller local shops. Progress Hardware needed an online shopping experience that can compete with the retail giants whilst still maintaining the personal touch for customers.

The Problem

Big DIY stores lack the personal touch, while small DIY stores lack efficient online ordering and delivery processes.

The Solution

To design Progress Hardware an e-commerce website that provides a seamless process from order to delivery whilst keeping the appeal of a local store.

The Process

Competitive Analysis and User Research

Firstly I conducted a competitive analysis on both local and larger retail stores websites. I focused my research on small DIY Stores in direct competition to Progress Hardware and larger national DIY stores. This gave me good insight to the common functionality with the larger retails stores whilst giving me a clearer understanding of where I wanted the Progress Hardware website to position itself in the market. Through my analysis I could see that there is a gap in the market for a local DIY store with wide ranging functionality.

Proposed brand positioning for Progress Hardware

I conducted a site visit to a local DIY store to experience how a local store is run, see how they categorise their products and advise customers. I took the opportunity to interview some customers to gain some user insight into there purchasing habits. Through my research I interviewed several DIY enthusiasts and questioned them on their DIY purchasing habits to build a clearer picture of the user needs.

Site visit and user interviews

Information Architecture

From the user interviews I discovered that customers wanted and expected a clear catergorisation of the products on the website, order tracking and preferred to shop locally. The success of the e-commerce site would be based on an easy to use and simple product navigation system and a simple ordering and tracking process.

I conducted a card sorting exercise to gain insight into how users would categorise some of the existing products Progress Hardware sold at that time. The first tests were a open card sort, users were free to place each item in a category of there choice. I then conducted a closed card sort where the user determined were items went in predetermined categories.

Closed card sorting

Based on this research I was able to test and develop an efficient simple product category navigation system for the site. This would fit into the sitemap as its own section under the shop header in the main navigation. The shop catergories would display as a mega menu so the user could view all the items in one click, the mega menu would aid SEO on the site.

Site navigation with product category section under ‘SHOP’ heading

User Journeys and User Flows

For this project I was supplied with three user personas who all had a common goal of wanting to support local businesses and avoid shopping at giant retailers. Using these personas created several user journeys which helped me identify pain points my user experienced. I focused on one main persona of Max as he was the closest persona based on my user research research findings. Max had particular frustrations with not being able to track his order so I paid special attention to how the delivery options on the site would work.

User journey for my Max purchasing paint supplies

Some Pain points I identified were with filling in forms in payment section of the journey. I started to think of ways which the new e-commerce site could simplify that journey. With my user journey and site map I was now able to create a user flow for my persona which would show his journey through the website. This user flow gave me a clear indication for the pages I would design so I could test the flow with users.

User flow for Max based on the user journey

Sketching and Wireframes

Now I had my research, site maps and user flows it was time to start developing some creative concepts for the site. I worked in a design studio exercise with Daniel and Dania rapidly sketching ideas. No ideas were discounted, several design solutions were quickly produced and refined.

Ideas, ideas, ideas quickly sketched up in our design studio session
Homepage sketch

Using these sketches from the design studio session I started to create the designs for the homepage of the site. these were made into paper prototypes for testing. Through the testing and refinement of these sketches I started creating wireframes in Omnigraffle.

Prototypes and Testing

Using the wireframes created with Omnigraffle I created a clickable prototype in InVision. Using a detailed usability testing plan based on scenarios from my user flow I tested the prototype with my users. I set my users several tasks varying in complexity an catalogued the result. I then produced a revised prototype which I tested with a different set of users.

Changes made to the homepage after user testing

Though testing my site with several different users I identified key areas to changes including creating icons to aid navigation in the top navigation to adding more reviews onto products. My user testing helped me simply the purchasing process and delivery tracking options on the site. I was able to create a prototype which reflects how the final sites would be structured.

The final version of the prototype can be viewed here

Testing the clickable prototype

The Outcome

With a user centric approach and by going through several UX processes adopting the double diamond process I was able discover, define, develop and deliver a workable solution to the brief. This culminated in a final clickable prototype which I was able to test with different users both in person and remotely.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.