The Toolbox Company

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.

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.

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.