Imperial College Business School

The Brief

Imperial College Business School needed an online presence to reflect their World-renowned reputation; their old site was cluttered and provided a broken user-experience. Additionally, The Business School wanted to be their own global brand, rather than simply an extension of Imperial College.

Client
Imperial College

My Role
UI Design, UX Design

Year
2014

[unex_ce_button id="content_ijumkgl4e,column_content_0wll9an1y" button_text_color="#333333" button_font="bold" button_font_size="16px" button_width="auto" button_alignment="left" button_text_spacing="1.5px" button_bg_color="transparent" button_padding="11px 32px 11px 32px" button_border_width="3px" button_border_color="#333333" button_border_radius="6px" button_text_hover_color="#333333" button_text_spacing_hover="1.5px" button_bg_hover_color="transparent" button_border_hover_color="#082b51" button_link="http://wwwf.imperial.ac.uk/business-school/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VISIT THE SITE ➞[/ce_button]
9_Imperial9_Imperial

We worked on the site from the ground up—firstly looking at the site architecture, addressing any duplication of content and repositioning pages that felt out of place or disconnected. The look and feel was largely dictated by the brand guidelines in place for both Imperial College and their Business School. However, we had the opportunity to bring certain brand elements into the current digital age—such as the transition from FontFont’s Meta typeface, to the more refined digital equivalent—FiraSans.

Various page iterations and concepts were mocked up, exploring different ways to utilise the existing Imperial College brand assets. Concise page templates were then designed to accommodate the few hundred (previously 1500+!) pages the School needed.

One of the key areas we worked on was creating a consistent hierarchy to the page content—enforcing strict and suitably refined type styles. Not only does this add visual appeal to the sites pages, it also allows users to read through the content-driven nature of a Business School’s website in a faster and less-strenuous way. 

The use of interactive maps, pullout quotes, infographics, accordions and dropdowns helped add visual interest to previously very dull, text-heavy pages. We reworked accessibility issues and introduced a secondary navigation coupled with a breadcrumb trail to help the user know both where they currently sit in the site and how they can get quick access to other related pages.

3_Imperial3_Imperial
7_Imperial7_Imperial
4_Imperial4_Imperial
5_Imperial5_Imperial
6_Imperial6_Imperial
2_Imperial2_Imperial
1_Imperial1_Imperial

The Outcome

A fully responsive new website refresh for the World-renowned Business School of Imperial College London. A bold, confident and spacious site that represents the Business School’s philosophy. The site is lightweight and refined—we removed over 800 pages worth of duplicated or unnecessary content.

[unex_ce_button id="content_ioa4g3lit" button_text_color="#333333" button_font="bold" button_font_size="16px" button_width="auto" button_alignment="left" button_text_spacing="1.5px" button_bg_color="transparent" button_padding="11px 32px 11px 32px" button_border_width="3px" button_border_color="#333333" button_border_radius="6px" button_text_hover_color="#333333" button_text_spacing_hover="1.5px" button_bg_hover_color="transparent" button_border_hover_color="#082b51" button_link="http://wwwf.imperial.ac.uk/business-school/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT THE SITE ➞[/ce_button]