Progress Hardware.
Design an e-commerce website for a hardware store.
For my second project at General Assembly, I was tasked with building a website for a client. My client was Progress Hardware(PH) a neighbourhood hardware store established in 1964 that serves a diverse community whose clients are local residents, tradespeople and businesses.
UX Techniques
Competitive analysis, user research, user journeys, user interviews, card sorting, site map design, design studio, user flows, wireframes, prototyping and usability testing.
Tools
Paper and felt tip, Omnigraffle and Invision.
Scope
My task for the project was to design a website that would allow PH to further serve the community it exists within, by offering its customers a digital avenue from which to purchase 75 of its most popular products; while ensuring that their brand image remained unchanged. A brand that emphasises loyalty to its community , great customer service and a highly-curated inventory focusing on hand picked quality over quantity with a strong small shop image.
Musts
The brief presented the must have features for the website which were ‘a clear way to locate specific products’, ‘support a single page for each product’, ‘allow customers an efficient way of buying more that one product’ and ‘steer customers towards popular products’ while establishing the brands’ points of difference and prioritising customer service.
Personas:
As part of the brief I was given three personas from which I chose one primary whom I could use as a sample for recruitment of users to interview. I chose Amber as my primary persona, a 26 year old, tech savvy, landscape architect who supports local businesses.
I chose my primary by creating concept maps of all the personas as well as PH In order to understand how each of the personas related to the client. This led me to choosing Amber as I believe she has most in common with PH.
Ambers’ goals are an organisation of the display of information related to making informed purchases in a timely manner.
Competitive analysis
I began my research by analysing existing websites for hardware stores as well as Amazon and categorised the competition by whether they where specialists or generalists and how large their inventory was.
A few class mates and I that had been tasked with the same project pulled our research together to make a spreadsheet that presented the features that each of the competitors’ websites included in order to understand the standard features of competitor websites.
Moreover my classmates and I conducted a site visit and took some photos and video of a hardware store we had identified as similar to PH called Sids DIY. From the site visit and the footage taken I was able to sketch a diagram of the floor plan of the store which included the most recognisable item in each isle. Key insights from the infographic allowed me to identify how the store had organised its products.
Information Architecture
This led me to begin creating a sitemap for the navigation of the website based on the 75 products included to me in the brief. I began by attempting a series of open card sorts in order to understand how users would group the items listed and quickly ran into trouble when I realised that there was always a few outliers that didn’t seem to fit into any category.
This sent me back to researching the competition in order to see how they had addressed the problem, which led to further issues when I found that each website had attempted a unique solution.
User Interviews
Once I had understood Amber a little better I moved on to interviewing users whom I thought had similar priorities and characteristics. Several of the key insights from the user interviews allowed for more definition with regard to the scope of the project emphasising key pain points amongst users related to 2 heuristics dictated in Morvilles’ honeycomb; Findability and Usability as some of the quotes below show.
“A lot of websites are better than others at checking out, so physically having to put in all you address details and how easy it is to actually to physically pay for stuff. So like from basket page through to finishing up. Less clicks — the easier the better.” Ed (28 year old DIY enthusiast)
Some points resonating Dieter rams Good Principles of Design specifically with regard too understandability also came up in the interviews.
“Like you need to be a member of prime, and then you think you need to be a member of prime and then in turns out that you need to be a member of prime but you also need to pay for an entire pantry box instead of just the box”. Aby (34 year old mum of three, DIY enthusiast)
After reviewing the findings from the interviews I decided to use Lina, a 25 year old architect, as the user to design for; as she most mirrored Amber in habits and characteristics. Below is a quote she responded with when asked about what frustrated her when shopping online for DIY a clear example of her issues mirroring Ambers when shopping online:
“If I’m looking for something and I don’t know what its called or have to ask someone for help, but no-one is there to help.” Lina
User journey
As part of the brief I was given three user journeys form which to choose one for my user.
Once I analysed the insights afforded by the user interviews as well as understanding the persona I chose the ‘paint journey’ illustrated below along with the emotions that Lina feels during the journey.
I chose the paint journey because it was in line with Linas’ goal of achieving information in an efficient and informative manner in order to make the best possible choices as quickly possible.
Lina’s problem in the journey is that she needs to get paint by Saturday in order to paint some bookshelves.
I resolved to conquer the problem by using a mixture of the analysis that the open card sorts yielded as well as the competitive research which allowed to begin positing categories for some closed card sorts in order to test the effectiveness of my categorization. The closed card sorts allowed me to iron out any problems with my categories and I was able to make the first version of my sitemap; Ive included a snapshot of the top three levels of my hierarchy below.
Design Studio
As part of our ideation phase me and my classmates conducted a design studio in order to rapidly generate solutions for each of our respective users’s problems’.
The design studio was critical in further defining the problem and a solution that was elegant enough to solve it.
The key insights from the design studio allowed me to realise that because the problem was expediency in purchase with the appropriate information my solution should rest around the design of my navigation and checkout flow.
Wire-framing Lina’s journey:
Once I knew what Lina’s journey was and now that I had a clear idea of what my user would want for a sitemap I began to sketch some wireframes to later use as a prototype for testing with users
User testing
I used this early prototype to test with users including my primary in order to understand how my users would navigate the site and what they thought about my information architecture.
With the insights from my first round of user testing I created the first version of my prototype in Omnigraffle. A sample of the home screen is below:
I then used this prototype to test further which allowed me to iterate my design further.
Changing my navigation and site map completely as a result of the tests; resulting in my final sitemap.
Iteration
I was able to iterate my initial design from a drop down menu in the middle of the header to one that comes down from the left allowing the user some notion of where they are in the navigation as well as a more understandable taxonomy.
Iterations were also made to the product page where users commented that there was not sufficient information on the page to make the decision to purchase.
Further iteration was also made to the basket page of the website with the expediency and clarity of information in mind as dictated by the user tests:
Prototype
All which led to the final design for the clickable prototype visitable here.
Next steps
- Begin to incorporate more of the shoulds and coulds in the brief.
- Make products searchable by brand.
- User test further for feedback.
Thanks for taking the time to read my case study and please feel free to hit me up with any questions.
Maz