I aimed to elevate products' with a sense of depth by using embossed backgrounds that mimic skateparks.
Weight and Feel
I wanted the site itself to feel like a solid, material product with a crisp minimalist feel.
Interactive Elements
I utilized interactive elements to keep the experience fun and engaging.
Product Detail Page
I wanted to mirror the dynamic design of music streaming platforms like Spotify and Apple Music throughout the site
Making users feel like active participants in the experience
Overview
Provides a quick visual summary of board details
Tactile Interface
Solid material design replicates the tactile feel of physical switches and mechanical controls.
Product Specs
Interactive education on the impact of product measurements on board feel and riding style
Profiles
Uncover the story of each brand and the pros, behind every model for a deeper connection.
Shopping Cart
To match the PDP I streamlined the cart layout to highlight the products and checkout flow.
Build a Board
Users can swipe to build their setup in real-time, ensuring skaters get compatible parts that match their style
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 for my site to train for developer handoff and consistent design application across new pages, features, and platforms.
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
Ideation
