King Kog Bicycles Website Redesign

This blog post showcases my UX design process for redesign of a local, woman-owned small business, King Kog Bicycles. Below is a screen shot of the home page.

Screen shot of my redesign of King Kog’s homepage

I’ll walk you through how I arrived at designing the above home page and the user research that helped me arrive there.

Over the last 5 years based on increased demand they expanded their offerings to include retail sales of vintage, new and custom built bicycles. So King Kog’s previous site was in serious need of an upgrade based on those changes.

1. DISCOVERY PHASE

I conducted a discovery phase including a competitive analysis of local bike shops and small businesses in the niche cycling marketspace to gain industry insight, understand feature potential and identify key areas of focus for user research.

Feature Matrix

King Kog​ caters to a wide range of customers including commuter cyclists, sport-enthusiasts, professional and amateur bike racers. King Kog​ currently has two retail locations — one in downtown Oakland, CA and one in Brooklyn, NY. In addition to bike sales they offer maintenance services, repair work, custom design work, product and component sales and host many community events.

I researched three direct competitors of King Kog Bicycles and created a comparative grid of basic features.

King Kog Feature Matrix

Competitve Analysis

I compared four websites, including King Kog and three of it’s indirect competitors, to view features at-a-glance. I added a 5 star rating system to analyze user-friendliness.

King Kog Competitve Analysis of four websites

USER RESEARCH

I conducted user research to identify usage trends, priorities from the user’s perspective, knowledge gaps, and opportunities for design enhancements related to service offerings.

Cyclist Questionnaire

I sent a google form to recreational and professional cyclists. I asked them several questions about their online bike and component shopping habits. I also had them test the current King Kog site and compare it to some of King Kog’s direct competitor’s sites. The feedback I knew I would get was in regards to the absence of a search bar and better product categorization needed. The feedback that was most valuable to me is that cyclists would like to see a bio page, product review feature, and product description & prices.

An example of a couple of the questions I asked users to answer

Photo Journal

I asked three cyclists (who endearingly call themselves “hipsters” to send me pictures of special, fun, and everyday moments in their lives, particularly related to cycling and their bikes. Then I thought of questions to ask each of them based on the photos they sent me. When I met with them I asked them to describe the moments, how they felt about those moments. This helped me better understand the people who surround them, community dynamics, and the journey through how they use a website.

User Persona

I used the information I got from spending time with Jon, my hipster friend from Fort Collins, whose photo journal I posted in the last deliverable, to create a user persona. I created a fleshed out description of Jon’s motivations and goals.

King Kog User Persona

Target Audience

Having an idea of my target audience’s needs, contexts, and history helped ensure that I started my research by asking smart questions. I took some time to recall my days as a collegiate and Category 3 Colorado road racer. I also dabbled in mountain biking and triathlon a few years ago. So I re-immersed myself in the cycling culture by doing some meditation and journaling. As I was doing that, I had my pen/Post-its handy so I could jot down target audience members as they came to mind. I then read over the King Kog Bicycles brief to make sure I was on point with my target audience.

King Kog Target Audience

PRODUCT ROADMAP

I delivered a product roadmap outlining the proposed new website brand redesign including features and functionality with prioritized suggestions for immediate execution and later releases.

I worked within a four week deadline, so it was critical to have a timeline.

VISUAL COMPS

I created wireframes, visual comps and other design artifacts that described in detail the look and feel of the proposed redesign and new feature set.

King Kog User Flow

Below are my preliminary mobile wireframes, which helped me decide between two options for each page: a simpler layout or one that showed more products. I decided to draw these rather than design them on the computer as an exercise to force myself to focus on the process rather than the design, since I’m still in the research phase.

King Kog wireframes

DESIGN AND TEST

I designed key screens and asked professional and recreational cyclists to test my working prototype using Invision.

Prototype Using Invision

Check out my prototype and test it for yourself: https://invis.io/4HAMAROC9 by clicking on the blue hotspots.

Prototype testing through Invision: https://invis.io/4HAMAROC9

User Feedback

This video shows one of my users testing my King Kog mobile website. It was very helpful to get in-person feedback from recreational and professional cyclists!

Check out the video of a local cyclist testing my prototype: https://drive.google.com/file/d/0B0apzBCgL32eUGZoajU0ZHBXWmM/view?usp=sharing

Key Screens

I created and updated my key screens based on the feedback I received from my user testing.

Below are a couple of my key screens up-close.

King Kog homepage
King Kog product page

Thank you for checking out my redesign of the King Kog mobile site. It was a stretch to complete this project in four weeks, and it taught me how to manage my time and focus on the key elements that would improve the user’s experience with the site.

Like what you read? Give Jamie Davis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.