Steve Le
King Kog Logo.png

KingKog

 
Intro KingKog.png

 

UX & UI / RESEARCH / DESIGN CONCEPT

PROJECT : KINGKOG  |  DATE : WINTER 2016-2017  |  CLIENT : DESIGN LAB

 

Overview

King Kog is a bicycle shop looking to expand into other cities across the nation. They currently cater to a wide range of cycling aficionados and employ staff that are highly passionate and knowledgeable in bicycles. However, the King Kog brand lacks a clear consumer goal in reflecting their humble roots and big aspirations. By conducting this research, this study will provide information on how each location conducts their business and whether cyclists are looking for specific or different things in their respective locations.

 

 

Challenges

The King Kog brand is a niche boutique shop coming from humble beginnings with big dreams. By 2020 they propose to launch four new retail shops in L.A, Portland, Houston and Minneapolis. The company website presence needs to reflect both their humble roots and big aspirations.

 

 

Methodology

Observations :  Visit multiple bicycle shops to understand the clientele and how staff interact with clients.

Interviews :  Conduct first-hand interviews to understand the needs and wants of potential

Surveys :  Send a survey out through social media to understand the needs and wants of cyclists.

 

 

Research Questions

1.     What type of cyclist is the user (Commuter, Amateur, Sports Enthusiast, Professional)?

2.     What does a cyclist find to be most important in their bike shopping experience, knowledge of staff or products?

3.     How important is it to have the ability to schedule a repair appointment on a bicycle shop's website?

4.     Where do cyclists go to get an opinion of what type(s) of accessories/parts to purchase?

5.     How do cyclists currently service their bicycle?

 

 

Persona

Based by interviews and survey I have narrow down to these two personas, With these young professionals whether its finding a way to commute or enjoying a nice scroll  I'm sure they will make usage of the product.

 

The Enthusiast

The Commuter 


 

Research Findings  |  Based from Interviews & Social Media

 

Customers ask friends or relatives for recommendation on bikes, and a prefer bike shop.

Competitive Prices/ Price Match Like to see bike in stock on website, before picking up in person.

Suggest to have a Bike Service Maintenance available online.

Reach out to Social Media for advice.

Bike Community Event is a plus!

 

 

Survey  |  Based from Interviews, & Social Media

 

How do you go about looking for a bicycle shop?

What is your price range for purchasing a bike?

 

Is it require to make an appointment online for repairs?

What's important to you when you go to a bike shop?

 

 

Sitemap

Putting a lot of thought into this sitemap, making sure every direction align with one another. More importantly making sure everything is clear and concise before I tackled down the next approach. 

 

KingKog_Sitemap (1).png
 

 

Wireframes

After all the research and feedbacks I got back, the intent is create something simple, clean, modern and yet intuitive for the users. Based from the interviews I received back majority requested to have schedule an appointment visible on the front page. Lastly, keeping the design balance steady and appealing, and yet not too busy.

 

 

 

Application Map

Instashop_Sitemap_1 (13).png
 

 

User Flow

 

 

Moodboard

These are few of the inspiration pictures that got me thinking about what would KingKog website would look like. Since the original site is based by the urban feel, with rough edges. My initial take is to keep the urban feel but at the same time brush up and make the website cleaner, and keep it modern and updated.

 
 Resource from:  Inspiration DE

Resource from: Inspiration DE

 Found on  Pinterest

Found on Pinterest

 Artwork by:  Sunrise Theme

Artwork by: Sunrise Theme

 Resource from:  The Coolist

Resource from: The Coolist

 Resource from:  InstaBicycle

Resource from: InstaBicycle

 

 

Responsive Web Design  |  Home Page 

Here's what the final layout looks like, to come up with this design it was based mainly by research, interview, survey, and going to the local store and ask questions and getting their input. For the colors I wanted to something bold that would mesh well with the urban bike shop, using an off white color to balance out the entire layout. 

 

Home.png

Product Page

Looking at the original site I feel the Product Page was lagging in design and info, in my attempt I want this page to look professional and informative as much as possible. I want the user to come this website feeling they got all the questions answer and ready to place an order.

 

Service Page

I believe this is the right approach, when you're offering service for bike repairs online. It needs to be well presented and clear for the users to understand what needs to be fix. 

 

Modal Windows

Utilize the Modal Window to its fullest potential when making an appointment. The goal for this approach is not having scramble where to book an appointment. Everything is in front of you and step by step process along the way.

 

 
 

 
 

Next Step

With the UI being completed, surely there's always room for refinement and improvement. At this point its going back to the stakeholders, let them entail and how it perform. Let them see it for themselves and take note what area needs to be brush up on.