Colutions

Skate Warehouse

2023

Role

UI/UX Designer

Type

School Project

Duration

3 months

Tools

Figma, After Effects

Introduction

For this project I was tasked to redesign a Global E-Commerce Site including...

Mobile

Desktop

Dark Mode

Design System

New Functionality

Problem

Skate Warehouse's website was outdated in both design and functionality, lacking beginner-friendly guidance and relying on an immature, graffiti-heavy aesthetic unappealing to mature users.

Solution

I proposed a refined redesign with interactive features for all skill levels, introducing intuitive functionality that positions Skate Warehouse as an industry leader.

Research

Analysis

Ideate

Design & Development

Deliver

Sport Growth

Between 2019 and 2020, US skateboarders grew by 34% to 8.87 million,
This growth included a new audience of women and older adults.

Competitor Analysis

Yet when analyzing the top Skateboarding E-Commerce sites,
I found that they were inaccessible for beginners in this mature audience

Key Takeaways

I found that the same User Experience problems were prevalent
across many sites and began to draft ideas on how to resolve them...

Product Tiles

All product details are crammed into the title,
making it hard to read and causing line breaks

Nested Products

Products have duplicate entries taking up
excessive space for each color and size.

Product Specifications

Details are not properly formatted and have
no explanation for beginners

Board Visualization

Details are not properly formatted and have
no explanation for beginners

Wireframing and Testing

I continued several iterations of wireframes, getting feedback from users of varying levels
of skateboarding experience to shed light on what could be improved.

Category Page

Product Detail Page

Shopping Cart

Build a Board

Visual Aids

Beginners did not know where each measurement was
taken and could not visualize how it impacts the board

Background Information

Beginners didn’t understand the significance of
each brand and the skater behind each pro model.

Design Direction

When continuing on to design exploration, I wanted to find fresh new references that
captivated a more mature audience outside of the traditional punk-rock teenager market.

Final Designs

I aimed to find a fresh, new approach to e-commerce design that proposed
new ideas both visually and functionally for skateboarders of all levels.

Desktop Reflow

I adapted the mobile design for desktop and tablet,
enhancing the experience from touch to cursor-based interactions.

Design System

Finally, I created a design system to train for developer handoff and consistent design
applications across new pages, features, and platforms.

Impact

Products are put on display in a refined, yet accessible way
Site organization is streamlined and decluttered
Unique design stands out from the competition
Flagship features where users can visualize their full setup
Tangible functionality yields viral sharing opportunities
Education supports new skaters entry into the sport
Experience is appealing to a broader audience than before
Design system is established to continue site expansion

Dark Mode

I created designs with an alternate color scheme meant to
diminish eye strain in low light conditions.

Desktop Reflow

I adapted the mobile design for desktop and tablet,
enhancing the experience from touch to cursor-based interactions.

Design System

Finally, I created a design system to train for developer handoff and consistent design
applications across new pages, features, and platforms.

Impact

Products are put on display in a refined, yet accessible way
Site organization is streamlined and decluttered
Unique design stands out from the competition
Flagship features where users can visualize their full setup
Tangible functionality yields viral sharing opportunities
Education supports new skaters entry into the sport
Experience is appealing to a broader audience than before
Design system is established to continue site expansion

Text Link patternGen