Naturalis is the online knowledge base for students who wants to discover more about nature.

Organisation
SchaapOntwerpers
The case
Category
Design / UX
Client
Naturalis Biodiversity Center
Summary
Naturalis is the place for everyone who wants to discover more about nature. In order to meet the strategic (online) goals in the coming years, a digital knowledge base has been developed. The online knowledge base Natuurwijzer, is the digital online solution for children and educational institutions to discover nature. The website was created by SchaapOntwerpers and LimoenGroen.
Project description
Reason

Naturalis was looking for a way to pass on knowledge to children outside the museum's doors. There was a lot of content within the organization which wasn’t accessible. In addition, Naturalis also looked for a solution that contributes to achieving their strategic objectives for the coming years. Every year, 1 million unique visitors must come to Naturalis' online channels and 1,350 primary and secondary schools must be reached.

The Natuurwijzer is aimed at scholars from 9 to 14 years old and opens a gigantic knowledge database with a wealth of image, video and interactive 3d objects. The material is consistent with curricula in primary and secondary education. Scholers, together with their teachers and parents, learn more and more about the enormous wealth of nature. At home, in the classroom and in nature.
The Natuurwijzer is not only meant to search and find specific information. Thanks to the use of many images and videos that appeal to the imagination, the curiosity of users remains stimulated.
Challenges
UX & UI
As designers of the Natuurwijzer we had an interesting challenge. How can we create the perfect user experience for a specific target audience: children between 9 and 14 years of age. After the first tests we came to the conclusion that there are actually two groups: younger children (9-11) that navigate through images and older children (12-14) that actually use the search and filter options to find interesting content.
We spend a lot of time in getting the typografie right. Big headings, enough white space, attractive images make the content scannable and pleasant to read. And, there is always something else which could be interesting on every page.
We designed all the screens for desktop, tablet and smartphone in order to create the prefect user experience on every device.

Layout and grids
The homepage of the website lists articles in a custom grid. Portrait items are mixed with landscape items, and a few fixed positions show videos instead of photos. This was a huge challenge. Custom code was used to build the overview. The logic is as follows: 7 articles (in a grid), followed by 4 researchers, repeating. The editor uses a special interface to add/edit the content (using Draggable Views), but it was a hit & miss to display articles on a specific position in the stream. Extra styling was added to the admin interface to explain to the editor where the items would show up (see screenshot).
Community contributions
Fast Autocomplete module
The website uses the Fast Autocomplete module for a great search experience (this module, which LimoenGroen wrote and shared with the Drupal community, won a Splash Award a few years ago..

Integration with the Naturalis Netherlands Biodiversity API
The website is integrated with the Naturalis Netherlands Biodiversity API, which enables an editor to map articles about animals to the correct species. An endpoint was added to the website, to enable screens within the museum to show information from the website about a specific specie. This means that the information of the website can easily be displayed in the museum to the visitors.
The search is also connected with the Biodiversity API, so that when the user searches for an animal that is not listed on the Natuurwijzer website, it shows the results from the Biodiversity website (see screenshot).

DrupalJam
The Fast Autocomplete module was rewritten to enable the integration of external providers. Other than that LimoenGroen reviewed and wrote several patches during the development of the project. They also shared our learnings at the last DrupalJam and presented a business case together with Naturalis).
Screenshot