Responsive Website Redesign:
Push Skate Shop
A new website redesigned for desktop & mobile platforms
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.
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
- Competitive & Comparative Analysis
- User Interviews
- Card Sorting
- 2 Personas
- Ideation and Sketches
- Low-Fidelity Wireframes
- High-Fidelity Mockups
- Design for mobile (Responsive)
- 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 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.
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.
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.
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.
Elliott's User Flow
Grand Pa Pete's User Flow
High Fidelity - Desktop & Mobile Mockups
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.