2016

Client British Film Institute
Agency Ostmodern 
Role Senior Designer (UI and interaction design)

 

Britain on Film reveals hidden histories and forgotten stories of people and places from the BFI National Archive and the UK’s other national and regional film and TV archives.

The team at Ostmodern were tasked to design and build a rich and immersive experience which would enable people to uncover 1000's of beautifully preserved films.   

EXPERIENCE DESIGN

Communicating the concept of using a map to unearth video content was no easy task. Every element of the design and each interaction had to help guide the user through the experience. Both the landing screen and the "Try these..." options gave users a quick option to dive straight into the experience, whilst the UI on the right, offers several clear ways to find content via location, decade and subject.  

Refined and polished transitions offer the user a helping hand as they interact and move around the interface, design ideas like increasing the size of the pins depending on the amount of content inside all helped contribute to delivering a flawless experience. 

Visually the map styling and UI had to align with the BFI brand. Using snazzy maps I styled the map to both reflect the historical nature of the content and compliment the BFI colour palette. Bold iconography and smart typography help further refine and execute the final look and feel. 

BOF_maps1BOF_maps1

A fun and challenging project that spanned UX, interaction and visual design. Britain on Film has been well received by the BFI's customers and BFI board members, even winning praise from Jonathan Ross! Go ahead, check it out for yourself, here.

BoF_landingBoF_landing
[unex_ce_button id="content_go681kozm,column_content_ckpikb9sb" 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/olympic-channel/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Prev[/ce_button]
[unex_ce_button id="content_go681kozm,column_content_n5p93upeh" 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://www.philipreadman.com" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Home[/ce_button]
[unex_ce_button id="content_go681kozm,column_content_fq4ygddtv" 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/zappos/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next[/ce_button]