The Toolbox Company
Helping a 30 year old company move past their 30 year old website.
Project Overview
An eCommerce site I created for an assignment for General Assembly's UX Immersive course.
The Toolbox Co. is a small town hardware store that has been serving their local community for the past 30 years. Their website was about as old as the company itself. The Toolbox wanted to improve their online presence to better reflect their stellar in-store experience.
I was hired to research what The Toolbox’s current customers thought of their website. The information architecture of the site also needed major attention. I then implemented informed design decisions to deliver The Toolbox a prototyped solution.
- Spec work
- UX Designer
- Adobe XD, Photoshop, Miro
- 2 week sprint
Summary
Brought the Toolbox's digital presence into the digital age. Interviewed customers of The Toolbox Co. and it's competitors to determine how The Toolbox's digital experience can meet customers needs.
Addressed the needs of both individual customers as well as pro contractors by providing relevant site features and easy access to outstanding customer service.
Took the first steps into expanding The Toolbox Co. digital reach. Enabled customers to make purchases online, locate products in store, and get assistance from The Toolbox Co. 's staff more immediately.
I delivered a minimum viable product to them in the form of a high fidelity prototype.
Lessons Learned
I learned there is often times more than one type of user of a product and to make sure my designs are accommodating for multiple types of users' needs. For The Toolbox Company there were two key consumers; the average individual consumer and the pro contractor. One tended to need some guidance in what they were buying and the other needed a direct way to browse specific products that they already knew what they were looking for.
I learned the value in testing as soon as possible and testing often. I did start with testing a low fidelity prototype, but I could've saved myself some headache by testing even sooner. When I did my first test I already had a couple of ways for the user to find products digitally prototyped, but in trying to set up options for the consumer I missed some basic things such as the font on my product listings title text being hard to read.
I thought before this project that as someone who has used plenty of eCommerce sites they should be pretty simple to put together, but there are a lot of subtle and challenging things to consider when I really got into designing this project.
Like to go more in depth?
Please keep reading below.
Discover
Survey
Interview
Competitive Analysis
Card Sorting
I began my research process for The Toolbox with a survey to see what current customers use competitors’ sites for. The biggest takeaways from my initial survey were: Customers used competitors' sites primarily for ordering products, locating products in store, and finding the store itself. Customers preferred to ask associates for help rather than try to locate store products on their own. I used some of my survey results to better inform my competitive analysis of The Toolbox’s direct competitors and two of their indirect competitors. Additionally I asked eight users to perform a card sort to better identify how The Toolbox might sort their catalog to best suit their user base. I put all the categories respondents made into a word cloud to easily visualize the primary categories users identified.
Define
Personas
Problem Statement
I created two personas (see below) in order to embody the main user groups I identified through my research: individual consumers and small business contractors needing to order materials in bulk. Nosson embodied many of the younger users that I interviewed that were passionate DIYers that were comfortable with technology and wanted to avoid having to talk to associates as much as possible. Henry embodied an older business owner that preferred to minimize his technology use in favor of having a human connection with The Toolbox. I checked in with these personas constantly to make sure I was providing innovation Nosson wanted while keeping an experienced user like Henry still connected to what he loved about The Toolbox.
After reviewing my research I decided what the main problem was. “The Toolbox” needs a way to expand the success of their physical store into their digital presence, because online customers are missing out on the ease of use and great customer service that The Toolbox’s physical store provides. The Toolbox's current site is negatively impacting the way new customers perceive the store and thus reducing The Toolbox's potential revenue.
I’m a big fan of sketching. I used it here to brainstorm and get all the ideas floating in my head into something more concrete. I find that sketching rough screens and User Flows go hand in hand for me. There is a lot of jumping between the two. For The Toolbox I got a rough home screen sketched up and then drew the next screen according to what my research had told me the users wanted to see next. They wanted a product listing page, then a product description, and finally in the main flow a checkout process. I later circled back to flesh out some more pages of the site.
The best part of sketching and doing a user flow at the same time is it makes transferring to a digital wireframe nearly seamless. With The Toolbox I created low fidelity wireframes with the intention of getting to user testing quickly. It’s important not to design in a vacuum so I find it’s often a goal, as it was with The Toolbox, to get feedback from the users as soon as possible.
Design
Sketching
User Flow
Wireframing
Deliver
Interactive Prototype
User Testing
Iterations
The main deliverable for The Toolbox was an ecommerce site so the first thing I wanted to test with my first design was could users add items to their cart and easily purchase them (seems like a no brainer right?) My goal was to accomplish this flow with as few screens as possible. I first tested the prototype on my dad, before testing with people I didn't know as well. He discovered some minor problems with the flow, such as typos, that I adjusted and then expanded my user test. The four major things I found from my first round of testing:
- Many users when adding a second item to the cart tried to go on a path I hadn't anticipated
- Users were trying to search by brand, but at the time I didn’t have a flow set for it
- Users were looking for names of objects rather than images (as someone that is very familiar with hardware stores I didn’t recognize my bias of immediately understanding a tool from its photo)
- There was some inconsistency between screens on what UI elements were usable in the prototype
The main flow of screens wasn’t bad but did need a few adjustments before making a higher fidelity prototype for testing again.
The first iteration I made when building out the prototype was increasing the visual weight of the titles of products and allowing the user to take a path I hadn’t previously anticipated to add a second item to their cart (going back through the dropdown menu to the product listing page.) Next I made the search function available from multiple screens as opposed to just the homepage. The visual element was there from the beginning it was just a matter of linking a few additional screens to the flow. I enabled the user to be able to search by brand rather than just department as I found in my initial testing that many users were trying to use this route. These adjustments provided the functionality that the majority of the users needed. They were able to add multiple items to their cart and place a check out order for either pick up or delivery.
The biggest insight I had while doing this project was that less experienced customers didn’t always know the best tool for the job they were trying to accomplish so in future iterations of this site I would add a way for customers to describe the job they were trying to accomplish and the site would recommend the tools for the job as well as instructional videos on how to do the job.
Example: If a customer was re-tiling a shower they might not know what type of adhesive to use so the site could recommend the correct adhesive and instructional videos on re-tiling.
Customers of The Toolbox appreciate the knowledge that the sales associates bring to them so I would like to test the possibility of adding video chat functionality to the site so customers that need more assistance with the web interface don’t feel as though they’re missing out on the in-person experience that The Toolbox Co. is known for.
I’m of the personal belief that the best way to stay competitive in the market is to innovate and when working on any project I like to identify points where innovation is possible and where we can bring the digital and real world together. On my own time I conceptualized the idea of "Cart Mode".
Cart Mode would be available through The Toolbox’s mobile application. The user would select the mode from the apps main menu and then slide their mobile device into a phone holder built into a cart. They would then be able to easily search for an item in the store, select the correct item, and it would guide them to the aisle similar to how a user would interact with a GPS in a car. Once at the proper aisle the phone would display a diagram of the shelf and highlight the area the product is kept in.
