The Brief

ECRE hold a huge amount of data concerning asylum seekers and refugees. Quite often, when academics and NGOs requested access to this data, they would have to trawl through pdf reports that had been uploaded to the ECRE site. This was fine at first, but as time went on and ECRE collected more and more data it became increasingly difficult for users to find what they needed and comparing separate reports became very lengthy.

AIDA was formed as the project that would look after this data and present it in a more user-friendly way. ECRE also had a YouTube channel with videos about the effects of how refugees are treated in different European countries, so they wanted the new AIDA site to have present this media front and centre so that those accessing the site can see how important their work is.

The main objectives of the project were:

• Present a huge range of data in a user-friendly format;
• Allow users to compare countries’ data quickly and easily;
• Present the ECRE YouTube channel in an easy to browse and filter context;
• Tie in with the existing ECRE branding;
• Provide AIDA with its own news channel.

We began our discovery of the project by meeting with staff at the European Council on Refugees and Exiles. We then held a User Stories workshop to help determine how the range of information they have should be used and what users of their new website would most want. From this meeting we were able to create user personas so we knew exactly who we were building the site for and what they needed to be able to achieve.

ECRE hold a plethora of data spanning many countries and years, so we mapped out what would be the most useful information and how users would be able to access it online. We soon formulated a plan for a comparator tool that would allow users to compare data across countries in a user-friendly way.

Design

Using the existing ECRE branding, we needed to create an easy to navigate website that had the same personality as the parent ECRE website but that had its own distinctive message. The bright colour palette helped our designers to set the tone for the site and a theme was created based on the main colours. Readability and line-height were especially important as we knew there would be large sections of text.

The most extensive part of the design process was the comparator tool map. We were using Google Maps for the interface (more on that below) but wanted a map that was a bit more design-savvy and friendlier on the eye than the regular version. Using the Google Maps Style Wizard, we drew a more customised European map to display all of the data that ECRE have.

Build

The real showstopper of this project is the innovative Comparator tool. Our developers built a custom module that tied in with Google Maps to allow users to compare a huge range of asylum data in up to 3 countries at a time. The user interface was key to the success of the tool, so our designers created huge icons with country maps to make it easy for users of different nationalities to select the filters they want. The tool pulls data from AIDA’s extensive database in a matter of seconds, making for a satisfying and useful user experience.

With new research and data emerging each year, the administrators also needed to be able to add data easily. We built a system in the CMS where administrators can add countries and plot the points on the map manually, if necessary, and add new data whenever they need to.

AIDA also have a huge number of important reports that their target audience would want to access. On the ECRE site they were being lost and were difficult to find. On the new AIDA site, each country also has its own reports section that can be selected from the map on the homepage. Our dev team built a Table of Contents system that made it easy for users to navigate the huge amount of content and grouped documents together more effectively.

AIDA also had a library of videos highlighting the cause of asylum seekers in various countries on an existing YouTube channel that they felt it was important to share on their website. Our developers made media page for administrators to be able to embed the codes for each video from YouTube and tag each video with the relevant country so that users could access them from the homepage map.

Optimise

Because AIDA hold so much data, there needed to be an easy way for users to find the content they want. A tagging system was introduced so that administrators could add tags to every piece of content they added as well as making it very easy for users to filter for the content. Content can be tagged by relevant country - so they can be accessed via the homepage map - and by other relevant categories so that users can always find what they’re looking for.

Our developers felt that it was important that the Comparator tool was always in context, no matter what screen size the user has. For this reason they built the country selector to be responsive, so it moves down the screen as the user scrolls. The information is always in context and works on any desktop screen, particularly important when the website is being accessed in a range of different countries.

Finally, our developers used Solar to develop a comprehensive free text search system. The system uses ‘fuzzy search’ to find partial matches to words so that users that have English as an additional language will be able to find the content they require, even if they make a spelling mistake.

Evolve

The AIDA website hasn’t had it’s official launch yet, with a party at ECRE’s headquarters due to unveil all of its features and functionality later this autumn.

12,000 views pre-launch is a staggering number and testament to the fantastic user experience of the website. User feedback so far, particularly in the academic sphere, has been overwhelming and we’re looking forward to working further with AIDA to develop the site in the future.