Collectieve Propaganda voor het Nederlands boek (CPNB) is a non-profit organization serving Dutch literature. CPNB wants to enrich people’s lives by getting them to read more books.
CPNB
User account dashboard with segmentation
Extensive content search and filters
Simplified information architecture based on workshops
After a period of successful collaborations for campaign websites, Studio Vi was asked to redesign the general website. The current website had an outdated design and interface that sometimes made it difficult for users to navigate through the website, which was reinforced by the large amount of content on the website. . We learned from the results of the digital strategy that the pain points of the target group were in the foundation of the website. The navigation, search functions and an overall clear layout. In addition, the target group indicated that it was difficult to contact the organization.
The results from the digital strategy were used to formulate goals: 1) A logical structure for the pages and content, 2) Making it easier for users to navigate within the website and the campaigns, 3) Providing the website with a fresh new style and 4) make it easy for the users to contact CPNB. The intended result is a platform where the user experience and brand experience are taken to a higher level.
To improve the structure we performed an assessment of the current website. We did this by creating a sitemap, an overview of all pages with the content that falls under it. From this starting point, we reorganized the high-over structure into a logical division of the available content. By adding a hamburger menu we split the content between 1) the most relevant pages, which are easy to find in the navigation bar 2) secondary pages, which can be found in the menu.
The homepage has been redesigned with content that users search for most so that they can easily navigate to the right page. We have set up multiple contact points to make it easy for users to get in touch with CPNB wherever they are on the website.
With the structure and content in place, we started working on the visual aspect of the website. We turned to books for inspiration, literally. Users of the CPNB website are all active in the book trade. For this reason, we looked for a way to implement the experience of reading a book on the CPNB website.
This has manifested itself in a focus on large typography, clear white space as is common on book pages, and a muted color scheme based on paper tones for the background colors of the website. In this way we translate the experience of reading a book to the CPNB website.
The design of the technology behind the website is one of simplicity and flexibility. On the client side, this translates into a clear, component-based structure in which JavaScript and SCSS files are combined with Webpack. Server-side we work with PHP code split into “template parts”. With a custom WordPress CMS we offer CPNB the possibility to create pages themselves without deviating from the defined design system. In addition, we offer a solid user management platform in which content can be personalized for different user groups.
The use of animations is used to draw attention to parts of a page and to enhance the user experience for a very diverse audience, without being distracting. Through extensive search functions and filters, content is found very quickly on criteria such as date, theme, or campaign.
One of the challenges early in the development process was migrating a large amount of news items and campaigns from a Drupal environment. Through a combination of automation and manual actions, we succeeded in giving all content a logical place within the WordPress environment, without hindering the creation of new content.
“Studio Vi has built a beautiful, user-friendly and modern website for us. Their focus on user-friendliness and thinking along about purpose and target group has yielded a good result and a good representation of the CPNB Foundation.”
