Discovery Phase

Competitive analysis

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.

USER RESEARCH

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.

Defining the Problem

Persona Creation

After conducting my user research and competitive analysis I was able to complete my problem and solution statements.

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.

Using the user research from my interviews and segmentation information on their user base I created two personas who had a common goal of wanting to support local businesses and avoid shopping at giant retailers.

USER STORIES

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 FLOW

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

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.

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.

Developing the Solution

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.

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.

WIREFRAMES & User 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.

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.

Delivering the Solution

Clickable prototype

The below prototype takes you from the initial personalised email through to setting up your account and then moving onto the timeline which explains the care process and the what happen next.