Responsive Skateboard Customization Website

On Board / September 2023 (1 Week)

Streamlined online flow to assist beginners in selecting their ideal skateboard easily.

On Board - Cover

My Role

Being the sole designer on this project, I handle all aspects, including user research, information architecture, navigation design, user journey mapping, wireframing, prototyping, usability testing, as well as visual and interaction design.

I utilized Figma and Adobe Illustrator as the primary tools for this project.

Overview

While I have no prior skateboarding experience, I've always been curious about trying it out. However, I've found myself unsure about how to select the right skateboard. Despite visiting various shops like Decathlon and Canadian Tire, I've struggled with making a choice.
This project provides an opportunity for me to delve into this realm, conduct thorough research, and create a streamlined online flow that assists beginners like myself in choosing their ideal skateboard with ease.

TL;DR? I've got you covered.

The project addresses the problem of beginners struggling with online skateboard purchases due to limited knowledge and overwhelming options. The solution guides users through customization via a questionnaire and highlights user reviews and ratings.
Interested in checking out the final solution right away➡️️

Discovery

What difficulties do individuals face when customizing skateboards online?

After conducting research and surveying a diverse group of participants, I've discovered that beginners often face significant challenges when it comes to purchasing skateboards online.
They have limited knowledge about skateboards, struggle with choices, lack awareness of reputable brands in the community, and are often uncertain about their actual needs.
Various Comments and Feedback on the Confusion Surrounding Skateboard Selection

Even if beginners have no prior knowledge of choosing skateboards, do they still consider any factors when making a selection?

In my pursuit of gaining a deeper insight into the thought process of beginners as they select their skateboards, I conducted an informal interviews with friends who expressed interest in learning skateboarding but had yet to take the plunge.
This approach aimed to uncover their primary concerns and involved having them explore existing online skateboard shops to identify any difficulties they encountered.

Here are a few insights from these interviews.
icon-texture

Graphics

Users tend to prioritize images when they enter the website.

icon-money

Price

Users choose budget options without a clear understanding of how these components meet their specific needs.

icon-reviews

Reviews

Users often rely on ratings, reviews, and recommendations from others.

But wait, what should beginners actually consider when purchasing a skateboard?

With limited prior knowledge about the inner workings of a skateboard, I set out to gain a deeper understanding.
To acquaint myself with this domain, I engaged in extensive research.
This involved watching content from 15+ different YouTube channels, participating in 10+ skateboard communities found on platforms such as Reddit, Discord, and Facebook, and devouring numerous articles authored by experts.
icon-texture

Functionality

Gear like deck dimensions, wheel size, and truck width, affecting comfort and tricks. Softer wheels add comfort but can limit high-speed slides, while wider boards offer stability but add weight and impact flip speed.

icon-money

Material

Skateboard materials like 5-ply Maple and Quad X layers impact weight and durability. Brands like Santa Cruz and Creature innovate for thinner, stronger decks.

icon-reviews

Graphics

Colors and patterns express personal style, and graphics are a top criterion for board choice, especially among beginners, enhancing their passion for skateboarding.

Let's meet our users.

Michael Novak (30) Skateboard Beginner

“I often consider visiting a local skateboard shop instead of buying online. The abundance of specifications confuses me, but my busy schedule has kept me from making that visit, delaying the start of my skateboarding journey.”

Mike is an adventurous and active individual with a newfound passion for skateboarding. He's comfortable using technology but hasn't had any prior experience with skateboarding equipment or the purchasing process. He's looking for a complete skateboard setup that suits his beginner needs.

Goal #1

Learn Skateboarding Basics

Mike's primary goal is to master the fundamental skills of skateboarding. He wants to confidently cruise, learn to balance, and perform basic tricks.

Goal #2

Enjoy an Active Lifestyle

Mike aims to incorporate skateboarding into his active lifestyle. He wants it to be a fun and fulfilling recreational activity that allows him to explore the city while staying fit.

Paint Point #1

Overwhelmed by Options

Mike is overwhelmed by the multitude of skateboard options available online. The variety of decks, trucks, wheels, and other components makes it difficult for him to choose a suitable setup for his beginner level.

Paint Point  #2

Limited Time for In-Person Shopping

Due to his busy schedule, Mike finds it challenging to allocate time to visit a local skateboard shop for personalized guidance, which is causing delays in starting his skateboarding journey.

Alright, shall we examine how other companies approach this?

By critically assessing the strengths and weaknesses of each skateboard seller's platform, and conducting brief usability testing on each, I was able to identify specific features that I considered crucial and recognize areas in need of enhancement.
Analysis of Competitors: Skate Warehouse, Skatepro, and Stoked Ride Shop

Advantage #1

Efficient Filtering Options

Offer user-friendly filtering systems, allowing users to effortlessly narrow down their component choices based on criteria such as brand, color, and size.

Advantage #2

