Redesigning the Europeana Professional website

Redesigning the Europeana Professional website

Client

Europeana

Platform

Website

Role

Internal UX Lead

Date

2014 – 2015

Europeana provides access to over 50 million items from galleries, libraries, archives and museums around Europe. Europeana Professional was a legacy product which was in need of a full redesign.

Working with Nexum, a German UX agency. I was the internal UX lead for the project. I performed numerous tasks to ensure that the outcome was what was desired by the primary users of the website. Part of my work involved research, stakeholder interviews, card sorting, content mapping, creating a style guide, interaction design, and usability testing.

Visit Europeana Professional →

Europeana Professional's old website

The old website of Europeana Professional

Europeana Professional's redesigned website

The redesigned website of Europeana Professional

The objective

The first version of Europeana Professional was dated and problematic for both the content creators and the development team. The content management system was difficult to use and maintenance was proving to be tricky. 

The primary goals were to ensure that the content was findable by our current user base, the website was coherent and fitted within the new brand guidelines, and more people were able to work with the CMS thanks to the greater ease of use.

The process

As Europeana Professional was an established website there was a clear understanding of the users and their needs.

Partners and Data Providers need access to news, events, and technical documentation. There was a need for community and connectivity.

Staff need to be able to find files and documentation. Content creators need to be able to quickly and easy create and amend content, and the Design team and Management need the website to fit within the overarching Europeana brand.

There were secondary groups whose needs also needed to be factored in, such as members of the Press who have a need to know who to reach out to, be kept up to date with the latest happenings, and have access to high-resolution imagery, and job seekers who want to find what opportunities there are and to research the business further.

Breaking down the problems these groups have, there were three key things which I needed to uncover.

It needs to have a simple and easy to understand back-end for content creators.

It should be easy to navigate, with content located where the user groups would expect.

It has to be coherent, fitting within the Europeana brand guidelines. 

Finding the right CMS

The Project Manager researched lightweight CMS solutions and provided the rest of the team with a list of three possibilities. I then set about creating a test script, and some tasks for the participants to tackle, to help us uncover how easy or difficult the proposed CMS' were.

A Usability Test in process

Running a Usability Test on a candidate for the CMS.

Sourcing participants to test the CMS' was very simple, it was a case of speaking to the content creators and arranging a good time.

I chose people from various departments with different responsibilities, for instance, someone who would write blog entries, and someone who would add job opportunities to the website.

“I found it easy. I don't have the feeling it is complicated. It makes sense”.

“I found it easy. I don't have the feeling it is complicated. It makes sense”.

“I found it easy. I don't have the feeling it is complicated. It makes sense”.

The tests were wholly positive, with people who found the current CMS clunky and difficult to use expressing their delight at being able to add content themselves, and not ask other more technical colleagues to do that.

Validating the information architecture

To help uncover the information architecture I performed a number of tasks. A card sorting exercise helped to uncover the top level structure, and a sitemap helped to define what types of pages were needed, list pages, overview pages, and content pages. The sitemap also helped to define which content would be static and which content would be dynamically generated.

Europeana Professional card sorting exercise

Card sorting exercise, to help uncover the navigational structure

150309_europeana-pro-sitemap

Sitemap highlighting the structure of the website

Alongside this work, I started to map the content from the current website to ensure that everything was accounted for. I interviewed the stakeholders to find out who the page owners were, and who needed to be looped into any decisions that would affect that page or the content blocks within. I also started to define how content blocks were created, and the strategy behind how they all slotted together. This was to help both the design team and the developers to see how things would look in the front end, and how to put them together in the back end.

The content mapping spreadsheet

Defining content blocks.

Testing the design

With the structure defined, a round of testing and iterating took place. This required something more visual than a spreadsheet and a set of ideas and rules.

Early mockups were created to get an idea of the flow, and these mockups were once again validated in a round of usability tests. Although timely, with such a large project and a lot of voices to be heard I felt it necessary to spend time bulking out this prototype, which will be shared in the links section below.

A sample of an overview page, used to guide the visitor.

A wireframe of an overview page.

Where appropriate static screens were also created and shared with the development team to highlight how data can be repurposed throughout the site.

A wireframe of a staff page

A wireframe of a staff member page, highlighting how content links together.

And where necessary, interactive prototypes were used to communicate the desired outcome to the development team.

A short clip of an interactive prototype I created, to help communicate the message.

Increasing the fidelity

With the structure in place, it was time for the front-end developer to start adding the visual gloss to the wireframes. Communication was key here with the branding team, Product development, our external partners, and the front-end developer meeting for (remote) daily stand-ups, and taking lengthier discussions to Basecamp and Invision.

High fidelity mockup of a blog page

High fidelity mockup of a blog page

High fidelity mockup of an events page.

High fidelity mockup of an events page

Results

The European Professional website was launched in February 2015, and it received very positive feedback, not only on the aesthetics but the ease of use. The changes impacted the end of year satisfaction rating that we received from partners who visited the website, and internally it proved to be a great success with the content creators.

Links of interest from the case study:

Europeana Professional
Full interactive sitemap of the website
Prototype used to validate structure

Please note: Europeana Professional was updated in late 2017. I had no involvement in this project.

© 2017 Dean Birkett

Follow me on Twitter
Connect with me on LinkedIn