Redesigning a Cultural Heritage website

Dean Birkett
Jun 21, 2020 · 5 min read

Europeana provides access to over 50 million items from galleries, libraries, archives and museums around Europe. Europeana Professional was a legacy product which was not matching the expectations of the visitors, this led to 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

A comparison screenshot, showing the Europeana Professional website before and after the redesign.
The original Europeana Professional website, and the redesign (pre-2017)

Client: Europeana
Platform: Website
Role: Internal UX Lead
Date: 2014–2015

The objective

The original version of the Europeana Professional website 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.

Alongside this, finding content was proving to be tricky for the user base.

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 taking place with a content creator, on one of the proposed CMS’.
A usability test taking place with a content creator, on one of the proposed CMS’.
Running a Usability Test with a Content Creator

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”.

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.

A sitemap showing the pages, and the page types.
A sitemap showing the pages, and the page types.
Sitemap highlighting the structure of the site, and the types of content pages

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.

A spreadsheet showing the types of content, any notes, required length of text, etc.
A spreadsheet showing the types of content, any notes, required length of text, etc.
Defining the content blocks

Validating 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 to ensure that we were building the right thing, this time.

A wireframe of an overview page.
A wireframe of an overview page.
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 member page, highlighting how content links together.
A wireframe of a staff member page, highlighting how content links together.
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.

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.

A high fidelity mockup of an events page.
A high fidelity mockup of an events page.
A high fidelity mockup of an events page.
A high fidelity mockup of a blog page.
A high fidelity mockup of a blog page.
A high fidelity mockup of a blog 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.

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

Dean Birkett Design

Removing barriers to include more people, with design solutions that benefit all.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store