Responsive Website Redesign:

Push Skate Shop

Deliverables

A new website redesigned for desktop & mobile platforms

Timeframe

2 weeks
Remote

Tools

Sketch
Invision
Adobe Ps

Problem

Due to Covid-19, Push Skate Shop has to rely more on their website which lacks a basic navigational system, clear product pages, any search function, and a safe & Secure check-out experience.


Solution

A modern website design completed with a new informational hierarchy and an improved overall user experience. Because this was a responsive design, Push’s website is scaled for desktop and mobile platforms.

My Design Process

01

Research

  • Competitive & Comparative Analysis
  • User Interviews
  • Card Sorting
02

Design Strategy

  • 2 Personas
  • Ideation and Sketches
  • Low-Fidelity Wireframes
03

Iterate

  • High-Fidelity Mockups
  • Prototype
  • Design for mobile (Responsive)
04

User Feedback

  • Gather User Data on Mockups and Prototypes
  • Repeat Step 3!

Competitive & Comparative Analysis

By studying other skateboarding websites (The Canteen, CCS, Tactics), several similarities were apparent: all three websites follow a similar navigational system that makes sense to skaters. By adopting and adapting this navigational system, Push’s users would be able to locate the products they need without getting confused or lost on the site.

User Research

User Interviews and Card Sorting were essential because they showed that pre-Covid, 63% of shoppers do their shopping online versus in-store. Mid-Covid, 88% of users say that they exclusively shop online. This highlights the importance that Push Skate Shop needs to have an updated website that is capable of providing customers with the same excellent in-person shopping experience.

Interviews

Card Sorting

Personas

After the research phase, two personas were created: Elliott and Grandpa Pete. Elliott is a core skateboarder who exclusively buys all of his gear from Push. On the other hand, Grandpa Pete is simply trying to buy his grandson his first skateboard for his 13th birthday.

Ideation & Sketches

Below are some early visual design sketches of Push’s new website. While some of these design ideas didn’t end up being in the final prototype, they were a helpful starting point and provided a general idea of 1) what the new website would ultimately look like and 2) provided a jumping off point for the global navigation of the website.

Wireframes

Designing the wireframes is where most of the inspiration for Push’s website came from. Through research and user feedback, the website needed to be as simple as possible while maintaining the “core” feeling that Push offers with their in-person experience. In order to help communicate the principle design layout of the new site, the wireframes are low-fidelity and grayscale was the primary color scale while images are simple boxes.

Navigational Menu

Through user research and feedback, Push's Navigational Menu was kept simple enough for skaters and non-skaters, like Grandpa Pete, to quickly navigate. To aid with informational hierarchy, a simple skateboard helps the user intuitively see what they are selecting.

User Flows

Elliott's User Flow
Grand Pa Pete's User Flow

High Fidelity - Desktop & Mobile Mockups

Next Steps

To continue servicing skaters and Asheville locals alike, Push Skate Shop is in of need for a website redesign. Next steps would include continuing user testing and creating more high-fidelity mockups so that Push can easily build out their own product pages while maintaining a clear information hierarchy.