MatPrat creates teaching aid for Food & Health classes in Norwegian schools. A recent chapter of our cooperation focused on building Matopedia, a digital platform for food and health subjects. The goal of the project was to prepare an environmentally friendly resource, that will replace printed textbooks. We wanted to provide teachers and students with theoretical and practical food knowledge.
Matopedia, launched in 2017 with the collaboration of NoA Ignite Norway, garnered widespread usage in schools. It prompted the client to prioritise UX and UI improvements in 2019.
This was a gigantic project for us, as the redesign of the platform happened simultaneously with a complete revision of the curriculum and a change from one to two languages, involving a huge production team and a lot of external professionals and partners. Turning this massive scope into a user-friendly solution was a challenge, but with a seamless collaboration with our NoA Ignite-team, we landed on a result we are all proud of, and that teachers and students enjoy using.
Head of Digital
Registered Elementary schools for 2022/23 classes in Norway
Registered Lower secondary schools for 2022/23 classes in Norway
In 2019 MatPrat recognised the need to improve the user experience of the portal. MatPrat first collected valuable feedback from teachers and understood the requirements and needs of end users. Then, we rebranded the portal to revamp its visual design.
One of the major challenges faced was adapting the portal visually to its two primary audiences – teachers and children. It was essential to create a branding identity that would resonate and foster a stronger connection with the platform.
In addition, specific components of the platform, such as the lesson page, campaign page and front page, needed to be fully editable for the editor in Optimizely CMS. It was important to ensure all components of the editable pages would seamlessly fit together. It was also key to implementing an easy language switch feature between Bokmål and Nynorsk.
Another challenge was related to the broadness of the design scope, which included creating a new key visual for the website. A simplified logo was developed to refresh the brand. The website was completely redesigned to improve user experience. All these changes were implemented based on feedback collected from various user groups, including teachers, students, and website editors.
To ensure the successful and predictable delivery of the project we emphasized aspects such as:
We aimed to create a branding that would foster a playful atmosphere. We added new colours to help distinguish user roles and levels within the platform. More colours were introduced to add liveliness and engage kids using the platform.
The overall style of branding is friendly and colourful. It reflects a warm environment for the users. The patterns we chose represent shapes and objects usually found in the kitchen during the cooking process. For instance, blobs symbolize dough, and lines represent pasta. The goal was to visually connect the design to the culinary world.
Additionally, we created a new, simple logotype. It distinguishes Matopedia from MatPrat and MatStart products and boosts the overall friendly feeling of the platform.
The main content of Matopedia consists of five types: lessons, recipes, quizzes, videos, and articles.
The new platform empowers content creators with more control over page structure and overall design. Each page is composed of repetitive components. Their order, content and look can be customised, depending on the topic editor is working on.
Additionally, we have improved the login flow, especially for teachers. Now, teachers can switch between different levels or student views without the need to re-login. We have also improved the quick user’s role and level recognition that bases on dedicated avatars.
The lesson page offers different views for teachers and students. The teacher’s view is equipped with valuable tips on what to teach and how to explain the content to students. A dedicated information box provides details about allergies or religious considerations related to the food discussed during the class.
We have achieved a better content structure by using marked icons for easy navigation within repetitive sections. Additionally, custom topic-oriented sections can be added to make the content more engaging and resonant.
Furthermore, we provided a dedicated PDF for lesson screen sharing in the classroom, to help with structuring content for the presentation
To make knowledge more accessible and enjoyable, students are presented with quizzes at the end of each lesson.
We used Optimizely CMS 11 (formerly EPiServer) as a great tool in the development of the educational platform. With Optimizely, we implemented user groups to allow efficient content access management at different levels. Editors, administrators, teachers, and students were assigned roles and permissions. This way we ensured content control and security.
With Optimizely, editors benefit from on-page editing to make real-time WYSIWYG content changes.
We also created a range of dedicated solutions:
Easy implementation of various types of pages and views using a modern tool supported by Optimizely.
React allows for efficient data flow and the creation of modern, component-based applications. It introduces dynamic user interfaces and efficiency in the development process.
Svea Checkout API
Svea is an internet payment processing provider. The platform communicates with Svea via Rest API. During the school registration process, when the payment is successful, Matopedia accounts for students and teachers are automatically created.
As a result of our collaboration, we delivered a successful Matopedia platform redesign. New branding brings fresh and visually appealing brand that resonates with the target audience. Enhanced user experience, characterised by the friendly and colourful interface, makes the website more engaging for children. Simplified login flow and role-specific avatars improve user navigation and interaction. With increased control over content creation and content structure, platform editors are empowered to deliver more engaging and relevant materials.
Paired with the extensive production of content from the client's side, the digital transformation of Matopedia turned it into an attractive educational platform. It catches the interest of the audience in a relevant, resonating way.
As a result, Matopedia fosters a passion for cooking and nutrition in an environmentally friendly, digital way.
Chief Executive Officer
Throughout over 15 years of career in IT he has been working in variety of technical, advisory and managerial roles delivering digital solutions to mid and large companies. A mix of technical and business consultancy experience allows him to advise clients on applying technology to achieve measurable business results. He worked for clients like Canal Digital, Electrolux, Nord Pool Spot, Norsk Hydro.
Since 2014, NoA Ignite have made sure that MatPrat’s visitors have smooth and uninterrupted access to their websites.
We helped IB bring their idea to life by creating recognizable branding and website that effectively reached students, educators, and thought leaders. The concept that real change...