For project 3 of the General Assembly UX training programme, I created a mid-fidelity clickable prototype for an e-commerce website.

UX Techniques
User research, user journeys, information architecture, design studio, user flows, wireframes, prototyping and usability testing.
Sharpies, Omnigraffle and Invision.


The Brief

The client for this concept project was a local hardware store.

Loading Hardware wanted to allow people to order some products online, with items being delivered to their home or work, or picked up at the store.

The Project Scope

The client stated the website must:

  • Have clear ways of locating specific products
  • Support a single page for each product which can be linked to directly
  • Have an efficient means of purchasing one or more products
  • Steer customers toward popular products
  • Establish the brand and its points of difference
  • Allow customers to contact the business (including to request a product not otherwise stocked)

The Opportunity

Robert is looking for inspiration for a gift for a close friend who loves to collect every type of DIY tool available.

The solution was to create a website where he could find a suitable gift and get offline, back into ‘real life’, as soon as possible.

The Process

User Research

As well as doing user interviews, I visited Robert Dyas to get a feel for a competitor’s local brick and mortar store.

Research showed that:

“Tradesmen all go to Screwfix and get next day delivery”

Fast delivery was also a key motivator in the retail space:

“The speed of Ebay’s delivery makes it very quick: a couple of clicks and it’s delivered to your door” [Denny, 42]

Not all hardware products need to be bought in store:

“Some materials you have to buy in store: you need gauge them with your eye. I’ve reserved things online but only electronics that are standardised” [Angus, 36]

User research insights:

  • If Loading Hardware built a website, there would be demand for some types of tools to be bought from it.
  • Speed of delivery would be a key factor for users.

Competitor Analysis

I also conducted a review of competitors’ websites.

This showed there are some functions that most customers would expect to see as standard:

  • Sign in / Register
  • Shopping Card
  • Customer Service / Contact Us
  • Product Category Menu
  • Social Media Links
  • About Us

All of these would need to be included in the prototype.

Card Sorting

I was given a list of the 75 most popular shop items, which then needed to be put into categories. To ensure the product categories would make sense to a wide variety of users, and not just me, I conducted open and closed card sorting.

I put the results into a spreadsheet showing the users’ most popular categories:

From this I was able to finalise the website’s product categories.

Information Architecture

The user research, competitive analysis and card sorting meant I now had enough information to think about how the site would be organised.

This is my sketched site map:

The Product Category menu gave users a clear way of locating specific products.

Separately, the customers were also steered towards Popular Products.

About Us was a key feature to highlight the local feel of the brand.

Information about Delivery & Returns encouraged users to choose the site’s delivery service.

Contact Us allowed users to easily get in touch with Loading Hardware during working hours.

The Persona

Robert was the primary persona chosen for the project:

His goals and frustrations greatly impacted the final design.

The key insights from his persona were:

  • Robert is impatient
  • He wants to do research online but get into the store as soon as possible for a ‘real life’ experience.

Experience Map

To start thinking about what screens to create for the prototype, I created an experience map.

This would chart Robert’s journey as he buys his friend’s gift:

As Robert wants to get offline as soon as possible, I marked the checkout process as a place to streamline the site.

User Flows

I built user flows for two scenarios off the back of the experience journey:

In the prototype, Robert can either get gift inspiration via Popular Products or he can find a power tool himself from the Product Category menu.

The checkout process is kept as short as possible.

To maximise his ‘real life’ experience, Robert can also order the goods to store and pay when he collects them.

Testing & Iterations

Though the homepage started with some very basic features, the final version:

  • Steered customers towards popular products, as per the brief
  • Allowed customers to locate specific products via the product category menu
  • Established the brand by highlighting its work with the local community

The landing page allowed users to view a range of available products.

The snapshot of product information included: price, customer rating and a brief description to encourage click throughs to the product page.

The product page showed full product details, information on collection, delivery and returns, and customer reviews.

There was also the option to write a customer review.

Users were shown related products to drive secondary sales.

As speed is critical to the primary persona, the checkout process was streamlined as much as possible.

The first screen enabled the user to check out as a guest:

I also included the option to collect items in store to ensure the user spends as little time online possible.

On the checkout summary page, the user was able to pay in store to avoid filling out billing details and address:

The order confirmation page included a loyalty discount to encourage repeat custom:

A map of the store location, contact details and opening times were also included.

This meant the user had all the necessary information to quickly plan the item collection.


My clickable prototype is available to review here:


User testing showed that it was easy to navigate the site and find a suitable gift for a friend. Also, the fact that users could pay on collection was well received.

Next Steps

Thought the website was working well, in the next iteration I would want to bring all the screens up to high fidelity. This would include a defining the brand personality and colour palette, as well as a new typeface.

Like what you read? Give Hugo Nickols a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.