• Accessibility
• Analytics
• Design
• UI/UX design
• Usability research
• Visual design
• Websites and web services

The Finnish Cultural Foundation’s website renewal

Strategy

The Finnish Cultural Foundation’s (SKR) website renewal was carried out to support the foundation’s strategy. The foundation aims to be a nationwide driving force for science, art, and culture, while promoting a pluralistic and sustainable society. The renewal of the website focused on three key communication goals:

• Building awareness
• Strengthening the position of science, art, and culture in society
• Improving the user experience

The website was designed on the WordPress publishing system, utilizing the multisite feature that enables the creation of independent subsites.

Visit the Finnish Cultural Foundation’s website

Creative idea and concept

The website combines a modern visual identity, ease of user experience, and functionality in accordance with WCAG 2.2 accessibility standards. It reflects SKR’s new brand identity, created by the agency N2 Albiino. The identity is fresh and modern, yet it also carries the history and unique origin story of a long-standing institution. With the new look, all of SKR’s activities are presented as a coherent, unified whole.

During the design phase, several concept workshops were organized to focus on the site’s target groups, user journeys, and goals. Technical workshops were held to design the site’s architecture and data model to better support content producers.

In the concept design, the extensive content of the existing site was reviewed, and different types of grants and related guidelines were reorganized into distinct user-oriented sections. The grant section itself differs significantly from the previous solution, where grants were presented on separate pages based on application periods and filled with links to other pages. Now, users can filter grants by their preferred criteria and application periods, allowing them to quickly find the right information or a suitable grant.

As part of the project, the entire guidelines section was also redesigned. The new guidelines consist of both shared base content and variable parts depending on the type of grant. To make content management easier, guidelines are updated piece by piece, with information flowing centrally into each grant’s guideline section.

In the concept phase, it was also decided to integrate SKR’s new Tiede & Taide (Science & Art) magazine into the digital service as a whole. Through the magazine, SKR concretely promotes the role of science and art in society. Grant recipients are also featured more prominently in article form, making SKR’s funded activities more transparent and visible.

Implementation

The project implementation focused on thorough concept design, UI/UX design, validation of interface solutions, an optimal data model for content, and technical quality.

Navigation and structure: A clear, accessible navigation supports the needs of different target groups. The Tiede & Taide magazine was placed prominently in the navigation, and quick links were added to the grant service, contact information, and guidelines.

Accessibility: The site complies with WCAG 2.2 AA-level accessibility criteria, making it equal and approachable for all users. Accessibility has been carefully implemented using semantic HTML, ensuring a clear and user-friendly experience particularly for screen reader users. For example, archive pages such as For Grant Applicants, News, and Contacts include features such as aria-live notifications, which inform users in real time when filters are applied and search results are updated. Special attention was given to the Guidelines section, designed to meet accessibility requirements and provide ease of use for all user groups despite containing extensive information.

Efficiency and sustainability: Performance optimization focused especially on reducing Cumulative Layout Shift (CLS), ensuring visual stability during loading so that content does not jump around on the screen. This was achieved through:

• Fallback fonts: Font fallback sizes were defined precisely to match brand fonts, reducing visual changes during loading.
• Image aspect ratios: Exact aspect ratios were set for images to prevent unexpected content shifts while loading.
• Responsive images: Images were optimized to load in appropriate sizes depending on the user’s device window.
• CSS loading order: Stylesheets were arranged to load in an optimal sequence, improving performance and speeding up usage.

Analytics and optimization: Comprehensive analytics tools were installed to monitor key metrics such as user numbers and the effectiveness of applicant journeys.

Responsiveness: The site functions seamlessly across different devices, and its content is easily shareable on social media.

Multilingual support: The site can include multiple language versions: Finnish, Swedish, English, with the possibility of expansion to Sámi and Romani languages.

Powerful search function: The search covers all site content, categorized and powered by a fast search engine.

Filter pages and content types: The site includes several content types, enabling editors to categorize a wide range of content in the admin interface and maintain standardized content entry regardless of the contributor. Filter pages help users find relevant content within the large content base.

Guidelines: Guidelines are managed as their own content type, and different guideline sections can be combined in the admin to ensure relevance for each grant.

Extensive customized block library: A broad Gutenberg block library was developed for presenting various content types. The library includes dozens of blocks with different variations in color and layout. A wide brand color palette makes it easy to adapt blocks for new subsites, allowing each to emphasize its own color scheme.

Migrations: Hundreds of articles were migrated from the previous site.

Replicable technical platform: Multiple websites can be added to the same multisite installation. While they use the same theme, each can still be customized in appearance and functionality. Two additional sites are already in production to make use of the shared theme.

Redandblue

Redandblue specializes in producing accessible and ecological digital services. In 2024, we delivered a total of 16 AA-level accessible services. As a company, we take environmental responsibility and have calculated our carbon dioxide emissions for 2024 (70 tons of CO2), offsetting their climate impact by supporting a renewable energy project in India. Redandblue holds the Carbon Neutral label from Koodia Suomesta.