2015/16

Client The Olympic Committee
Agency Ostmodern 
Role Design Lead (brand, UI and interaction design)
 

The challenge was to create a cross platform product to showcase original olympic programming, live event streams and news stories. The project took around 1 year requiring a multi-disciplined team and included mulitple stakeholders.

My role as Design Lead was to translate and develop the Olympic Channel brand, design a coherent visual language and work collaboratively with the UX team and product owners to deliver the Olympic Channel experience across responsive web, iOS and Android platforms.   

The service ultimately sets out to “Uncover amazing stories, promote unknown athletes and inspire people using the olympic movement.”

VISUAL LANGUAGE

Brandboads are a great way to explore UI and visual ideas, agnostic of device or platform. The two iterations below take the same UI and assets and apply two very different treatments. 

Based on feedback from a brand focus group, we explored a grungy/urban route using rough edges and another route we called "split", which combines the Olympic rings with imagery and graphic elements. 

DESIGN SYSTEM

Once the foundation of the branding was set, the UX team and I began to look at the design system. Straight from the off we knew a modular or atomic design system was the way to go when producing multiple screens across three plaftforms. Working with the Olympic Broadcast team we studied their content and came up with a scalable system that allowed us to display content in a simple and clear way. 

The Grid and Cards examples below show a snippet of the work done on testing and communicating the design system. We extensively explored the possibilities of how meta data could be supported within the design system and how the modules could be arranged together to form beautiful layouts and ultimately a great experience for the user.  

OCS_SYSTEM1OCS_SYSTEM1

Working in 2 week sprints the UX team and I worked through designing each section of the product. Having a shared understanding of the user needs and business requirements at the start of each sprint meant that we could efficiently and effectively explore options around UI and brand whilst delivering high fidelity designs and detailed documentation.

The examples below show just some of the screens from the project including Features, Navigation, Events, Playback, Live Schedule and Athlete Profile.  

OCS_navsOCS_navs
OCS_playbackOCS_playback
OCS_DEVICES4OCS_DEVICES4
OCS_athleteOCS_athlete

The Olympic Channel was launched at the opening ceremony in Rio 2016 to millions of viewers world wide and continues to be a core part of the Olympic offering. 

Download the iOS app here or visit the website

[unex_ce_button id="content_odwsatjwq,column_content_jvj0whr5w" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="left" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/indeath/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Prev[/ce_button]
[unex_ce_button id="content_odwsatjwq,column_content_xnwgpakjf" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Home[/ce_button]
[unex_ce_button id="content_odwsatjwq,column_content_wsggpuo5p" button_text_color="#000000" button_font="light" button_font_size="13px" button_width="content_width" button_alignment="right" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="20px 60px 20px 60px" button_border_width="1px" button_border_color="#ebebeb" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#bd10e0" button_link="http://philipreadman.com/britain-on-film/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next[/ce_button]