Creating a smooth, simple e-commerce experience.

A no-nonsense approach for a no-nonsense retailer

Please note: This is a concept project for a hypothetical business.

Overview

Loading Hardware is a local, independent hardware store located on Commercial Street in east London. They focus on customer service, reasonable pricing, and keeping it local.

Trading since 1964, they are now looking to expand their online offering in order to reach a wider customer base while maintaining their ‘small shop’ appeal.

The Brief

The solution proposed was to design a simple, practical e-commerce site in 10 days, providing a way for Loading Hardware to allow customers to purchase products online while staying true to the company ethos laid out below.

Service-First
We provide expert advice. In addition to having the best prices on everyday items, we also offer a range of and hard to find unusual items. We provide a seamless experience from order to delivery, and beyond. If we don’t have it, we’ll find it for you. Just ask!”
Everything Chosen by Hand
We value a hand-picked, curated selection of products from a number of distributors, over a large-scale inventory. Our customers know we back each product we sell.”
The Biggest Little Hardware Store
Our business may grow as we begin to sell online, but we will never lose the personal touch of the neighbourhood shop that started it all.”

These values were key in identifying what to keep in consideration when beginning the design process.

What is currently offered?

After analysing the websites of local competitors, it became clear that they all focused almost exclusively on directing users to purchasing products, rather than providing information on the business or their values — something that is important

Most sites offered several purchasing options such as free or next day delivery and click & collect which allowed me to understand what users would expect when shopping for hardware products online.

By visiting a competitor in person I was also able to see how products were organised and displayed in a physical store, giving me important insight into how the ‘small business’ feel could translate to an online experience.

Competitive analysis of nearby hardware stores

From talking to the shop staff I learned that most of their business was from trade customers as opposed to individuals — meaning that potential users are likely to know what items are and how to use them, and are looking for specialist knowledge and efficient service.

Design Development

Persona

The main persona that was identified is a middle aged construction manager who is experienced and knowledgeable with hardware products but has little time to spare and does not like to waste it.

This persona helped to provide a reference from which to base the initial site prototype designs, and allowed me to keep my design decisions focused on one key user type.

Information Architecture

To understand how potential users might navigate the site most efficiently I performed both open and closed card sorting with a selection of 75 of the most popular products that the client sells.

This allowed me to analyse the way in which users would categorise items in a way that makes most sense to them, and in turn use this information to inform the information architecture within the site.

Conducting open and closed card sorting exercises

Taking the information gathered from the client brief as well as the competitive analysis and user research, I produced a site map to clarify the structure of the site.

Laying out the site map

It was important to me that the options to learn more about the business and to contact them directly were given as much importance as the shopping aspect of the site, and as a result I opted to provide three top level categories of ‘Products’, ‘About Us’ and ‘Contact Us’.

This also ensured that the user was not overwhelmed by choice upon landing on the site, and would help them to make focused decisions to keep them on track to their goal.

User Scenario

After resolving the sitemap I returned to the main user to look at how I could address their specific needs.

I created a potential user scenario that would be used to design the site around:

Rob is planning to paint some new bookshelves first thing on Saturday morning.
He wants to be able to order everything he needs in advance online, and then pick it up locally at the weekend.

This user journey would allow me to create and test all the necessary steps a potential user would go through to make a purchase through the site, achieving a seamless user experience through the site’s core function.

As a result, our user will be able to source all the products he needs in a convenient way, while being able to support a local independent business. His straightforward, painless experience will leave him happy and likely to return as a customer.

Experience Mapping

Charting this user journey on an experience map showed that the most common pain point is experienced at the checkout process, so particular attention was applied to ensuring this stage was as frustration free as possible.

Experience map charting the user journey

Testing & Iterations

Sketches

The initial wireframe sketches allowed me to test my ideas of the potential layout and hierarchy of site objects:

Initial hand sketches

On the homepage I wanted to provide particular emphasis to the key values of the company, and designed large pictorial areas to immediately communicate this to the user.

For the product page, the focus was on fast, effective communication with the main points of information such as the product name and price given visual priority.

Paper prototyping with these sketch wireframes provided me with several points of feedback:

  • The ‘floating basket’ is confusing and unnecessary — can be removed without impacting user experience. The information can be easily reached by clicking on basket button.
  • The delivery method should be selectable before personal information is requested.
  • Billing address information is more relevant on the payment page.
  • Selectable items on the homepage are not fully clear.
User testing with a low fidelity, clickable prototype

Low-Fidelity Wireframes

I took this feedback on board and iterated on my designs when producing digital wireframes:

Low-fidelity digital wireframes

Specific feedback received from the prototype testing and my response to it is detailed below:

Mid-fidelity Wireframes

These iterations allowed me to produce a set of mid-fidelity wireframes to show a more realistic view of how the site might look to an end-user:

Next Steps

With further development of the project I would like to expand on the following aspects:

  • Make clickable elements clearer in menus and forms.
  • Introduce loyalty feature and make users aware of the benefits during the purchase process.
  • Adapt the item selection pages to display more relevant information.
  • Work on ensuring the site is responsive across desktop and mobile.

Click the logo below to view the clickable prototype:

Thanks for reading!

If you’d like to get in touch or find out more about me, please use one of the links below:

Email // LinkedIn // Portfolio