Valio

Valio.fi is Finland’s most popular recipe website, attracting over 1.5 million website visitors per month. We have been partnering with Valio in the development of their digital services since 2022.

A scalable solution for Valio’s global needs

Valio’s previous content management system (CMS) was a custom-built, years-old solution tailored specifically for Valio. The goal was to replace it with a modern, user-friendly, and easily customizable system that wouldn’t be completely dependent on a single vendor. The solution chosen was WordPress.

The focus of the revamp was primarily on switching the technical platform and developing maintenance solutions. The aim was to create a more efficient technical foundation that could scale to meet Valio’s global needs.

As part of the transformation project, the professional site Valio Aimo was to be separated from the main valio.fi site and restructured into its own standalone platform. Valio Aimo was built as part of a multisite network that, in the future, will also host several other Valio’s websites.

In the long term, the goal was to streamline the management of future country- and brand-specific websites, create a sustainable website architecture with a long lifecycle, improve content management flexibility, and allow for better integration of different business operations within the site management framework.

“Working with Evermade was seamless – we received excellent service throughout the project, from design to launch. The project was completed on schedule and achieved its set objectives. Thanks to the project, we now have a solid foundation to continue our close development work with Evermade. Since the first project, we’ve already been able to launch several new services.”

Mikko Mustalampi
Web Service Manager, Valio

Improved usability and accessibility as the design focus

The design process started with auditing the old website and identifying its pain points. Although the primary focus of the project was on changing the technical platform, we also saw a great opportunity to improve the website’s usability and accessibility. Valio, in collaboration with VapaMedia, had developed a content concept for the new site, which included a relaxed, youthful color scheme aimed at engaging a younger audience.

As we began the UI/UX work, we applied the new color palette to the design and aligned the content concept with the required elements, ensuring that the content blocks supported the implementation of the new concepts. We refined the visual details and made improvements to the usability of key features, including updating search filters, refining the navigation, and standardizing font sizes. Once the technical implementation phase began, an essential part of the design process was overseeing the quality control of the development work.

Ensuring vendor independence, cost efficiency, and flexible content management

During the technical definition phase, it was decided to implement two website structures: the valio.fi site for consumers and a multisite setup that would include the professional site valioaimo.fi, and, in the future, several other sites. The goal was to create a long-term solution that would streamline website maintenance and user management. Since Valio.fi’s traffic volume was significantly higher compared to other sites, separating the site installations ensured optimal performance for the services.

The technical implementation of Valio.fi was built using WordPress’s modular Gutenberg blocks, which provide site administrators the flexibility to easily edit content without compromising on visual design. The blocks were based on the functionalities of Valio’s old system elements, with significant improvements made in terms of functionality and usability. We created dozens of pre-built block templates to simplify content management.

The old sites contained a substantial amount of content that needed to be reused or slightly improved for the new site. This content was migrated from the old content management system to the new one using a custom plugin that converted the old system’s various content elements into WordPress blocks. Migration status reports were created to allow administrators to review and adjust content on a page-by-page basis if needed.

Multiple integrations with external systems

The technical implementation included several integrations, with the most important being the import of product information and recipes, as well as related search functions from an external search index service. Valio’s recipes and products are imported as WordPress content through a custom integration with third-party systems. Recipe and product data is reformatted into a suitable form for the website and enriched as needed, such as with images.

Search functionality is a critical part of the site’s usability. The search engine used is Azure Cognitive Search (ACS). Content data is automatically updated and read from the ACS search index, enabling high-performance search queries both on the website and within Valio App.

With thousands of recipes and products, the data is grouped based on the data provided through the API, and then classified into WordPress taxonomy terms, which are ultimately stored in the search index. Valio’s current news content is imported from the Cision marketing communication system into the WordPress environment.

In addition to the content integrations mentioned above, an Azure AD integration was implemented, allowing maintenance users to log into WordPress management using their Microsoft credentials.

Media files, such as images and other attachments uploaded to the site, are automatically stored in Azure Blob Storage. The Azure CDN service working with Blob Storage ensures efficient and fast delivery of files to end-users.

Content and search integrations are monitored through a custom monitoring plugin, which displays status updates of the integrations directly in the WordPress admin panel and sends alerts through designated communication channels in case of issues.

Performance at the core of the redesign

Performance was a key factor in the technical architecture, with Core Web Vitals — Google’s performance metrics for websites — guiding the development process. Since Valio.fi is one of Finland’s most popular sites, it was crucial to maintain the strong search engine visibility that had been achieved with the previous site. During the migration, we preserved metadata, implemented schema definitions with slight improvements, and ensured proper redirects were in place.

The server infrastructure was designed for high availability, with the main website running on multiple WordPress servers and a separate database server. The Cloudflare CDN service ensures excellent performance and protection from cyber threats. It offers virtually unlimited performance, handling caching, protection against DDoS attacks, and providing a robust firewall to secure the site.

Dedicated multisite structure for Valio’s other websites

he project included separating the professional food industry content from Valio.fi to create a completely standalone site. Valioaimo.fi was implemented in a separate multisite environment, leveraging the base structure and blocks from Valio.fi. For the new site, we designed the sitemap, wireframes, and layouts, incorporating Valio Aimo’s brand identity into the necessary blocks and features.

Valio.com is Valio’s international B2B website, covering all of Valio’s country-specific sites. The technical foundation of the site borrows blocks used on Valio.fi, customized to meet the needs of the international site.

A separate and distinct brand identity was also created for Gold&Green. We were responsible for designing the site structure and implementing the visual identity on the website. The base for the site was built using the blocks created during the Valio.fi redesign, which were then stylized to match Gold&Green’s branding. The navigation was designed to support the site’s content structure, and functionality was added to enable the creation and management of recipes and products.