FutureLearn

FutureLearn is a massive open online course (MOOC) platform founded in December 2012 as a company majority owned by the Open University. As of March 2017, it has 117 university partners and many non-university partners including the British Museum, the British Council, the British Library, the European Space Agency, the British Medical Journal (BMJ) and the National Film and Television School.

Categories case study
At the time, there were over 140 courses on FutureLearn. We used three rounds of card sort research with 120 learners using an online tool, ConceptCodify. In each of the three rounds, a group of respondents were presented with a set of digital cards with course titles written on them and asked to sort them into categories. The results, especially in the first round, were extremely diverse. Below is a dendrogram, which highlights the diversity of responses. After the first round, we learnt that our course portfolio fell roughly into 12-14 categories (prior to the card sort we believed it was around eight). We also had standardised “working titles” for each group.
Designing category pages
Now we knew what the categories were, we had to find the right way to display them on the site. We already had a prosaic course page structure with navigation tabs. But simply adding the categories to the courses page wouldn’t work. During the weeks of sketching, wire-framing and prototyping, we tried out countless options that explored presenting categories as a list.
Visual design
In the end, we settled on a much more visual approach. It looked quite different to what we’d previously explored, but it felt much more like FutureLearn – bright, playful and inviting. This approach was typical of designing in a continuous delivery production environment.
Living pattern library
As well as designing across both the product and marketing teams, we started the "living" pattern library using the atomic design methodology to construct and classify UI elements and patterns. The library directly reflects the FutureLearn platform and uses the same underlying CSS and markup to display the elements and rules that make up the interface. You can view the evolving pattern library here.
Multiple runs
This design brief required us to display multiple course runs on course detail pages. It had three main objectives: display alternative start dates for courses which run multiple times in order to allow learners to select a preferred start date; provide subtle guidance to encourage learners to join a future course if the current one is already in progress; display all current and future start dates on a single page, rather than individual pages with multiple URLs for SEO optimisation. Download the user testing report PDF.