Seattle Cycle is enthusiast-led and steeped in community

Seattle Cycle has been a source for motorcycle knowledge over the last 35 years. Their social media engagement illustrates their passion for the Seattle motorcycle community, and their website currently highlights their history.

“This site is confusing and feels local - not in a good way.”

As a user bluntly stated, Seattle Cycle Center has a problem: their website doesn’t showcase the products at the same level as their competitors and the site feels unprofessional and outdated.

Compared to their competitors, Seattle Cycle was missing key features like a listed inventory and large product photos.

My design solution addressed the following:

1. Simplify Navigation

2. Integrate Competitive Features

3. Develop a Brand Ethos

1. Simplify Navigation

Twelve navigation tabs felt a little crowded so I conducted exercises with users to organize information in ways that made sense to them to inform the site’s information architecture.

Created a clear and familiar way for users to find what they need

Formalizing the card sorting activity yielded a site map with six navigation options. I’d then use this map to organize the wireframes and prototype to see how users interact with the navigation.

Beyond the navigation bar, it was important to design clear content headers and simple page layouts to aid in navigating the site for my persona, a 55+ motorcycle owner.

Then formalizing those sketches make it easier to play with different layouts and prioritize different aspects of the page.

2. Integrate Competitive Features

Seattle Cycle had no current inventory listed online for any of their products, unlike most of their competitors. I saw this as an opportunity to make the Seattle Cycle customer journey of finding what you need easier and faster. Interviewed users stated:

“I like to see what’s in stock before I go to the shop.”

An online inventory sets expectations for users and gives them an understanding of what they can and can’t find in store. I created a template for all inventory pages. A common template creates consistency across product sections and, subsequently, the site.

3. Develop a Brand Ethos

Creating mood boards helped me to develop a visual voice for Seattle Cycle. Common design elements emerged throughout the pieces that were later incorporated into the design of the website.

I researched motorcycle tradition and learned how to convey that through their brand

• A restrained color palette that incorporates original Seattle Cycle colors and high-contrast rules convey the brand’s values of tradition and technical precision.

• A typography investigation yielded a typeface that was founded on technological applications with a strong history of motoring, both of which are congruent with Seattle Cycle’s brand.

This was my first attempt at creating high-fidelity mockups, consequently I learned a lot on the visual design side:

• At the first visual pass, I really leaned into bold boxes to separate content. This made the website look like a wireframe, it was too simple and visually uninteresting.

  • After critiques, I made an effort to experiment with multiple design iterations. This was perhaps the most influential thing I learned. In all my subsequent work, it’s been imperative for me to have multiple design interpretations, and iterations on those interpretations to land on a final design that I’m proud of.

• I had originally used the same typeface throughout the entire website (in Eurostile)… YIKES. It was especially noticeable in small copy like the reviews.

  • To remedy this, I chose a more neutral body type with rounded shoulders and bowls. This body type is now easier to read and balances out the personality and rectangular shape of the headers in Eurostile.

• When designing the new logo, I had to individually kern the letters. Especially given that the logo is in uppercase. Before critiques, I didn’t notice the poor kerning, but after, I now see it everywhere!