Imperial College

We have delivered a number of projects working closely with the college’s Education Technology (Ed-Tech) and marketing teams. We assist by providing strategic recommendations for platform design incorporating user segmentation and product positioning. Our core skills involve meshing the world of brand and product strategy with tech platform delivery.

The strategy and design of “The Hub” HTML5 learning application

The Imperial College Business School uses a ‘hub’ to communicate to their students about course materials, to share discussions and host online lectures. Instead of walking home with a pile of printed course materials, the students receive iPads at the start of their course – Along with an app shortcut for the Hub. The Hub needed to be designed for a multiplatform environment covering Ipads, smartphones and desktops. Our remit extended to UX strategy and design, user interface design, responsive HTML5 design and providing code, animation and style guidelines for the development engineers.

We worked with the client to establish a responsive HTML5 framework which was easy to use and adjusted as much as possible to the viewer’s choice of format. The Hub app is not only used by the students attending courses, but also from key staff and programme directors. As interactivity is a key part of any user experience we began with the iPad version and gracefully restricted the functionality to suit a smaller smartphone format. We chose a high contrast colour palette, which ensured great legibility. The entire interface was underpinned by black to create a slick and sharp feel. We used tonally restricted imagery and large app like padded icons to ensure a really usable and playful feel.

Along with the mobile platforms we developed the design for a full set of desktop PC interface style sheets, whereby the focus points are reduced making the design less app like, and more akin to the typical user experience of viewing a large amount of content in one window. The interface materials and subsequent guidelines were then handed over to the client to be created in the WordPress CMS system. The Hub app has exceeded all expectations with stunning results. The students and staff can be seen using the application in all formats across the college. In the first month after launch, The Hub received 90,000 hits from the approximate 700 users involved, a truly staggering uptake.

The design and build of the Imperial College Business School website

The Business School’s existing site was outdated, hard to navigate and members found generating content difficult. Furthermore, the Business School wanted to be recognized as a global brand. The site’s existing format gave no indication that it was distinct from Imperial College. The dual navigation system for Imperial College and the Business School featured the same terms, meaning that there was often an overlap in content. This made the site confusing. Our solution was to introduce a link that takes you back to the original Imperial site, essentially separating it from the master brand.

To increase accessibility, we also introduced breadcrumbs and made the accessibility policy meet the W3C standard for visually impaired users. We also changed system fonts to web fonts, which are in line with Imperial College’s corporate guidelines. As the Business School struggled to maintain and generate content, we switched from Oracle CMS to WordPress. Easy to maintain, WordPress allows the Business School to author content more effectively.

The site is now a highly responsive and includes a suite of interactive elements, featuring accordion tabs, sliders, pull-out quotes and galleries. The key pages are exciting and interactive, regardless of where they sit in the site’s navigation. We launched the site to work alongside a series of comms for the Business School. This clean and bright look and feel reflects the institution’s dynamic and open ethos. Streamlining data into one efficient administrative process and reducing 1500 pages to 800 has enabled highly effective navigation.