Research Plan

A good move to be organised in this project was to create a research plan with timeline so that I could focus on each important step at a time.

Some of the outstanding questions were these:

• Customers are frustrated that they have to call someone up and book an appointment for repairs and maintenance, could they do this online?
• How can the shop engage with new customers and turn them into repeat customers?
• Would be great to be able to invite people to shop events, would an event calendar be a good idea? Could this help with marketing and outreach?

Competitive Analysis

To understand what features and services needed more focus and improvement I did a competitive analysis. I decided to check the competition for the Brooklyn store and limited the research to 10 bike shops within a 3 mile radius from King Kog’s location to answer the following questions.

• Do our competitors have an online shop?
• Do they have an online booking feature for repairs and services on their site?
• Do they have an event calendar?
• Do they host workshops?

User Surveys + Interviews

Once I gathered insights on our competitors I wanted to get a better understanding of our target audience so I conducted User Surveys and in person User Interviews. Those helped a lot in creating our first Persona.

Persona

I needed a persona so I could focus on a manageable and memorable cast of character that would allow me to design for the bigger picture. This persona allowed me to avoid considering “personal preference” when coming up with solutions and helped me to understand our users attitudes, motivations, goals and pain points.

Research Findings

From my research findings, I believe there’s a great potential for King Kog to outperform its competitors and it can be done by:

1. Redesign their online shop to showcase accessories and bikes with a particular focus on product specs and pictures.
2. Add two key features to their website (event calendar and online booking)
3. Engage with their audience and take advantage of the knowledge of the semi-professional bike racers that work there as mechanics (workshops).

Site Architecture

Once I defined all the requirements for the redesign, I created a site map, which helped me focusing on the key design screens and overall architecture of the website.

User Flows

While the sitemap helps with the structure of the website, user flows are very useful when it comes to focusing on a specific task the user needs to do when using the features we built. In this case I created a user flow for the checkout process.

Wireframes

With the sitemap and user flows at hand, I started doing some rough wireframe sketches of the main pages of the website and then proceeded in making a digital version in Sketch. Here are a few examples:

Desktop

Tablet

Mobile

Prototype

After completing the wireframes I created a prototype and started the user testing. Some of the testings were taken in person where I had a better understanding of what the user was thinking and feeling as I asked them to share their thoughts with me. Some testings were taken remotely via Skype and Invision Liveshare. After the testing I did the first cycle of iterations.

Branding

One of the main goals of this project was for the brand message to be conveyed as more professional while remaining loyal to its honest and down to earth roots. I kept that in mind when I created the logo and style tile for the new King Kog website.

Final Mockups

I created the final design mockups in Sketch. Here are some key screens:

Homepage

Book a repair

Shop page

Single product

If I had more time to work on this project I would’ve focused on improving the “book a repair” flow with more user testing and iterations. I would’ve also dedicated a few more hours to research and to interact with both cyclists and bike shop owners in the biking community to gain better insights on what’s the best way to intersect customer and business goals.