A simple scan of cascade's website revealed the following areas of focus when it came to their mission.

The existing visual system lacks coherence and consistency. The use of bright complementary colors makes it harder to navigate a content heavy website. The information architecture lacks hierarchy with no clear way of consuming information systematically.

The footer features all the possible links that exist on the website and clearly does not solve any purpose. The visual language doesn't speak to the mission of the organization — to inspire and transform society by bringing everyone together through bicycling.

The navigation between different pages is also inconsistent. For instance, the donation page is missing the top navigation bar which makes it impossible to navigate out of that page without using the browser back button.

Looking at other bicycling clubs’ websites, the bolder use of imagery, systematic navigation and clubbing of similar information makes these websites easier to navigate.

I improved the site’s structure by chunking similar information together and organizing the content on the homepage by importance. I added white space and let the images bleed to the margins to make the experience more immersive. I also introduced an accent ribbon which resembles a milestone to hold all the important information on the page to help users navigate with ease.

I used a standard 960 grid with 12 columns to layout the content for the web version. The column width is 60px and the gutter is 20px.

After a lot of sketching and narrowing down to three options including two emblems and a letterform, I decided to go with the letterform logo. I did an iconic logo design by including a wordmark with it.

I tried to play with the letter C by closing its loop further than usual and using the negative space of the letter B inside the C to make it an abstract representation of a wheel but at the same time reading as CBC (Cascade Bicycle Club). I broke down the C and B with a slanting line to add activity. The use of red color supplemented energy to the logo design.

Nunito sans makes for a readable font while being bold and modern. The well-balanced sans-serif typeface works very well at a variety of sizes giving a sharp and crisp feel when used in uppercase and soft and rounded feel which is ideal for reading, in lowercase text.

I went with a palette compromising of two shades of grey, a white and an accent red. The intention of the high contrast in the greys (cod grey and white sand) was to increase accessibility and simplicity while keeping it bold. The dark candy apple red adds activity and energy which grabs attention and drives action.

Cod Grey and Dark Candy Apple Red

Paper White and White Sand

Visual Design is hard. Especially when you’re required to work within constraints, are not allowed to use color/font/imagery and have to develop different parts of the system in isolation. This particular project required me to iterate and I had to keep going back to the initial stages to make things more appropriate and in sync with my with vision of the design language appropriate for Cascade.

With this project I also pushed my limits by coming up with more than one distinctly different options at each stage. This was definitely harder than I had anticipated but it made me realize the power of moodboards. I had never given them enough importance as elements of design. But every time I had to look for a distinct direction to work in, I always turned back to my initial moodboard to find new ideas and it surprises me now, how much variety a collage of images and words could help generate.

That's all folks! Thank you for reading.

PM