Visually Appealing Presentation

Present their products with eye-catching images displayed in a grid layout. This visual format makes it simple for users to select the colors and patterns they prefer.

Problem #1

Lack of Comprehensive Guidance

Some websites offer articles and video tutorials, but beginners often still feel lost during customization. This confusion stems from excessive technical language and intricate specifications presented as text, potentially alienating newcomers. Additionally, there's a lack of helpful suggestions for compatible part pairings, which could significantly enhance the efficiency of component selection for less-experienced users.

Problem #2

Tedious Component Selection

While a few websites offer checklists to ensure the inclusion of all necessary parts, most still employ a component-by-component selection method. This approach necessitates users to manually verify their cart contents, potentially causing navigation confusion.

Ideation

Now that we've identified the problem.
How might we design a flow that offers beginners guidance in selecting a skateboard tailored to their specific needs?

While brainstorming the customization flow, I explored various approaches:
Exploratory Draft Wireframe for Customization Flow Brainstorming

Concept A

Questionnaire-Based Recommendations

How might we create an experience similar to a psychometric test or MBTI test?

Concept B

Always Adjustable User Preference Settings

How might we seamlessly integrate preference settings into user accounts, allowing customers to adjust them at any time?

Concept C

Community-Powered Customization

How might we post their suggested setups in their accounts, share them with others, and receive endorsements from the community?

Initial Customization Screen Brainstorming: Listing desirable features and potential user confusion points
After evaluating the pros and cons of the concepts I've brainstormed, I considered implementing a questionnaire-based suggestion system.
Users could save various preference sets, allowing them to quickly access results if their preferences remained unchanged from the last time. However, they would also retain the option to conduct a fresh preference test with each purchase.
Additionally, we could introduce a rating system for each item to indicate user preferences and reveal which items are commonly paired, such as item A being frequently purchased with item B.

How do (we think) users navigate?

Customization Flow User Journey

Customization Flow v.01

I initially explored the idea of incorporating an automatic suggestion system to enhance user convenience.
The concept involved users inputting their preferences, including budget, skate location, and design preferences, and the system would generate a customized setup list for them.
The goal was to streamline the shopping process, allowing users to proceed to checkout effortlessly.

However, following usability testing, users did not adopt this concept.
So, how do users actually navigate?

Users benefit from receiving guidance on their choices rather than being presented with pre-made selections.

Customization Flow User Journey

Customization Flow v.02

My new user flow focuses on guiding users rather than simply providing them with a pre-defined setup list for quick checkout.
Users have the freedom to explore and select their preferences from all available options, with the added guidance of filters based on their preferences.
If they happen to select items that aren't suitable, the system will provide warnings to assist them in making better choices.

Site map.

While I may not be responsible for the full website development in this project, I aim to craft a concise sitemap that offers a clear and holistic view of the website's structure.
This approach allows me to design a user-friendly experience, ensuring a seamless journey for customers. By understanding the flow and decision points users will encounter, I can facilitate straightforward navigation.

Sitemap

Wireframe

My First Iteration.

When I embarked on the initial wireframe design and conducted usability tests, my primary focus was on three distinct user processes:
Customization Flow User Journey

#1 Preference Questionnaire Input

My aim was to understand how users would interact with this feature, their perceptions of it, and any suggestions for improvement during the process.

Customization Flow User Journey

#2 Customization Board

As the central user journey, I explored the significant challenges users might face and assessed whether this approach would provide them with a clearer understanding of their choices.

Customization Flow User Journey

#3 Checkout Process

Despite the availability of established checkout solutions like Stripe, this project required the creation of a checkout process. I drew inspiration from various checkout experiences to ensure technical feasibility and align with familiar user patterns found on other websites, delivering a user-friendly experience.

As I mentioned in the previous section, users didn't quite grasp this concept.
What specific findings from the usability test highlighted the changes that need to be made?

"I get a little worried that changing one thing might mess up my whole list. If it suddenly disappeared without warning,
I'd probably hesitate to complete my purchase. I spend a lot of time on it, and it would be frustrating to see it gone."

- Douglas / Usability Test Participant

Priority #1

Potential Item Removal Warning

As novice skateboarders, participants didn't realize changing deck size affected trucks and grip tape, leading to frustration when these elements disappeared during deck width adjustments—a widespread issue and my top priority for improvement.

Priority #2

Clarity in Questionnaire Guidance

Users are frustrated with questions like 'Where to skate?' and 'What tricks to perform?' They want to select multiple answers in the questionnaire (currently limited to one choice) and need clear budget guidance for beginners due to their lack of prior knowledge.

Priority #3

Preference and Setup Sharing

Users fall into two groups: some want to share their setup for advice, while others seek community recommendations. Both share a common frustration: the current prototype lacks easy setup sharing, critical for beginners seeking advice.

Priority #4

Enhancing Review Information

