Knowledge-base website for Crohn's and Colitis UK

A knowledge-base of curated information around key issues that people with Crohn’s disease or ulcerative colitis face. The Companion website launched in February 2017.

Project Highlights

  • Creative thinking to develop strong concept
  • Sub-brand visual identity and name
  • Simple and intuitive knowledge based structure
  • Innovative API based tech to enable content distribution across multiple platforms if  required

Challenges

This project began with a concept of providing way for patients to navigate their way through the experience of having Crohn’s Disease or Colitis. Initially it was perceived as a linear journey but this approach wasn’t appropriate as living with either condition does not follow one pathway. People experience different challenges at different times and some issues may not ever be relevant.

It was always known that the project would form a separate website to the main organisation’s digital presence. A further challenge was to create a real differentiation between the two spaces and for the new patient website to not compete with content or visual identity with the main site.

As people looking for information and guidance could be in pain or experiencing emotional difficulties the website needed to be reassuring, friendly and trustworthy.

“I like your new "Crohn’s & Colitis Companion". The tiles are friendly and easy to use. I click on the page for drug and it gave me very useful information. It’s easy to find the information. Fantastic!! Please tell the designer and developer that they did a great job.”

Solution

We developed the idea of helping people find their way to the answers they need at a particular point into a knowledge-base concept.  The website would provide answers to real-life questions that people have in response to a situation or event they are currently experiencing.

The navigating experience was designed to follow a ‘hub and spoke’ model with information clustered around themes and topics with an easy route back to the starting point. The website places the individual at the centre of the experience with broad themes posed as questions, e.g. ‘I need help managing my symptoms’. Within each theme are a number of topics, e.g. ‘I want to find out about drug treatments’. Each topic has a series of associated questions and answers. Some answers are succinct and provide bite-sized pieces of information within a single page, others have links to external sources for more in-depth detail.

Structure & Navigation

We began by running a discovery workshop with key people at Crohn’s and Colitis UK and with the content agency, Lark. We worked together to develop the structure of the website into journeys through themes, topics and possible answers. Lark used the structure to create a realistic, first person questions with bite-sized answers and links for further reading.

Card based interface

We decided to use a ‘card based’ design pattern for the interface , this provided some clear benefits:

  1. It enables users to scan and digest the relevant information.

  2. Card designs have a strong visual element which we knew was important for the brand.

  3. The modular nature of cards also allowed for a future proof structure and new ways of aggregating information around themes.

  4. Card design is flexible and adaptable which works well for responsive design.

We designed a format for each card with different content types including video, audio and downloads. Each topic had an optional quote from a person with the conditions to reinforce the information and provide personal experiences.  

Brand Identity & Visual Design

The new website needed an identity which captured its essence as a safe space for practical advice. Working with the team at Crohn’s and Colitis UK and the content agency Lark we settled on the name ‘Companion’.

We started by creating design principles and designing concepts based on research and influencers.  We used the card design pattern to create strong visuals with bold iconography and a vivid colour palette. We added subtle animations to draw the eye and engage.

We extended the icon set that already existed, evolving the design and creating new icons for themes and topics where necessary. These icons can be used elsewhere across the brand identity.

Tech

We knew that whatever technology we used to build the Companion had to be invisible, there had to be no barrier between the user and the information.

As CCUK would be managing the content and had a well established CMS driven website built on ExpressionEngine (EE) we decided to use this as a content server. Using EE’s native categorisation and publishing tools we developed a content structure which was both easy to manage and extensible.

Rather than publish the content as web pages via EE we developed an API which gave us complete separation between content and presentation. Additionally serving the content via an API meant it could be made available to other third-party services thus widening the reach and impact of the work.

To provide the best possible user experience we opted to create the Companion’s frontend using Facebook’s React JavaScript framework. This provided an application-like feel with rapid loading and smooth transitions between screens.

“This website is fantastic! all of the questions I have swimming around in my head have been answered. It feels amazing to read and feel supported, Thank you”

Results

The Companion has been extremely well received by the Crohn’s and Colitis UK community.

  • Over 19k visits in 3 months

  • Very low 34% bounce rate

  • Average of 4 pages viewed per visit

  • Increasing growth month on month with 26% more visits, 30% more page views comparing February to June 2017

“Have just opened the app and found the article on travel insurance extremely helpful. I was only diagnosed a few months ago after an emergency hospital admission. I've had to cancel a holiday booked for March already as my travel insurance wouldn't cover me. The list of travel insurance companies was very very useful and will help me immensely for future trips.”