303 Boards is a funky independent shop specializing in skateboards & related apparel including caps, shoes & tees. The shop was founded in 1997 and it is now a staple in the skateboarding community in Denver. The shop does have an e-commerce site but unfortunately requires some help. The site's information architecture is pretty much non-existent as the current site does not have a way to easily navigate through the items they offer.
Design thinking strategies; user interviews, personas, user flows, card sorting, wireframes, clickable prototype, usability testing, iterations.
My initial assumption for the ideal user of a skateboard e-commerce shop would be skateboarders themselves. Through user interviews with 5 skateboarders, 100% of them indicated that they shop for anything skateboard related in person as they enjoy going to a local shop like 303 Boards to catch up with friends that work there. Understanding that skateboarders were already contributing to 303 Boards through their Brick & Mortar I discovered a second persona, non-skateboarders.
In order to make information accessible and findable for users, I performed a closed cart sorting activity. There are approximately 6 components that make up a skateboard and in order to understand how users sort that content into each component the card sorting activity would help me reveal that information. The results of that would allow me to structure the navigation and present it in a way that meets the expectations of the user's.
After completing the closed card sorting activity, I had a pretty good understanding of how users would expect information to be categories when visiting the 303 Boards e-commerce site. I found that all the participants in the closed cart sorting activity seemed to understand what all the elements of a skateboard are and that all of those elements together make a complete skateboard.
I flushed out some ideas via sketching and kept those sketches at a very low fidelity, it was time to move on to some more higher fidelity wireframes. In order to communicate the structure, layout, hierarchy of content, and functionality effectively I created the wireframes with Sketch.
CLICKABLE PROTOTYPE / USABILITY TEST
The wireframes above were then placed into a clickable prototype that I would utilize when performing a usability test on the e-commerce site. I created a script that contained task for users to complete. After creating a clickable prototype, I set out to perform some usability test on this e-commerce site. I was very happy to learn that the checkout process was very intuitive and a seamless experience.
Key takeaways -
1. Not leveraging hierarchy in the non-skateboarder flow
2. Non-skateboarder PDP had some questionable features such as assembling a skateboard and applying grip tape
3. The checkout process did not leverage a way to get out of the process as a whole
4. Skateboarded flow does not leverage an interactive feature such as a comment section for skateboarders to leave feedback and criticism on that blog post
Check out the clickable prototype were I leverage all of the key findings via https://invis.io/XHG4M77U6CR
The next steps for the project are to apply some visual design to the wireframes and create mockups. I would like to be able to test the UI patterns as well so I would create a prototype off of the mockups. I have been in talks with a developer who is interested in collaborating on this project and presenting it to the proprietors. More information on the project soon!