Rebranding Legendary Skatepark Of Tampa’s Online Store
30 UIs, 30 Days: Day 20
Turnaround: 2 hours
If you’ve ever stepped on skateboard, you’ve probably ordered from SkateparkofTampa.com. For those of you who are unfamiliar, Skatepark of Tampa (SPoT) is arguably the most iconic skatepark and store in skateboarding history. The warehouse has held countless legendary sessions, The yearly Tampa Ams, live shows, parties, and destruction since its the early ’90s.
And yet, Skatepark of Tampa—one of the most bitchin’ displays of teen angst and testosterone in skateboarding—has one of the shittiest looking websites I’ve ever seen. This high traffic site has the opportunity to get so much more attention with a better UI and branding that fits their legacy and appeals to their customers.
As lifelong skateboarder (Check it👇) I took it upon myself to redesign the UI.
Mobile first will hit the SPoT
This is what their current UI looks like.
Okay, so it’s not the worst. But it’s not optimized for mobile, which is a 2017 no-no. The page template is also lacking an quantity entry field for of items to purchase and an add to cart button. Instead, when you click a size, it automatically places the item in your cart. This flow is unconventional and irritating.
I started the new Mobile UI for their CMS’s item page template by taking some elements from their desktop site.
Information about the product and the selection options were placed in a 2 column div. The left column gives product details, and the right column gives purchasing options. Page navigation has been placed in a hamburger to conserve space and meet conventions.
The mobile site uses a similar hero-style div to display the content for sale. The item image content remains the same size when transitioning from mobile and desktop to optimize the mobile customer’s visual experience.
A Gnartifact Getting On- Brand
After I had a simple UI that met customer’s needs, I started on the branding. I needed to create a visual design experience that embodied the feel of the park and meet their customer’s needs.
I left SPoT’s use of absolute White & Black in my design. The pure tones add a sense of edginess. I added a semi-dark grey tone to give the UI dimension and hierarchy. And what about the neutral orange? you’ll see.
Handwritten Griptape Typography
By creating a noise fill and using Hex #535353, I was able to create a font that resembles griptape. To compliment the Typeface, I used a Google Font called Bebas Nue.
The Skateboard Nose
To give SPoT a competitive edge and a unique design, I created a Div in the shape of the nose of a skateboard.
Using the same noise fill and Hex #535353 combined with a double border, I made what looks like a bird’s eye view of a skateboard as if pushing or riding in the street course at SPoT.
The double line is crucial to making it look like a real skateboard. This is because the top ply of most decks have colored wood. This is the red inner border. The orange outer border is the 2nd ply of the deck, which can be seen due to the concave and rounded edge of a skateboard.
The image content is housed by the skateboard div. It’s also a carousel image, meaning there’s multiple images for the user to browse on the page. To represent the carousel buttons, I used skateboard bolts instead of the typical circles. The active carousel button is the white bolt.
Improved Mobile Shopping
To make it easier to buy stuff, I made the price and purchase buttons red. Red also was the indicator for any selections in the purchasing flow.
A legendary establishments deserves a good UX/UI on their web presence. With a better mobile online experience, branding, and consistent design, the SPoT could have more online sales than ever.
If you work for SPoT hit me up and I’ll do a full redesign for at a good rate!