Specialized Bicycle: 2014 S-Works Microsite

Problem/Solution

The ask was fairly straight forward–get the awesome content from the book and take it to the web. The project was not so straight forward. There were harsh technical limitations, limited content that wasn’t created for the web, information architecture issues, UX considerations, navigation problems and on top of these, this project was envisioned as a template for future sub-brands and initiatives within the core site.

The project started with a content inventory and deep dive on the assets. It became apparently quickly that the website would have to do quite a few things that the book did not. How would users interact (or even find) with the standard product pages on the main site. How would the S-Works content differ and where would the dividing lines be drawn from the S-Works experience to the main site. How do you keep the emotional experience of the book alive online?

The other major problem to solve was how to navigate within the S-Works content while maintaining a consistent site navigation and clear structure. The first wireframes (left) show my initial concept for how this might work. A secondary sub-navigation that overlays the hero image. This was just one of many options attempted (see images below) and had to be proven out as the design and content became more defined.