Skip to content

Responsive UX design for The Institute of Cancer Research

I helped Bostock & Pollitt redevelop the user experience for The Institute of Cancer Research's website.

The ICR responsive website on desktop, tablet and mobile

Overview

The Institute of Cancer Research is one of the world’s most influential cancer research institutes.

To bring the organisation onto a level playing field with other organisations within their sector the ICR needed to update both the look and feel of their site as well as the structure.

Solution

I helped  Bostock and Pollitt with developing the user experience of the existing website. After a thorough survey of the competition and the gathering of requirements from the client, I was drafted in to develop the site architecture and a set of wireframes.

Like many of the projects I’ve worked on over the past few years there was a responsive requirement for the website. At the bare minimum the client wanted the site to work across three breakpoints (desktop, tablet and mobile).

Instead of developing three versions of every page and inevitably enduring a painful round of feedback requiring multiple amends, I proposed to Bostock and Pollitt that we develop an HTML prototype.

The prototype would be used to define the placement of content across key page templates. Once the client had confirmed a basic page structure, the fidelity of each page would be developed to create a more realistic representation of the final site.

The client also wanted to conduct in-house user testing to ensure both the structure and functionality of the site met with the approval of its user base.

I hooked the HTML prototype up to WordPress and populated it with site structure from the sitemap. This enabled the client not only to easily test both navigation, in-page sign posting and various template layouts but for me to quickly incorporate changes into the next version of the prototype.

Sitemap showing key content areas
Defining the site architecture was a challenge not only because of the volume of content but due to its complex scientific nature.
Multi-device view of ICR prototype
Desktop, tablet and mobile views of the responsive HTML prototype.
Super dropdown menu view in HTML prototype
HTML prototype: Desktop view of the homepage template.
Tablet and mobile view of our research screen
HTML prototype: Tablet and mobile views of the Research section.
Mobile view of blog and news article screens
HTML prototype: Mobile view showing the blog listing and article templates.
Mobile view of The ICR responsive website
Live website: View of the collapsed and expanded off canvas navigation.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.