Redesigned King Kog Site

King Kog Bicycles Rebranding and Visual Design Experiment

Background

As part of my Designlab program, I was tasked to redesign the online presence of King Kog, a boutique bike services and retail shop with locations currently in Brooklyn, NY and Oakland, CA.

I tackled this project with a desire to focus on improving the company’s Branding and Visual Design elements.

High-Level Goals

The design brief I was given outlined the following high-level goals:

By 2020 King Kog plans to launch four new retail shops in Portland, LA, Houston, and Minneapolis. King Kog would like to shift its brand to feel more professional yet still remain honest and down to earth.

Original King Kog Logo

King Kog Branding and Logo Redesign

Branding and Logo Redesign Goals

While “friendly” was one of the words most commonly used by Yelp customers to describe King Kog, the current gorilla logo’s scowl, sharp teeth, and rough friction-creating shapes all did a poor job of reflecting that.

Does he look friendly to you?

I set out to establish a brand identity and accompanying logo that is more reflective of King Kog’s true identity.

Focusing In On King Kog’s Brand Definition

King Kog initially proposed a large set of words that it believed reflected its company:

DIY | BOUTIQUE | ECONOMICAL | HIP | ARTSY | FRIENDLY | HUMBLE

I wanted to narrow down these words to a smaller set, which would allow for greater focus in making design decisions. I also wanted to learn how King Kog’s current customers feel about the company and incorporate their feedback into the design.

I used a keyword analyzer on the company’s Yelp pages to analyze the words customers most commonly used to describe King Kog’s business.

Combining the most frequent sentiments from customers with King Kog’s desire for a new direction, the final set of words I settled upon to represent its brand were:

Friendly | Trustworthy | Quality | Local | Edgy

Sketching New Logo Concepts

My plan was two-fold:

  1. Sketch out some additional logo ideas that moved away from the gorilla concept.
  2. Compare these new ideas against several new variations of the original gorilla concept that incorporate more of our newly established five key brand qualities.
Although drawing isn’t my strong suit, I still always make it a point to sketch so I can ideate and explore a wide range of ideas.

After ideating through sketches, I decided to move forward in the process with mostly script versions of “King Kog.” I liked how the script fonts implied a sense of movement (bikes) and superiority (boutique), which both aligned well with the inherent features of a boutique bike store.

Compare & Contrast

Each of the gorilla concepts worked well to strongly emphasize a single emotion only, and left little room for ambiguity. I instead decided to use a script front option (Number 1, as pictured above). The script font gave off a strong sense of movement (which was great for a bicycle store) and also provided a bit more versatility in allowing us to incorporate several of the five new brand keywords.

Iterate, Refine, Iterate, Refine

After selecting the version that best exemplified the brand sentiments, I went through several hundred more iterations modifying the curvatures of each letter. This is how the final product turned out:

King Kog Website Redesign

Website Redesign Goals

With a new logo and branding guidelines complete, I turned my attention to King Kog’s website. My goals were:

  1. Redesign King Kog’s website to appear more modern and aligned with its new brand goals.
  2. Align King Kog’s website design with its strengths as a business.
Current King Kog Home Screen

Research

After researching competing boutique bike shops in the Brooklyn and Bay area, one thing became clear:

King Kog should differentiate based on its bike repair services.

  • Customers love King Kog. The Yelp reviews for both King Kog locations rave about the company’s great service. Specifically, customers think that King Kog’s service is friendly, fairly priced, and of top quality.
  • King Kog offers a fairly limited section of bike and apparel products, and doesn’t appear to have any sort of advantage over competing bike shops.

Style Tiles

I created three sets of style tiles, each expressing a different variation and emphasis on the five newly created brand keywords (friendly, trustworthy, quality, local, and edgy.)

The color palettes were inspired by other sites that I felt did a particularly good job of conveying that particular emotion.

The new logo had already established a sense of edginess and quality. Friendliness could be conveyed through copy. Therefore, style tile 2 was the best choice for fulfilling the remaining goals of conveying a sense of trustworthiness and locality.

Wireframing Key Screens

Next, I wireframed the key screens to get a general idea of the overall site architecture and individual page layouts.

Final Design

Homepage

The previous King Kog homepage immediately presented users with a catalog of its product offering.

In redesigning the homepage, I wanted to place a greater emphasis on 1) Pushing King Kog’s Services and 2) Showcasing positive reviews to demonstrate customer validation and approval.

The section that the user immediately sees (above the fold) drives home King Kog’s service offerings. The background image, initial page copy, and primary CTA button have all been redesigned to place emphasis on King Kog’s new service focused orientation.


Book an Appointment

On the appointment scheduling page, my focus was on simplicity.

Previously, customers had to call King Kog to book an appointment. Offering a method to do this online was completely new.

I designed the experience to fit on a single page. Customers can quickly and easily see all required information to book an appointment—making the process less intimidating than one with interactions across multiple pages.

The new design makes pricing transparent and clear. This will reduce the number of inquires and phone calls to King Kog asking questions about cost — freeing up staff to focus more on in-person customer service and repairs.


Shop

King Kog previously had 12 different product categories on its site, for a relatively small product catalog. I simplified the categories into four groups: Bikes, Gear, Accessories, and Apparel.

Users previously had to hover over each product to view the name and pricing information. This type of interaction is a frustrating experience for mobile users who want to quickly scan information without clicking into details.

Information and pricing was therefore moved to be immediately visible.


Locations

Users can easily navigate to their desired location and see all the relevant information for that business.

The address, phone number, and email are all clickable links— allowing users to easily search, call, or email King Kog without the need for copy and pasting.


About Us

The new About Us page encapsulates everything we set out to accomplish in this branding and redesign project. It shows King Kog’s journey from humble beginnings (local) while stressing a commitment to maintain excellence in service, especially during future expansions. The video shows the company’s smiling owners, conveying a friendly atmosphere.

The contrasting gradients in the middle of the page showcase modern design style trends, which in turns hints at King Kog’s quality as an organization. New UI patterns in the Contact Us section vary from other parts of site, demonstrate the company’s ability to be edgy while also still appearing trustworthy.

Demonstrating various emotional states through small subtleties in visual design was one of the most challenging aspects of this project, but it helped bring King Kog’s true identity to life in this redesign.