303 BOARDS

BACKGROUND

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.   

ROLE

Design thinking strategies; user interviews, personas, user flows, card sorting, wireframes, clickable prototype, usability testing, iterations.

Real Space Grey Copy 2303

USERS

USERS

User Interviews, Personas, Work Flows, Site Map

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. 

Skateboarders-persona
Non-skateboarders-persona

INFORMATION ARCHITECTURE

INFORMATION ARCHITECTURE

Card Sorting

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.

WORK FLOW

Adobe Illustrator

User-Flows

SITE MAP

Adobe Illustrator

Sitemap

SKETCHES

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. 

Home Page - 

Home-Page-303-Boards

Product Page - 

PDP-303-Boards

Blog Page - 

Blog-303-Boards

WIREFRAMES

Sketch

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. 

Home
Complete Skateboards
News
Articles
Skateboard Selected_
Added to Cart
Checkout 1
Check out 2
Checkout 3

CLICKABLE PROTOTYPE / USABILITY TEST

CLICKABLE PROTOTYPE / USABILITY TEST

InVision

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 - 

  • Not leveraging hierarchy in the non-skateboarder flow
  • Non-skateboarder PDP had some questionable features such as assembling a skateboard and applying grip tape
  • The checkout process did not leverage a way to get out of the process as a whole
  • 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

CONCLUSION

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!