King Kog Header.png
King Kog Research Header.png
King Kog IxD Header.png
King Kog Visual Design Header.png
King Kog Final Design.png
King Kog Header.png

King Kog


A unique riding experience for all. No experience necessary.

SCROLL DOWN

King Kog


A unique riding experience for all. No experience necessary.

 
 
Client:  Designlab + King Kog

Project Type:  Website Redesign, Branding

Roles:  UX Researcher, Interaction Designer, UI Designer, Branding

 
 
King Kog, a local, woman-owned small business, is looking to redesign their website and update their branding. King Kog has two homes - first in Brooklyn (opened in 2005), and now in Oakland (opened in 2014).

Over the last 5 years based on increased demand they expanded their offerings to include retail sales of vintage, new and custom built bicycles as well as many services and products. In addition to bike sales they offer maintenance services, repair work, custom design work, product and component sales and host many community events.

 
King Kog isn’t sure how to implement changes based on consistent feedback from their customers. Do they need to consider an online appointment scheduler? Should the entire site be designed and hosted in one place? How will they continue to showcase uniqueness while maintaining a strong community relationship?
 

I wanted to redesign the brand and site to exemplify the qualities of the communities King Kog is a part of. While maintaining unique character, I wanted the site to reflect the lives of those who may be frequent King Kog visitors - commuters, bike enthusiasts, leisure riders. Convenience and efficiency drove every thought process behind this project while maintaining the feel of a local mom and pop shop - the place the people go to to hang out and learn or try something new.

King Kog Research Header.png

Research


Research


 
RESEARCH GOALS

Existing research shows that as King Kog's popularity grows, so do the demands of their customers. The research conducted was to validate the need for new features like appointment booking and a redesign of existing ones like online shopping.

KEY FINDINGS

 
RESEARCH CONDUCTED:     Survey
#RESPONSES RECEIVED:              35
AGE RANGE:                          25 to 45
PRIMARY USE:     Leisure, Commute
VALIDATIONS

  • FUNCTIONALITY:  Current riders are currently looking for better ways to shop online or inquire about in-store availability for parts or gear

  • DESIGN + BRANDING:  Website design does influence a rider’s decision in which shop to visit

  • ONLINE PRESENCE:  Most respondents researched bike shops via the internet because they needed a repair (14 responses) or a part (10 responses).

  • DETERMINING FACTORS:  Cost (25), time (20), and convenience (23) are the largest factors in deciding which store to visit

  • INTERESTING FIND:  While 29 respondents owned a bike, only 15 considered themselves bike enthusiasts

# of Bike Owners.png
 
# of Bike Enthusiasts.png

UX STRATEGY BLUEPRINT
King Kog IxD Header.png

Design + Interaction


Design + Interaction


THE CURRENT SITE

To see my thoughts and design goals for each page, click and hover over the image (desktop) or tap image then the small dot in bottom right corner of screen (mobile).
 
REDESIGN - VERSION #1
In this first iteration, I tried to incorporate ALL the features and changes King Kog wanted to highlight/create: branding, appointment booking, community events, etc.

What I learned: This was too much for a home page. I needed to break it down and figure out how to build a stronger brand image while showcasing all priority features and services.

Items and questions to consider for the next version:**

  • How can we reduce the number of actions the user has to perform (ex. scrolling) and show all the main features of the site?

  • How do we make this page feel less generic - less focus on e-commerce and more focus on branding?

  • Does appointment booking need to be accessible on the home page or can the user be directed to it?

 
REDESIGN - VERSION #2
 
The focus around this redesign was simplicity and accessibility. It features an image carousel that scrolls through images that spotlight key features of the site and brand.

The appointment booker has been added as a static footer so the user can book repair/service appointments from any page.
King Kog Visual Design Header.png

Visual Design Elements


Visual Design Elements


COLOR PALETTE
 

 
 
TYPOGRAPHY

 

Font - Geared Slab.png
 
 

 
 
UI ELEMENTS + ICONS

Buttons.png
 
 
 
King Kog Final Design.png

Final Design


Final Design


LANDING PAGE + OPTIONS
 

Home Page (1 of 4)

From the home page, the user is able to choose from the options we’ve deemed as most commonly used.

Locations (2 of 4)

Locations will appear as a pop-up over the active page so the user is able to continue what they were previously doing.

Sign Up and Sign In (3,4 of 4)

Similar to the locations feature, these will be pop-up overlays on whatever page the user is currently on.


SHOPPING + CHECKOUT

Shopping

  • Final Updates:  The View Products page has been updated with a better navigation experience. Info such as price and reviews are immediately available to the user. The Product Info page now features all images in a carousel so the user is not required to scroll down to see more images. The focus was to keep all product info at the same level so the user can make informed decisions.

  • New Features:  A Compare Products feature was designed to help shoppers compare items they're interested in side-by-side.
Checkout
  • Users are now given an integrated checkout experience and are no longer required to pay with PayPal (for those who may not already have an account>.

  • Users will have the option to review/edit their cart at any point of the checkout process.

LIST OF REPAIRS + SERVICES

Final Updates:  Lists of repairs and services now provide brief descriptions of available repairs and services along with pricing


NEW - APPOINTMENT BOOKING
 
Feedback + research showed that riders want a convenient way to book repair appointments on their own time.

This new appointment booking feature was also designed as a pop-up that lays over the user's active page (in case the user was also shopping online).

Users will be prompted to select the details of the desired service along with a preferred date and time. When a date is selected, all available times slots will activate for selection.

An account is required to book appointments so users have the flexibility to modify their own appointments at their conveneince.