top of page

Project Overview

"SC" Skateboard Customs Responsive Website/ Mobile App

Custom skateboard website to buy skateboards.

The Project:

Skateboard Customs or better known as “SC” amongst the skateboarding community has tried to make a name for themselves by giving the option to all users abilities to purchase custom skateboards.

Duration: 4 Weeks

The Problem: Creating a website for everyday users in which they can buy new, custom, and unique skateboards.

The Goal: Design a website where users can create custom skateboards.

SC mobile home mockup.png

Project Overview

My Role: As the UX designer, I created a skateboarding website to order skateboards for a company called Skateboard Customs.

Responsibilities: My responsibilities were conducting interviews, doing paper and digital wireframes, low-fidelity, and high-fidelity prototypes, conducting usability research studies, accessibility, accountability, and iteration of my design.

Laptop Mockup SC.png

The Research: During the process of creating this website, we conducted numerous interviews to understand what users wanted. After my research, I found that users wanted a website where they could purchase custom skateboards as well as buy unique ones.

The research also showed me that something needed to be done, for example, changing the Font type because it didn’t work well with the website from the original low-fidelity wireframe. 

SC mobile mockup.png
Understanding the user
User Research: Pain Points


Users are not able to get confirmation information after they make their purchase.


Users had no option to go backward from the previous page.


 Users need to be able to select the skateboards for purchase. (have some type of indication that you selected the right product).


Not all users were family with the layout of the design of the website so changes need to be made so it is easier to use.

Richard Skateboard persona.png
John Skateboard persona.jpg
SC Sitemap.png

The sitemap shows the path of the information for the user's map.

Paper Wireframes
Scan_20221229 (4).png

Here are some of my paper wireframe ideas for my website as well as the mobile version of the responsive website. 

Scan_20221229 (2).png
Scan_20221229 (3).png
Low Fidelity Prototype

The low-fidelity prototype presented with a simple design with placeholders for the skateboard website where icons with text would be.

Skateboard low fidelity prototype.png
Design Wireframe

As the website was still in process I made changes based on the user group to give users the option to go backward in the website.

Screen size variation

mobile digital sc.jpg

Here is a screen of the digital wireframe screen size variation for a mobile version of the website.

Usability Study

I conducted two rounds of my usability study. The findings from the first round of study helped to create the wireframes for the skateboard website. The findings from the second round study helped to create the high-fidelity prototype design and showed what needed to be fixed skateboard website. 

Mock Up

After looking at my study I realized that the homepage of the website was too crowded and did not have enough negative space. So I made some changes to the home page as shown in the slide to give the website.

Before usability SC.jpg
After usability SC.jpg

Mockups: Original screen size

Mockups: Screen size variations

High Fidelity Prototype
SC High-Fidelity.png
Accessibility considerations


One particular accessibility consideration that was applied to this design was the choice of icons to be used like the home button.


Another accessibility consideration that was applied to this website was the motions of some of the images when pressed for example when you select the product there was a slight indication that showed your product was selected.


Lastly, for accessibility we tried to use icons that were universal in that the users would know.

Final Product

bottom of page