Create your very own

CUSTOM BOARD

Project Overview

We seek to develop a singular platform for users to develop and grow their artistry and brand within the skateboarding community. This website will grant users access to premium photo editing tools and guides to create their own custom skateboard. Our target users are people in the skateboarding community and small skateboard businesses and creators.

The Problem

Photo editing tools typically involve pricey subscriptions or pro-level software. Alternatives exist, but typically will only feature a fraction of editing tools with little-to-no direction on how to create or enhance your designs.

Create a skateboard customization website that provides a wide range of editing tools and helpful resources to help creators and small skateboarding businesses create high quality custom boards.

The Goal

Lead UX Designer and researcher

Strategized and led usability studies, user research, wireframing, prototyping, and product testing

Responsibilities

My Role

User Research: Summary

I conducted a competitive audit and usability study to gain insight into the skateboarding and product customization market. There are many sites with customizable products and services but this project centers on those within the skateboarding community. I sought participants who would most likely use these types of services such as skateboarders of any age/skill level, skateboarding enthusiasts, and small businesses and makers whose product lines/brand revolve around skateboard culture.

The initial assumptions were that by providing premium editing tools and resources for customizing skateboard products this site would allow users of any skill level to create something that is truly their own design. Research findings also shed light on additional opportunities to improve the site by including custom online shops, expansive guides and tutorials, cross platform sharing, and revenue trackers.

User research: Pain Points

Limited Editing Tools

Photo editing Proficiency

Lack of Customizable Products

Users were frustrated by the lack of editing tools offered on other customization websites. Sites would occasionally only offer a handful of editing tools and templates or would require a paywall/subscription fee to unlock premium editing tools.

Users felt that they didn’t have the proper skill set to bring their designs to life and had a hard time using the editing tools.

Users felt they could never truly design their dream skateboard or products because product offerings were limited and/or the extent of the customization services were limited.

Persona: Cosmo B.

Problem Statement:

Cosmo is a creative entrepreneur who needs a platform to fully customize and order skateboards because they want to be able to market their custom designs and expand their product line.

Journey Map

Site Map

Four main pages would guide the user through the website based on what their needs are i.e. creating, shopping, view/edit their account, and about/help

In account settings there will be options to change certain aspects of the site based on user preferences allowing for better accessibility

Home Page Wireframe

Home page is set up as a straightforward shopping site but highlights the customization feature with a headline banner and buttons that navigate to the create page as well as the tutorial page.
Create Page Wireframe

The layout of the create page tries to reserve the most space for the editing workspace. Different editing modes will be hidden in tabs to allow the user to go back and forth between modes seamlessly.
Below the editing workspace there is a carousel of editable products that can be added onto the user’s design. This carousel would include elements such as board types, grip tape, and wheels.
Shop Page Wireframe

The shop page will feature three main sections (Creator shops, Popular, and Browse) which gives the user navigational cues to narrow down their search options.
The column on the left side of the screen will feature comprehensive filtering options to further narrow down the selection for the user. This will help users find exactly what they are looking for even if they only know certain keywords or preferences.

Homepage Digital Wireframe
Create Page Digital Wireframe
Shop Page Digital Wireframe
Account Page Digital Wireframe
Help Page Digital Wireframe

Screen Size Variations

Web

Tablet

Mobile

Low Fidelity Prototype

Usability Study

Participants were easily able to navigate through the site due to a clear structural hierarchy of elements but were confused by placeholders and other icons in the lofi prototype.
Placeholders and icons in the prototype disrupted the overall user flow. Participants were confused by placeholders which made the prompts difficult to accomplish in the study
Popup windows lacked consistency. Participants pointed out the inconsistent structure of the popup windows that would appear during the add to cart phase of the user flow.
An unequal distribution of content created confusing layouts. Certain pages had an unequal distribution of content and were not clearly divided into readable segments

Parameters:

Study Type - Unmoderated Usability Study
Participants - 5 Participants

Location - United States, Remote
Length - Not timed, participants followed a list of instructions

Mockups

Mockups: Mobile Screen Variations

High Fidelity Prototype

Accessibility Considerations

High color contrast for navigation cues and borders. Text and differing sections in site layout utilize high contrast to be more readable and to distinguish between sections

Setting menu options allows users to change various accessibility preferences including language, currency, and font size

Next Steps

Further develop navigational cues by implementing hover and filtering animations. These elements could improve overall user flow and maximize free screen space (i.e. utilizing drop down menus/carousels)

Focus on additional opportunities to develop and implement branding on the site. Creating a logo and refining the palette can make the site more memorable and engaging for the user.

Rework the maker’s online shop page. Create more customizable elements for browsing shop pages so that makers have more options to showcase and tailor their shops the way they see fit.