{"id":72,"date":"2015-01-15T04:47:06","date_gmt":"2015-01-15T04:47:06","guid":{"rendered":"http:\/\/www.johnfreeborn.com\/portfolio\/?post_type=project&p=72"},"modified":"2018-03-25T05:10:29","modified_gmt":"2018-03-25T05:10:29","slug":"specialized-2014-s-works-microsite","status":"publish","type":"project","link":"https:\/\/www.johnfreeborn.com\/portfolio\/project\/specialized-2014-s-works-microsite\/","title":{"rendered":"Specialized Bicycle: 2014 S-Works Microsite"},"content":{"rendered":"

[et_pb_section bb_built=”1″][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_post_title title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”off” featured_image=”off” featured_placement=”below” parallax_effect=”on” parallax_method=”off” text_orientation=”left” text_color=”dark” text_background=”off” text_bg_color=”rgba(255,255,255,0.9)” module_bg_color=”rgba(255,255,255,0)” title_all_caps=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” parallax=”on” background_color=”rgba(255,255,255,0)” _builder_version=”3.0.106″ \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_image show_in_lightbox=”off” url_new_window=”off” animation=”fade_in” sticky=”on” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-hero.jpg” animation_style=”fade” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”center” show_bottom_space=”off” _builder_version=”3.0.106″ \/][\/et_pb_column][\/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_2″][et_pb_text background_layout=”light” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.0.106″]<\/p>\n

Project Overview<\/strong> S-Works is the ultimate in cycling. It\u2019s developed, tested and verified with the sport\u2019s elite athletes in the harshest conditions. The S-Works brand needed a major update and re-statement of why it was important. This project began as a print catalog\/brand book. My job was to take the spirit of that book and bring it to life within Specialized.com<\/a>.<\/p>\n

Visit Specialized.com<\/a><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n

Problem\/Solution<\/strong><\/p>\n

The ask was fairly straight forward\u2013get 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\u2019t 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.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_divider color=”#aaaaaa” show_divider=”on” divider_style=”solid” divider_position=”top” hide_on_mobile=”on” disabled_on=”on|on|off” \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-wire-v1.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][et_pb_column type=”1_2″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n

 <\/p>\n

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?<\/p>\n

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.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”1_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-home-v2.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][et_pb_column type=”1_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-home-v3.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][et_pb_column type=”1_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-home-v7.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][et_pb_column type=”1_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-product-v9.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_divider color=”#aaaaaa” show_divider=”on” divider_style=”solid” divider_position=”top” hide_on_mobile=”on” disabled_on=”on|on|off” \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”1_4″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n

This project involved a large internal team at Specialized\u2013this was not a solo effort. When a team pulls together from beginning to end and they reinforce each member’s strengths really great work can happen.<\/p>\n

I\u2019m happy to say this project was recognized by How Magazine<\/a> for a 2014 In-House Award of Merit in the Sports category.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”3_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/specialized-s-works-pages.jpg” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_image src=”http:\/\/www.johnfreeborn.com\/portfolio\/wp-content\/uploads\/2015\/01\/S-Works-2014-how-detail.jpg” show_in_lightbox=”off” url_new_window=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” \/][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div> Project Overview S-Works is the ultimate in cycling. It\u2019s developed, tested and verified with the sport\u2019s elite athletes in the harshest conditions. The S-Works brand needed a major update and re-statement of why it was important. This project began as a print catalog\/brand book. My job was to take the spirit of that book […]<\/p>\n","protected":false},"author":1,"featured_media":114,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[32,14,13,4],"project_tag":[8,19,18,10,20],"class_list":["post-72","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-homepage","project_category-ui","project_category-ux","project_category-web","project_tag-graphic-design","project_tag-ui","project_tag-ux","project_tag-web-deisgn","project_tag-wireframes"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":5,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project\/72\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project\/72\/revisions\/78"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/media\/114"}],"wp:attachment":[{"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project_category?post=72"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/www.johnfreeborn.com\/portfolio\/wp-json\/wp\/v2\/project_tag?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}