Users seek comprehensive reviews, not just positive ones. They want to see 1-star ratings and reasons why. They desire the number of ratings for each star category and photos of others riding the skateboard in the review section for those interested in graphics and visuals.

So, what alterations did I make after the usability test?

Customization Flow User Journey

#1 Step-by-Step Process for Enhanced Navigation

1.1 Overlay pop-Up for potential item removal alert

1.2 Utilize suggestions instead of generating an items list

1.3 Step-by-step process guidance for user-friendly navigation

1.4 Replace dropdown with radio buttons for enhanced clarity

Customization Flow User Journey

#2 Improved Questionnaire Guidance: Offering References for User Assistance

2.1 Offer budget references

2.2 Enable users to select "I don't know" for uncertain answers

2.3 Provide unit selection for familiar shoe size conversion

2.4 Implement checkboxes for multi-option selection

2.5 Offer guidance on the impacts and differences related to this option

Customization Flow User Journey

#3 Enhanced Setup Saving and Sharing: Facilitating Sharing and Comparison

3.1 Users can rename and save setup lists at any time

3.2 Users can enable notifications for price drops and restocked items in their saved lists

3.3 Users get a quick overview of each board for easy comparison of look and price differences

3.4 Users can share saved boards from their wish list with others

Customization Flow User Journey

#4 Comprehensive Review Details: In-Depth Information

4.1 Offer an overview of review ratings, showing the number of ratings for each star, with detailed views accessible by clicking on each star

4.2 Enable users to exclusively view photo comments

Design System

How do I maintain consistency in my design?

When designing the interface style for the skateboard customization flow, I gave precedence to three primary considerations:
Customization Flow User Journey

12-Column Layout

I implemented a 12-column layout in the design to facilitate responsiveness and ensure uniform alignment across all pages.

I employed Figma's layout grid function to ensure consistent layout throughout my work.

Customization Flow User Journey

Minimalistic Approach

To emphasize the skateboard graphics, I adopted a minimalist UI style, allowing users' eyes to remain fixed on the skateboard designs and informations.

I utilized Figma's components function to establish a versatile sticker sheet, enabling efficient and consistent work by customizing various properties.

Customization Flow User Journey

Color Awareness

Color is strategically used to indicate various actions, step states, and user choices, enhancing usability.

I established a color and typography library within my Figma design file to maintain overall design consistency.

Final Solution

A step-by-step customization guide with suggestions to provide a user-friendly approach for beginners to create their first skateboard.

View Figma Prototype

#1 Guided Step-by-Step Customization

Using the user's input from the questionnaire, the system generates suggestions like deck width and wheel size.
Users can save their preferences as filters while browsing items.
This approach offers users the freedom to explore while providing helpful guidance.

#2 Graphic-Centric Exploration

Recognizing that beginners often prioritize graphics in their buying decisions, I aim to enable users to explore graphics that inspire their purchases.
Additionally, I use infographics to convey component functionality, making it easier for beginners to grasp the details of each component.

Customization Flow User Journey

#3 Simplified Setup Wishlist Comparison

To assist users who may have difficulty deciding or want to save for later, a visual collection of skateboard setups with images allows for easy comparison.
Users can effortlessly review their saved setups, comparing prices and details.

Customization Flow User Journey

#4 Flexible Notification Options

To address potential out-of-stock situations and accommodate users waiting for price drops, the "Notify me if price drops" and "Notify me upon restocking" features offer easy wishlist management, sparing users from daily checks.

Customization Flow User Journey

#5 Step-by-step checkout process

While there are several checkout services available for websites, such as Stripe, Square and PayPal, I've created a streamlined checkout flow for On Board as part of the project's requirements.
This checkout process is designed to enhance the overall customer experience, making it more seamless and user-friendly.

Reflection

What I have learned in this project and how can I do better next time?

Avoid Making Assumptions!!

One key lesson I've learned is not to make assumptions before diving into a project.
As a beginner skateboarder, I initially assumed that users would benefit from a system generating skateboard suggestions directly, as I wished for such guidance when starting out.
However, after conducting user interviews and extensive online research, I discovered that this approach wasn't what users actually needed.
If I could start over, I would refrain from making such assumptions to reduce biases and better align with user needs.

📝

Include Diverse User Testing

In hindsight, I realize the importance of conducting usability tests not only with beginners but also with skateboard professionals.
My limited network of skateboarding contacts restricted my perspective to that of a beginner.
This limited view may have resulted in potential pain points for experienced users.
In the future, if I have more resources and time for a similar project, I would conduct more comprehensive research, including interviews with diverse users.

🛹

Definitely skateboard knowledge!

Despite being a newcomer to skateboarding, this project has equipped me with valuable knowledge on how to choose a skateboard.
I now have the confidence to select a customized skateboard that suits my needs, and I look forward to applying this newfound expertise in the future.