Designing a top free educational app

Redesigning the Europeana Professional website

Client

Europeana

Platform

iOS app

Role

UX Lead

Date

2013

Europeana provides access to over 50 million items from galleries, libraries, archives and museums around Europe. Europeana wanted to enter the app market to promote the highest quality content that could be found on the website.

Working with Glimworm, an external app developer. I was the UX lead for the project. Part of my work involved implementing quick UI fixes, research, design, and usability testing, as well as liaising with the external developers throughout the various stages.

Download from the App Store →

Old version of the Open Culture app.

The marketing departments initial design

New version of the Open Culture app

The released Open Culture app

The objective

Due to an upcoming high profile event, Europeana’s directors and marketing department felt it was important to release an iPad app to show it’s true value to politicians working in the European Commission.

This app needed to be ready and available in the App Store in a matter of weeks.

An external development agency was sourced, and the marketing department created a mockup…

Mockup of the Open Culture app created by the marketing department.

Mockup of the App created internally by the marketing department

Needless to say, the Product Development team needed to jump in. Sometimes things don't always go to plan, toes are sometimes stepped on, and communication doesn't always go smoothly. The Product Development manager tasked me to focus on quick UI and usability fixes in the first instance, and research and improving the design was to follow for a later release.

Firefighting

With the time of the essence, other priorities and a deadline quickly approaching, I performed a heuristic review to highlight the usability issues with the proposal from marketing, and some quick simple UI tweaks.

The quickly released first version of the Open Culture App

The first release of the Open Culture App

A lot of the functionality was hidden from view, so one of the main improvements was to surface this. Giving quick access to 'Search Results' and 'Favourite items'.

Search also demanded that the user typed in a search and then tapped on a search button, this extra step was not required as 'Return' on the on-screen keyboard performed this action.

With regards to the visual design. In the marketing departments mockup, it was striking and combatted with the beautiful imagery that could be found within the app. I toned down the toolbar considerably.

This release was all about compromise, and many lessons were learned internally about what could have gone better.

“We're really pleased to launch the first ever Europeana app. It's only a small snapshot of the whole of Europeana's collections but small is beautiful”.

“We're really pleased to launch the first ever Europeana app. It's only a small snapshot of the whole of Europeana's collections but small is beautiful”.

“We're really pleased to launch the first ever Europeana app. It's only a small snapshot of the whole of Europeana's collections but small is beautiful”.

Jill Cousins, Director of Europeana 

Lessons learned

With more time available the focus shifted from firefighting to performing research, creating concepts, validating these designs, and turning the results into high fidelity mockups.

Europeana already had a good understanding of the target audience for the app, it was aimed at people defined as culture vultures and culture snackers.

  • Culture vultures: this group includes cultural heritage professionals, involved in learning, researching or the teaching of arts and humanities, ‘expert amateurs’ in some subject of cultural heritage, or people who are interested in culture and cultural heritage more than most;
  • Culture snackers: citizens who are not actively seeking for heritage content but like to see or interact with engaging items, for example in their social media platforms.

The business goal was to create an engaging experience for those who want to browse beautiful high-resolution imagery and to also add more value to the expert users who wanted to find out more about a particular item. It also needed to promote Europeana's mission and to increase brand awareness.

With an app already on the market research focussed on the product that had been delivered. What became clear was that people wanted more content, and they wanted it to be available for Android devices.

Both of these tasks were handled by colleagues, one of whom created specific search tasks to filter out high-resolution images from certain themes, and the developers looked into porting the upcoming new design into Android. 

Sketch of the landing screen, the search results screen, and an item page.

Sketch primarily showing the Search Results screen, and the user flow.

My sketches focussed initially on the three core screens within the app, with the item results screen, and the item screen, being the main screens that the end-user would be interested in, and the app landing screen, which was the most important to many internal stakeholders.

User research and business requirements meant that the app needed to allow the user to search for particular items within a certain category, and then filter them down until they had found a particular item of interest. The user can then favourite the item, share it, and download the CC0 image for repurposing.

Low-fidelity digital sketches were created to help with early validation.

Low fidelity mockup of a results page.

A wireframe for a results page.

Low fidelity mockup of an item page.

A wireframe of an item page.

Increasing the fidelity and usability testing

The apps selling point was the high-resolution imagery that was readily available, so the first screen I mocked up was this one.

The image sizes available were much larger than the iPad resolution, but I wanted to take full advantage of the full screen and not restrict the image in any way.

In the mockup, the image is shown at max-width with the image centred. The user can then choose to pinch to view it in its entirety or to zoom in further.

There is also quick access here to get extra information, favourite the item, add comments, and share the item on social media.

Open Culture App's item page.

High fidelity mockup of an item screen

Item page with menu open.

High fidelity mockup of the item screen with more information shown

The results page was to serve as an entry point to the item page, it also needed to allow the user to filter the content down further.

The results were shown in a grid with the ability to refine the search further. When tapping on this extra keywords could be entered, item types could be selected (such as a painting, drawing, sculpture), and other filters allowed for things such as selecting the language of the metadata, the country of the object, and the year of the object.

A results page

High fidelity mockup of a results screen

A list of results with the search filters shown.

High fidelity mockup of the results screen with filters shown

The next screen that I focussed on was the landing page of the app, the goal here was to raise brand awareness, allow the user to search for specific content (primarily for culture vultures), and to give browse entry points (primarily for culture snackers).

Open Culture App home screen.

The landing page of the Open Culture App.

A number of other screens were generated, such as the 'Help' screen, and the 'Options' area and these static screens were imported into Axure to generate a clickable prototype, which can be found in the links at the bottom of the page.

I performed usability tests with a number of people who worked for knowledge resources in the Koninklijke Bibliotheek, and external participants were sourced who fitted the culture snacker persona.

The results led us to make a few changes to the UI labels, but all in all the app was ready for release.

Results

Version 2.0 of the app was released in January 2014, and it quickly became one of the most downloaded free Educational apps in the App Store. It was warmly received not only by the users, but also the internal stakeholders, and the European Commission.

A smiling person using the Open Culture app, with another person's hand in the foreground looking at an item.

Some happy users!

“The response to Europeana Open Culture has been great. The app was downloaded thousands of times and was one of the top free educational apps. We’ve listened to the feedback from our first customers and added new content, new functionality and of course, made the app available for all Android and all Apple tablets”.

“The response to Europeana Open Culture has been great. The app was downloaded thousands of times and was one of the top free educational apps. We’ve listened to the feedback from our first customers and added new content, new functionality and of course, made the app available for all Android and all Apple tablets”.

“The response to Europeana Open Culture has been great. The app was downloaded thousands of times and was one of the top free educational apps. We’ve listened to the feedback from our first customers and added new content, new functionality and of course, made the app available for all Android and all Apple tablets”.

“The response to Europeana Open Culture has been great. The app was downloaded thousands of times and was one of the top free educational apps. We’ve listened to the feedback from our first customers and added new content, new functionality and of course, made the app available for all Android and all Apple tablets”.

Jill Cousins, Director of Europeana 

The retention rate was very high for a number of months, with 4800 sessions at launch, and around a steady 1,000 a year later, this was deemed a good return on investment since new content ceased to be added in early 2014. Active users went from 1,500 to a steady 600 in the same period.

Graph showing usage over time from version 1 release and version 2.

Graph showing active users from May 2013 through to February 2015.

© 2018 Dean Birkett

Follow me on Twitter
Connect with me on LinkedIn