Schär

Schär is one of the leading manufacturers of foods for people with special nutritional needs, especially celiac disease.

Its history began in 1922 in the South Tyrol area of Italy. From the very beginning, it has been a family business with a strong connection to the territory. Everything changed when Ulrich Ladurner joined his father's pharmaceutical company and, at the age of 23, took over the management. Ulrich was very interested in food and marketed a line of easy-to-digest products developed by a doctor from Innsbruck: Dr. Anton Schär. 

In 1979, Ladurner took control of the Dr. Schär brand itself and further researched new products, in particular, adapted to celiac disease. From 1981 the brand was reintroduced to the market under this new management, with great recognition and results.

Today Schär remains a family-owned company, but has a global reach, with 18 locations around the world making the brand available in more than 100 countries.

More than migrating, transforming

Upgrades can easily be used to significantly improve a site's architecture. In this case, it will also be necessary to migrate the old content to the new formats, so that no data is lost. The process is arduous, but the result is spectacular.

• Reduce, recycle, reuse: The circular economy can also be applied to code. At Schär, we significantly reduce the number of content types (from 26 to 13), components (from 88 to 24), and categories (from 35 to 7). We do this through recycling (refactoring) and reuse (merging). The result is a much simpler, better organized, and at the same time, more powerful website.

• Automate and forget: The biggest problem of undertaking a major change is the need to adapt the old content to the new formats. If the website has a considerable size, the task becomes titanic for a human, but not for a machine: it is time for automated migrations. At Metadrop we are experts, and Schär's numbers are proof of this: no less than 99,700 contents, 124.661 categories, and 71.150 paragraphs (components) were successfully migrated overnight.

• Legacy code adaptation: Schär is a large project, with more than 105 custom modules already developed, including integrations with third parties such as Zendesk, newsletter sending, or authentication via oAuth. We ensured the correct functioning of these modules in Drupal 9 and extended them with the necessary new functionalities.

We want you to understand us

All this effort had to be reproducible in the 27 languages of the countries in which Schär is present. To make it more complicated, Schär pays special attention to the correct localization of its content, so that international languages - such as English, Spanish or German - may have different variants depending on the geographic region, such as German in Austria, English in Canada or Portuguese in Brazil.

A web that speaks like you: Metadrop developed new capabilities to allow this differentiation by language and local variant, so that each combination of language and geographic area gets its own domain and its own personalized translations adapted to the speaker's uses.

Auto-detection: Being a unique website, the user could land on the wrong version. To avoid this, we use auto-detection of the user's language and automatically offer him his language and, in the case of multiple versions, the version for his geographical area.

Asynchronous translation, intelligent translation: Translating is not just an exercise of transforming A into B. Cultural differences must also be taken into account, which is why we use asynchronous translation when necessary. In this way, a piece of content can respond to differences between cultures and countries. For example, a recipe may vary in ingredients depending on the area, responding both to local tastes and to the availability of certain ingredients or to cultural, religious, or other factors.

Error protection: By default, the system displays the original content if a translation does not exist. With 27 languages and a total of 41 variants, this could mean that the visitor could end up confused when jumping from one language to another for no apparent reason. We changed the default behavior of the system so that for each language only its own content can be visited.
 

With its own light

The modernization process of the Schär website could not do without a complete redesign. Modern, elegant, detailed, clear, and very usable, the new design was provided by the client to Metadrop, which was responsible not only for implementing it but also for actively participating in the introduction of improvements and new ideas.

• Performance-oriented: The client expressed the importance of excellent performance, so we got to work. We used utility classes in most of the CSS, loaded only the code that was necessary, applied next-generation formatting to images, deferred loading (lazyloading), and added critical CSS within the markup to reduce load times.

• To the pixel: When a client delivers a design with great character and personality, we know that respecting it is important. We correctly implement all typographic and color details, we respect sizes and spaces, we use the defined icons and we measure with care and detail each intervention. 

• Responsive by default: A website designed to receive a great interaction by the user can not afford to fail in smaller devices such as cell phones and tablets. In Metadrop we work the design on all screens from the beginning so that there are never unpleasant surprises in the delivery.

An exceptional search engine

The Schär website revolves around user participation, especially through recipes that the user can follow, rate, and review and that serve as a gateway to the brand's products. This is why the search engine has to be a key element.

• Smart and fast autocomplete: Having an advanced search interface is good, but not having to use it is even better. The autocomplete engine, optimized to return results immediately, allows the user to navigate directly to the content of their choice.

• Faceted search: Sometimes users don't know exactly what they are looking for or want to cross-reference information in a more complex way. The faceted search, incorporated in the powerful recipe search engine, allows us to offer a series of filters synchronized with the results that allow the user to narrow or extend the search according to a series of criteria. A friendly and non-intrusive interface does the rest.

• Help me help you: There is no more frustrating search experience than the dreaded "No results". To avoid this, the search page offers several alternative ideas and ways to get better results.

New needs, new tools

In addition to ensuring the correct functioning of the code received and adapting it to Drupal 9, Metradrop also developed modules to meet the new needs of the project.

• Roles integrated with the multi-language system: We reduced the number of user roles and created the figure of the Local Editor, an editor with permission only to edit and create content in one or more languages.

• Integration with OneAll: We developed a customized integration of the OneAll social login based on contributed modules but adapted to Schär's needs.

• Fast search: We created a highly optimized search autocomplete system that avoids entity loading in Drupal and works directly with Solr, providing much higher performance and speed.

We cover all the flanks

In addition to the functionalities that are part of the core of the website and the migration, at Metadrop we do not leave any critical functionality of the website to chance:

• Optimized SEO: We guarantee all the necessary tools for a good seo: updated sitemaps, meta-tagging for social networks and search engines, robots.txt and the editor's ability to define the information to be shared on networks.

• We comply with the GDPR: Integration of the OneTrust cookie system to ensure compliance with the European Data Protection Act.

• Print, what remains: We provide print-optimized stylesheets so that the user can download in PDF format and print the recipes in a readable format adapted to the physical format.

• Test coverage: In our infrastructure, we add tests at various levels to ensure the smooth running of the project and avoid regression: static code analysis, functional tests, visual regression tests, and - in the case of Schär - performance tests using Lighthouse to ensure that the set targets are met.

• Intuitive administration: As in other projects, we provide configurations that make life easier for the editor: real-time content preview, integrated component search engines, modern administration interfaces...