King Kog Website Redesign

I was challenged to redesign their current website to include a variety of features to suit their growing business as well as strengthen their brand identity which has been diluted over various social media platforms. King Kog also had in mind to create a mobile site in the future so I was also asked to design the homepage of the mobile site.

The challenge

The goal of King Kog website redesign was to modernize the aesthetic, improve the user experience, attract and retain customers. The tricky part was that there wasn’t scope for a back-end rebuild, so we simply had to work with what was already there and almost skin the front end into something new. The design didn't  need to be responsive as there is not a mobile site.

Demonstrating various emotional states through small subtleties in visual design is one of the most challenging aspects of this project, but it will help bring King Kog’s true identity to life in this redesign.

The Process

I started off this project by sending out a questionnaire to learn about current bicyclists. I also completed a web audit to see the existing website. I took note of any areas of improvement and growth. This was followed by a competitor review. I looked at other bicycle shops to see how their websites were styled and what features they had.

From here I was able to draft up some very rough sketches of the website (above) for formatting . I wanted to figure out the new navigation for the website (image above) and how the different pages of the current website could be consolidated. 

Wireframes And prototypes

I created a prototype using Invision, I tested out the prototype on a few users to ensure that there were no major usability issues and then moved on to creating more detailed wireframes in Balsamiq, some of which can be seen above.

Branding

King Kog initially proposed a large set of words that it believed reflected its company: DIY | Boutique | Economical  | Artsy | Friendly | Humble

I wanted to narrow down these words to a smaller set, which would allow for greater focus in making design decisions. I also wanted to learn how King Kog’s current customers feel about the company and incorporate their feedback into the design. I used a keyword analyzer on the company’s Yelp pages to analyze the words customers most commonly used to describe King Kog’s business.

Combining the most frequent sentiments from customers with King Kog’s desire for a new direction, the final set of words I settled upon to represent its brand were: Friendly | Trustworthy | Quality | Local | Edgy

While “friendly” was one of the words most commonly used by Yelp customers to describe King Kog, the current gorilla logo’s scowl, sharp teeth, and rough friction-creating shapes all did a poor job of reflecting that.  To counteract that perception, I went for a bright color scheme for the logo and the website (logos above & style tile).  I also kept the notion of "edgy" with the choice of an angular typo.

Putting It All Together

After hours of experimenting with visuals in Photoshop, I was finally happy with the visual design aesthetic. It gives a real brand identity to King Kog while keeping its primary personality and  it will help to improve the user experience, attract and retain customers.