Background

King Kog is a small locally-owned bicycle shop in Brooklyn. Since opening in 2005 as an accessories shop, they have expanded their inventory and services as well as opened an additional store in Oakland, CA. The goal of the project was to redesign their website and help them rebrand to reflect their expansion and to attract and retain customers through their website. This project was part of the Designlab UX design program.

CHALLENGES

The current logo is not easily scalable and the color palette could use a pop of color. The current site shows a only a handful of the products they sell, navigating to products is done through one navigation bar of the product category names which don't seem to be in any particular order, and there is no way to search/filter/sort products. Because of the expansion of their company, King Kog was also open to adding new features and making other modifications to their business model and website that would help retain customers and attract new ones.

Research

I performed competitive analysis to look at the websites of similarly sized bicycle shops that owned shops in one to two locations. I also surveyed a range of cyclists from recreational to professional.

I found that most cyclists surveyed do not use bicycle shops' websites because they don't provide enough information about the shop or services they need. I also saw that customers are loyal to shops that provide trustworthy, knowledgeable, and quick service. None of the competitors we analyzed provided a way to book appointments online yet customers mentioned wanting this service, so we decided to prioritize that feature for King Kog to set them apart from their competitors.

PERSONAS

The following personas were created. One represents the recreational cyclist group that visits bike shops occasionally for a repair or a new bike. The other represents the more serious cyclist who is more dependent on their bike and visit bike shops more often.

Interaction Design

Based on the research findings, I decided to redesign King Kog's website to focus on inventory, services and repairs, and a blog where events, sales, and tips/advice can be displayed. These features would give the customer more information and more valuable information prior to visiting the store in-person. Having a blog also shows that King Kog is invested in the cycling community. I also added an email newsletter sign up call-to-action to help retain customers and keep them informed of events, sales, and other blog posts.

Another feature that was low priority and not included in this version was local drop-off and pick-up. Many of the competitors provided this service, and customers mentioned the convenience of this service. King Kog could look into adding this service in the future.

SITE MAP

The site map shows the reorganization of the site. The current Locations page is being turned into an About page that contains company information so that users who visit the site can get to know the employees and company history. The current Repairs page which just lists the phone number and some basic information about repairs will be overhauled to include a booking service.

sitemap

WIREFRAMES

I started with sketches of the mobile and desktop wireframes focusing on the appointment booking portion followed by a redesign of the product pages, landing page, and about/locations page. One of my main goals was to make the appointment booking easy and accessible so that users can see on the landing page that King Kog offers this service, and that once the user decides to book an appointment that it's easy to do so. I also wanted to make the status of where the user is in the booking process visible so that they know they only have X steps left.

USABILITY TESTS

I ran two usability tests on Usability Hub with the desktop wireframes and one in-person test with the mobile wireframes. I found that users clicked where expected when tasked with finding more information about repairing their bike. However, when tasked with finding what time the shop opens, users clicked on Locations the most followed by About, Contact, and Services & Repairs. In the final designs, I added the hours, location, and phone number to the About and Contact pages as well as the footer. I also added the hours, location, and phone number of the shop you booked with on the confirmation page after scheduling an appointment.

The in-person usability test revealed confusion regarding the dropdown menu on the Services & Repairs screen in the mobile designs. When the user was tasked with booking an appointment, he clicked on the pricing information rather than selecting "Book an Appointment" in the dropdown menu. I realized that I was actually hiding the "Book an Appointment" option when I had wanted to make it as accessible as possible. So in the final designs, I included a button in the pricing section that takes you directly to the booking section. I also modified the dropdown menu in the mobile design to be a navigation bar so that all options are clearly displayed.

Visual Design

INSPIRATION

I created a moodboard of images from Dribbble and Pinterest that I felt exuded what King Kog wanted to highlight about their brand: simplicity, quality, and trustworthiness.

moodboard

STYLE TILE

The final style shows the logo, color, type, buttons, and navigation design I went with for the high fidelity mockups. The logo can be scaled easily. The color palette consists of a mild, classy light shade of oxford blue and a mild yellow that I think fit the brand well. I used the colors sparsely so as to add a bit of life but retain the simplicity of the black and white look of the current site. I chose to go with a flat design because it's classy and simple and with King Kog being located in two large cities/tech hubs, going with a trendy flat design was appropriate.

styletile
styletile
styletile

Conclusion

In the final designs, I implemented the changes decided upon based on the usability test results and added in the logo, color, and type choices. Below is a video of scrolling through the mobile home page design.

mobilegif