Progress Hardware

Digitool Progress - E-commerce journey: A UX Case Study

In the heart of London's East End, you'll find Progress Hardware. For over 50 years they have served the community supplying local residents, tradespeople and businesses with their building supply needs.


I was tasked as sole UX Designer for this 2-week design sprint concept brief to take this much-loved store online with an E-commerce website. The challenge was to ensure easy site navigation, and clear product display and organisation. It was also key to keep their small shop appeal, great customer service and to showcase their highly-curated inventory.


Competitive Analysis

Some fellow UX researches joined me in carrying out an in-depth feature analysis of all competitors online presence. I took all the major high-street and online brands as well as some medium and small local competitors.

We gained a clear view of what was essential to have, what could be included and what could give us a competitive edge. We also carried out Contextual inquiries across a number of stores to discover:

  • Stores organisation and signage
  • Customers habits
  • Product positions
  • Displays and Advertisements
  • We observed and spoke to both customers and owners where we discovered:
  • Technical advice is a daily in-store role for the team.
  • Stores were hard to navigate with insufficient signage.
  • Customers would often ask for where to find things.
  • Interviews

    I interviewed a number of individuals ranging from trade, regular DIYers to the not so seasoned hardware store goer on their buying habits. I discovered a number of qualities they look for when carrying out buying items for hardware tasks.

  • Price
  • Advice
  • Locality and Convenience
  • Service
  • Handling the products
  • Reviews
  • Information architecture

    My focus then turned to the navigation and with the aid of card sorting I took 75 varied and popular products and had a number of people sort into and name categories that they felt they belonged in.

    I first allowed people to arrange them and make the headings themselves. This gave me an organic and natural list of potential tier 1 headings.

    Using the results I was able to conduct closed card sorts where I narrowed down the potential site heading and organisation.

    Site map

    I began mapping out the site map, concentrating on giving customers the quickest route possible. Some top level changes were made to avoid quaternary level product links.

    User Journey

    Progress Hardware has three key user types. Your seasoned DIYer, tradesperson and the less familiar newbie and gift buyer. I created three hypothetical user scenarios and mapped out their user journey to figure out how they would achieve the desired task.


    I then began sketching out the website, breaking up each category, section and feature separately. It was important to refer to my competitor feature analysis and look to incorporate features that would be familiar to the users.

    Features like a prominent search bar, clear delivery information and shopping basket indicators were vital.

    Prototyping & Testing

    More detailed wire flows and screens followed in Sketch. The screens reflected:

  • The businesses local community led message was clear
  • Quick navigation to locate a product
  • Help is readily available
  • Smooth and short checkout flows
  • DIY enthusiast

    Gift discovery

    Tradesperson reorder

    Useability tests

    Using InVision I put a prototype together and set about user testing.

    I used a rainbow chart spreadsheet to document the usability test findings which made the results clear with actionable steps.

    Header clarity

    The header was deemed too busy and unclear so I simplified whilst trying to keep the important information.

    Separate landing page

    Users were expecting landing pages for the main product sections like paint and decorating.

    Gifts card

    The gift card option was missed by most if not all users.

    Checkout confusion

    Repeated options in the checkout process left users confused.


    The filtering options and what users thought they did threw up some changes to the structure and their purpose. There was also a feeling of too many options at once.

    Product info

    Breadcrumbs were an important omission according to users. As was the inclusion of too much information in the form of reviews and tech specs, tester pots ordering and clear

    Birth of the curated guides

    Following the usability testing, it was felt that whilst the gift card option would serve the purpose, it didn't fully showcase the unique and hand-picked inventory that Progress Hardware offered.

    To address this I testest a number of concepts based around curated guides to assist both the DIY hobbyist, collector as well as the gift hunter.

    The section led to great user feedback with multiple routes to finding a gift or unique item - a USP of the business.


    Link to a clickable prototype (InvisionApp)


    A lot of time was spent on the Information architecture aspect of this brief which resulted in a product that tested well. The primary goal was to ensure clear navigation and cater to the diverse customer base whilst translating the heritage and unique aspect of the store's inventory. The extra additions of subscription tool clubs, curated guides and 'Deliveroo style' hardware speedy delivery service would need more research but appear unique business additions to the store.

    Next steps

  • Finalise the tone of voice with the stakeholders.
  • Hi-fidelity prototype and further usability tests.
  • Roadmap for rolling up the multiple features.
  • Develop a speedy hardware delivery service app.
  • Feedback is welcomed and encouraged so please share it. I'm also happy to answer any questions you may have.

    Idea? Opportunity? Chat?

    If you have a project or position you wish to discuss then please drop me a line. I'm currently available for freelance, contract and permanent roles.

    Email: Call: 07515 886 897