Designlab: King Kog Redesign

BACKGROUND

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.

CHALLENGE

We want to redesign the site to have a smooth checkout flow and potentially a booking service, and to make sure 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.

 

DESIGN PROCESS

  • Empathize
  • Define
  • Ideate
  • Prototype + Test
  • Visual Design
  • Next Steps
 

BEFORE

 

AFTER

A redesign of the mobile web application, which was done over desktop based on user research

A redesign of the mobile web application, which was done over desktop based on user research


EMPATHIZE

I don't ride a bicycle that often anymore. 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.

METHODOLOGY

  • Observation
  • Contextual inquiry
  • Interviews

RESEARCH QUESTIONS

  • What kind of person looks for a bike shop? What is important to them? What do cyclists look for in a bike shop? What needs to be offered for them to be satisfied?
  • When do cyclists seek out a bike shop? What problems do they need to have solved?
  • Would an online shop be useful to them in addition to the local shop? Why or why not? What would the online shop need to carry?
  • Where do people usually get their bikes repaired and/or serviced? How would cyclists prefer to make an appointment? If an online appointment service existed, would a mobile feature be handy, or would they make the appointment from a desktop?
  • How do cyclists prefer to receive parts/products - in person or delivery?
  • Where do cyclists live? Are they generally close enough to the local shop, or are there more cyclists outside of Brooklyn and Oakland that want KKB products?

findings

  1. 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.
  2. All interviewees preferred going to the physical shop for excellent service, the knowledgeability of the staff, and seeing products in person.
  3. 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.

uNDERSTANDING THE USERS

user quotes

"I don't mind calling [for repairs], but booking online would be much more convenient." - Carla
"It would be cool to see things like classes to teach yourself how to fix your bike." - Josh
"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." - General sentiment of interviewees

DEFINE

00000971.png

personas

  • EXPERTS need a reliable place to get parts; if they don't know how to service their own bikes, they want to start learning. They also want to know more about races and community events.
  • COMMUTERS need a place with reliable, friendly, local service to help them maintain their bikes - and often want to learn how to service their own bikes. New commuters will want someone to walk them through the process of buying a new bike.
  • HIPSTERS need a place to service their bikes and will only go to local shops. The biking community can be important if the people share a love of vintage bikes.

competitive analysis

A comprehensive competitive analysis can be found here. The feature matrix below was used to organize the features in terms of difficulty and cost of implementing as an exercise in project management.

00000972.png

business goals

00000973.png

Ideate

In this project, I made the sitemap before the product requirements, 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 aspects:

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

These tasks could be accomplished by the three user flows below.

Wireframes

My mentor had me draft wireframes for the important parts of the sitemap, which helped visualize the final product.

Sitemap Wireframes.png

Prototype+test

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.

Affinity Map

These are the findings after testing the prototype.


Visual Design

Logo Design Process

Design Process

It was difficult to study color. I looked to Pinterest to create a mood board for the feeling I was going for with King Kog, which was something like a teal and pink 80s jacket.

capstone-1-process-deliverables-by-robbin-arcega.png

Brand Style Tile

High Fidelity Mockups

00000810.png

Next Steps

  • Build a new prototype with high fidelity mock-ups
  • Test the prototype to get more feedback to improve the design, flow, etc.
  • Make changes based on new findings; repeat the process during a new sprint