King Kog Bicycles Redesign

Designlab Capstone, February 2017

header-min.png

King Kog Bicycles is a local shop with locations in Brooklyn, NY and Oakland, CA. It is independently owned by Gina Marie Scardino. King Kog is a community center of east bay cyclists, where the employees are "like family" in this small, humble company with big dreams.

This is a capstone project for Designlab.

 
 

At a Glance

My Role: UX Designer (Student)
Project Date: Feb 1, 2017-Feb 15, 2017
Responsibilities: Research (initial and with users), information architecture, visual assets, rebranding, prototyping
Design Tools Used: Pen and paper, Sketch, InVision
Design Methods Used: Contextual inquiry; user interviews; personas; user flow; task flow; mood board

 
 

COntext of the Project

I worked on this as a student in Designlab's UX Academy, a bootcamp for those interested in all aspects of UX design.

The goals from the brief were to:

  • Redesign the site to have a smooth checkout flow and potentially a booking service
  • Ensure the brand is cohesive through all media channels

For me personally, it was an exercise in visual design; I'm hue blind, so it was especially challenging to work with colors.

 

 

Project Process

Empathise

RESEARCH

These days, I don’t ride my bicycle. I used to when I went to college at UC Davis, where there were more bikes than people. In order to understand the needs of a city cyclist, I had to make sure I spoke to many people who identified with this title. The full research plan can be found here.

 

FINDINGS

Some cyclists have a specific bike shop that they go to for parts or repairs; new cyclists go to a shop that fits their personality for new bikes.
All interviewees preferred going to the physical shop for excellent service, the knowledgeability of the staff, and seeing products in person.
5 of 6 interviewees didn't mind calling in for an appointment for service repairs, but would much rather do it online if it were available.

I don’t mind calling [for repairs], but booking online would be much more convenient.
— Carla, Interviewee
If I had to buy something online from them it would be something small, like parts. A bike that big and expensive is too much of an investment to buy online.
— The General Sentiment
It would be cool to see things like classes to teach yourself how to fix your bike.
— Josh, Interviewee

 


PERSONAS: UNDERSTANDING THE USERS

Out of 6 interviews, I saw three distinct user personas from the research findings. The people I interviewed were all heavily invested in their bicycles, and the types of people ranged from commute-only to triathlon athletes to people who bike out of pure aesthetic.

 Experts are serious about bicycle care and may know how to work on their own bikes; they are likely to purchase parts. Commuters need a reliable place to service their bicycles and would want to eventually learn. Hipsters need a place to service their bikes that also offers a place for them to shine in their community.

Experts are serious about bicycle care and may know how to work on their own bikes; they are likely to purchase parts. Commuters need a reliable place to service their bicycles and would want to eventually learn. Hipsters need a place to service their bikes that also offers a place for them to shine in their community.

After interviewing the cyclists, it was clear that the brief may not be addressing a problem that actually exists. All the participants would much rather go up to a brick and mortar shop to purchase bikes, but would be amenable to using the site to schedule an appointment. However, because they are more likely to be on-the-go when they need a tune-up, they were more likely to use the mobile web version if they didn’t just call. Because of this, I opted to design for a mobile web experience with respect to project time.

 

 

Define

For the first part of this project, students were expected to ensure that the website had a clear purchasing flow as well as a scheduler for maintenance. A large part of being able to define the problem was to first understand the space. I walked along Valencia Street in San Francisco to find local bike shops to see what services they offered. I also looked at other websites that sold bicycles in order to create a comprehensive competitive analysis.

competitiveanalysis.png

The brief mentioned that the owners were very keen on community. I got the sense that it was more than just turning a profit (though it was necessary to keep the shop open), and going to the local bike shops gave me a similar feeling that this was a place for people who saw themselves as bicyclists. These cyclists recognise that this is a lifestyle choice, and are often proud of it. With this in mind, the business goals were drafted with the intention of prioritising features.
 

 

 

Ideate

In this project, I made the sitemap before the product requirements per Designlab’s course structure, which was jarring for me. In later projects, I switched the order as writing out what is necessary makes it easier for me to visualize what should be on the site.

sitemap.png


USER FLOWS

This project required accessibility to these features:

  • Booking a service appointment
  • Check product availability
  • Checkout process
  • Add a class/event to Google calendars

Again, the research with user interviews showed that cyclists didn't care much for the purchase flow. I operated under the assumption that a stakeholder would still need to see this flow, so it was added, albeit prioritised below booking a service appointment. These tasks could be accomplished by the three user flows below.

userflow-appt.png


LOW-FIDELITY WIREFRAMES

My mentor had me draft wireframes for the important parts of the sitemap, which helped visualize the final product. For each page I was encouraged to think about which elements were actually necessary.

sitemap-wireframes.png
 

 

Prototype

This is the barebones prototype, without copy. It was interesting to see how this would test, and it became clear that copy makes an enormous difference in how people receive your prototypes. Here is the link to the prototype.


FINDINGS

The prototype was tested with 3 participants.

affinity-map.png

Changes were made for the high-fidelity wireframes in regards to the failures.

hifiwireframes.png
 

 

Visual Design

The main focus of this project was to get a better feel for visual design and rebranding. This is a skill set I wish to improve, so a bulk of my time was used to carefully evaluate color sets, font choices, and the logo to rebuild a cohesive brand. A mood board was used to get a feel for what King Kog Bicycles symbolised.

moodboard.png


LOGO DESIGN PROCESS

logodesign.jpg

 


BRAND STYLE TILE

The brand style tile was created in regards to the feelings evoked by King Kog: urban, real people, a bit on the artsy side, and community-driven.

styletile.png
 

 

Learnings

Visual design is a skill that I will continue to work on...probably for the rest of my life. I have a healthy respect for brand teams, because it takes more than just empathy to understand what a brand can represent. A good brand fosters trust and a sense of pride, and it certainly takes more than just two weeks to come up with one that exudes those feelings.