Valio app

Valio’s new mobile application provides ideas and inspiration for daily cooking and baking with personalized recipe recommendations, taking into account the user’s needs and dietary preferences. The consumer-oriented app offers a high-quality digital user experience for anyone interested in baking and cooking.

App Store Google Play

Background

Valio’s old mobile application was essentially a web-based platform converted into app form, which was unable to provide any functionality differing from the Valio.fi website. The app had also reached the end of its technical lifespan and some of its features were not supported in newer mobile devices.

Goals

The aim of the project was to build a high-quality, user-friendly and cost-effective consumer application that serves both Android and iOS users. In addition to strengthening the customer relationship with the established target audience, the new app specifically targets young adults for further engagement.

Our goal was to create a high-quality digital user experience for everyone interested in baking and cooking. We achieved great results shortly after launching the first version.

Pekka Rantamoijanen
Head of Customer Experience

Design

Defining the functionalities

The design work was based on a preliminary prototype designed by a third party and a list of app functionalities compiled by the client, which were refined in collaborative workshops. We started with unlimited dreams and ideas, from which we narrowed down and defined the functionalities for the MVP version.

UI/UX design

The wireframe of the prototype was refined to align with Valio’s brand identity and the functionalities we agreed upon. Through detailed planning of the app functionalities and UI/UX design, the final result was a polished prototype created with Figma. This prototype showcased the app’s appearance, structure, and desired functionalities.

User testing

The prototype, reflecting the final user experience, was also subjected to user testing. Some testing was conducted in-person, while a broader audience tested the app remotely. The user testing included validation and testing of key functionalities as well as gathering general feedback on the app and its appearance.

Functionalities

Recipes at the core of the app

Searching for, browsing, and saving recipes are key functionalities of the first version of the app. The free-text search in the main view of the app works seamlessly, and search results can be filtered based on various criteria such as dietary preferences, cooking time, or preparation methods. The app also allows users to save recipes to their own cookbook, where they can create folders for different needs.

The individual recipe view is designed to ensure that the phone screen doesn’t lock automatically during cooking. On the recipe page, users can browse the list of ingredients and preparation instructions, share recipes, and find more recommended recipes.

A personalized experience

Creating a user account and logging into the app enables a personalized user experience. Customized recipe listings take into account the user’s preferences, needs, and dietary requirements. The app also provides weekly recipe suggestions, seasonal recipe listings, highlights of new products, and selections from current articles.

The administrators can send push notifications to all users using the Firebase service. Users can manage notification settings and other profile information from the app’s profile section.

Diverse search pipelines

In addition to the free-text search, we built various search pipelines to provide users with multiple, context-specific ways to discover recipes. The new app has a feature that allows users to search for recipes based on the ingredients they have at home, as well as a search option that considers how much time the user has for cooking. Another search feature shows recipes based on specific events or parties.

Technical implementation

We chose to implement the app as a native application to ensure a first-class user experience, enable technically feasible future functionalities, and provide more versatile opportunities for the app’s ongoing development. The plan is to continue developing the app and add new features based on customer feedback and analytics.

The chosen method for the implementation was React Native, a modern JavaScript platform for building native applications. Thanks to React Native, the app doesn’t require two separate codebases for Android and iOS versions. We also leveraged the Expo framework, which offers powerful tools for app development, publishing, and updates. This allows us to do “over-the-air” updates and bypass the traditional app store update process.

WordPress & Firebase

The app uses Valio’s WordPress website as a background, which serves as a data source for integrations like the recipe system and search engine, and as a tool for managing the app’s content. By centralizing content management on the WordPress site, additional work can be avoided, as integration and styling can be done collectively to meet the needs of both the website and the app. Content management permissions for the app are defined through the integrations on the site, ensuring controlled access.

With the tools provided by WordPress, Valio’s team can manage campaigns, texts, and featured content in the app. This includes recipes and recipe groups under the tabs “Cooking” and “Baking” on the front page. Certain choices within the search pipelines can also be controlled by Valio. For example, in the early summer, the app might suggest recipes suitable for Midsummer celebrations, while in the winter, it might focus on Christmas dishes. The management tools are continually evolving, and possibilities for content and functionality management within the app will expand in the future.

The app also leverages Google’s Firebase cloud service to develop the app’s backend logic, database, and caching solution. Valio’s marketing already extensively uses Google solutions, and Firebase provides direct integrations for mobile app analytics. Firebase also enables the management of app notifications and configurations when needed.