SURF, accelerating innovation in education

Education

Summary

SURF facilitates education- and research institutions by sharing digital opportunities and innovations. The new corporate website supports the renewed branding strategy and facilitates several smaller websites with over 2500 content pages. The entire information structure and navigation was redesigned and is now sustainable for further optimization. PUURPXL and LimoenGroen collaborated on the project.

Case description

The new SURF Website was totally redeveloperd to a user friendly structure by using data and user research to match user goals and needs (top tasks) to demand driven user flows (navigation). The website is an important asset for SURF to achieve online business goals and a critical asset in innovating education in the Netherlands digitally. We have laid out a roadmap for future additions to the website to incorporate subsites and services. The web team is set to improving the website based on a solid and sustainable foundation. The website was created by PUURPXL and LimoenGroen in conjunction with SURF.

Drupal offers a lot of out-of-the-box functionality we could use to construct the new website. Editors required many building blocks (paragraphs) that were added to an assets library containing all design elements. In addition to embedding YouTube and Vimeo, the CMS was linked with Mediamission, SURF’s very own streaming service to make live video streaming possible (for events for example) and easy to implement. This was done by writing an extra provider for the Video Embed Field module. The Video Embed Field module offers support for lazy loading, where only a “still” image from the video is visible. Clicking on the still loads an ‘iframe’ containing the video. We have extended our cookie module, so a cookie alert will only be visible after clicking the still, so a user can then accept cookies. This will make a video page much more attractive. The site is multilingual; menu’s, paragraphs and webforms can be set up multilingual by the editors. The website also offers an extensive editor workflow. Revisions are part of the workflow, so it’s easy to go back to older versions of content if necessary. The combination of multilingual, workflow and revisions had not been entirely developed in Drupal 8. Several adjustments have been done to make this possible.

Case goals and results

The goals (KPI’s) that have been set were documented in a large list of call to actions per section. It contains measurable indicators like number of downloads, contacts, newsletter registrations, video views, participation in projects, activities, and taking part in events. It’s too early to produce numbers yet. We reworked the site structure from organisation chart to user friendly structure by using data and user research to match user goals and needs (top tasks) to demand driven user flows (navigation).

The website was created by PUURPXL and LimoenGroen in conjunction with SURF.

Challenges

SURF gradually moved towards one large cooperation and the cooperation members asked for a clear, single brand strategy and presence.
The target groups had different user goals, which all needed to be addressed in content, site structure and better usability. The amount of content lacked structure, both for editors and for visitors. The new website needed to be sustainable; it needed to enable growth in content without having to redesign the entire information structure again.The website needed to project innovation (inspire) and collaboration (education, research) in a way that would make all the target groups happy. The CMS had to be easy to use and flexible and help achieve SURF's preset online business goals.

Community contributions

During the project we made two contributions including the Paragraph Image module, which is used to re-use image in paragraphs in an accessible way. We also wrote the MediaMission module, to integrate MediaMission with the Media Library in Drupal. Both modules will be shared with the community within the next few weeks - during on of our Sustainable Thursdays (Duurzame Donderdag).

Why should this case win the splash awards?

SURF is a fine example of a non-profit organisation investing in digital innovation for educational organisations. SURF plays a vital role in the Netherlands for educational organisations. From cooperative procurement to sharing knowledge and help fulfilling common requirements across the entire educational landscape. The new website serves as an example of embedding a large number of website into 1 cooperative platform, based on solid UX research and a renewed content strategy.