303 Boards: Redesign
Role: Lead UX/UI Designer
Duration: 2 weeks
Platform: Responsive Web
Tools: Sketch, Invision, Zeplin
OVERVIEW
est. 1997 by a pizza delivery driver
303 Boards is a prominent skate shop located in Denver, CO that has been featured in both Thrasher and Transworld Magazine for their original products and sponsored skate team. They are considered the “dive bar” skate shop in the local skateboarding community, and their skate shop experience is enhanced by their skilled and dedicated staff.
The Problem
303 Skate Shop lacked information architecture and brand identity in line with their beloved presence in Denver, CO.
The Goal
Create an intuitive navigation system for products usable by both experienced and inexperienced shoppers.
Update visual design to reflect a consistent brand.
RESEARCH
COMPETITIVE ANALYSIS
I researched other local skate shops, Emage and 7twenty, and each site had a top navigation bar with product categories and some sort of highlight on their brand using branded products or shop events.
From this, it was important to keep in mind that navigation and identity is what 303 is missing.
How would a new user approach the competitor’s navigation?
To see how competitor’s navigation worked for users, I decided to test early with an inexperienced shopper. I asked them to “buy a skateboard,” and they selected a ‘Deck.’ Then, after realizing that a deck does not have all the needed components, they returned back to the navigation and found ‘Skate Completes.”
INTERVIEWS
I interviewed experienced skateboarders on their history as skateboarders and their particular shopping habits/needs in a skate shop.
Insights
1. Skateboard completes are for newbies.
Experienced skateboarders either bought or received complete skateboards for their very first skateboard, and that is the best way to learn about what you like. They may not be the best quality, but it’s best to buy something at a lower price to break and re-build as you learn.
2. Product specifics.
Experienced skateboarders know exactly what they want because they have been learning what works and does not work according to their skating style. When exploring products, they will look for their preferred brand, size, and concavity (bend of the board).
3. Shop experience.
Physically walking into a skate shop is the primary way that skateboarder’s like to shop for their products because they get to talk to the skilled staff.
CARD SORTING
Inexperienced Shoppers
Skateboard completes were categorized under ‘Skateboard’ and decks, trucks, wheels, and bearings were under ‘Skate Components’
Experienced Shoppers
A seasoned skateboarder categorized skateboard completes and decks under ‘Skateboards’ because “decks are still the board part of the skateboard”
DESIGNS
Wireframes
User Testing
To ensure that new users would be able to find a complete skateboard, I tested the wireframed navigation with both options of ‘Decks’ under ‘Skateboards’ and ‘Skate Components.’ Users were able to find a skateboard complete in both options without any hesitation or confusion. I decided to move forward with decks under ‘Skateboards’ to honor the expert’s categorization.
Hi-Fi Mockups
When I began to design the home page, I knew that I wanted to somehow highlight who they are as a brand. I started with “History,” but soon realized that a lot of their individuality and brand power came from their collaborations with other well-known companies and artists. Instead of “History”, I moved more into their collaborations with clear call to action buttons guiding towards purchases. In the end, I created a more interactive display of their boards featuring the brand partnership and individual artists.
In addition to my categorization iteration, I also changed from a vertical to a more horizontal display of the products for an ease of use and visual impact.
Product Listing Page
From my user research, I found that experts will first search by brand, then followed by size and concavity. The product listing page has includes those filter options to accommodate an expert’s quick search for the right product.
Product Detail Page
Skateboarders enjoy the camaraderie and expert opinion that comes from physically walking into a shop, so I wanted to dedicate a component to “Staff Wisdom”: a space for the employees to give their two cents on any given product. Following the Staff Wisdom, are reviews from fellow skateboarders to provide even more information and context for users looking to purchase.
Responsive design
SUMMARY
My research concluded that, when shopping, experienced skateboarders look for product specifics and enjoy the individuality and expertise of an independent skate shop and inexperienced skateboarders will buy a complete skateboard instead of separate skate components.
With a revised navigation system, both experienced and inexperienced shoppers will be able to quickly find products they need. The home page now includes large imagery on their collaborations to highlight their individual brand and collaborations with popular brands, so they can show their passion and dedication to skateboarding. On the product detail page, employees of the skate shop are able to add their specialized opinion on their products to provide a similar experience that shoppers get in the shop.