K2 SKATES WEB DESIGN

Case Study

The phrase “back to the drawing board” exists for a reason. Sometimes in business, we’ve got to rethink things. That’s exactly where the web services team at K2 found themselves at the start of last year as a result of outdated and cumbersome software. Our team was tasked to rebuild all of our websites from the ground up. Although, the challenge seemed daunting, working as an agile team with designers, developers and managers we built a roadmap to success.

Outdated to Updated

OLD

NEW

The Problem

Previously, K2 used a blend of homegrown CMS to manage our websites. As a result, developers spent a lot of time hacking together solutions to get it to work the way they needed–and the marketing team relied completely on developers to make all content adjustments. Due to many limitations in business and developer features it was time for an overhaul.

My ROLE

I was given the opportunity to lead the design for three websites that incorporated marketing requests and user needs with deadline and budget demands. I applied user-centered design processes and methodologies by creating style guides, wireframes, mock-ups and prototypes. I prepared my designs for developers to take it to production.

The Solution

K2 migrated to a new for a more business- and developer-friendly headless CMS. I saw my designs fully executed in products and crafted user experiences that inspire brand loyalty. We now have a more enjoyable user experience and interaction that delivers customer satisfaction. Since production, K2 can create sites 75% faster, publish content 90% more quickly, and has boosted productivity by 50%.

New Design

New Design

Category Page
Main Menu
Newsletter Sign-Up

Category Page
Category Page: Sort By

Category Page: Filter By

The Process

This project was broken down into four parts to reach the final product. Each is listed below in order from left to right.

Style Guide

Starting off, I designed a template of logos, typography, forms, buttons and links to give a consistent look to the website.

Wireframes

Next, I created desktop and mobile wireframes to display the functional elements of the website. This helped to visualize task flows.

Mock-Ups

Building on the wireframes, I fleshed out the style of the website by adding images, logos, and typography specific to K2 Skates.

Prototypes

Finally, I imported the mock-ups to a prototyping software to present site interactions to developers.

Style Guide

Typography

Logos & Colors

Buttons & Forms

Wireframes

Desktop Wireframe

User flow from homepage to menu

Mobile Wireframe

User flow from homepage to menu

Mock-Ups

Desktop Mock-Ups

Mobile Mock-Ups

Leave a Reply