King Kog Bicycles Redesign
Designlab Capstone, February 2017
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The prototype was tested with 3 participants.
Changes were made for the high-fidelity wireframes in regards to the failures.
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.
LOGO DESIGN PROCESS
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.
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.