Progress Hardware

One of the most challenging projects at General Assembly my goal was to design an e-commerce website that provides a seamless process from order to delivery whilst keeping the appeal of a local store. This project was about executing a full two week design process while applying fundamental UX skills.

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.

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.

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.

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.

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.

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.

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.