basf header

BASF Care Creations: Developing a Website Optimized for Any Device

The background

With business partners in over 200 countries, more than 110,000 employees and almost 330 different product lines, BASF is the world's leading chemical corporation. By acquiring Cognis in December 2010, BASF took steps to further expand its market leadership position in the personal care sector. BASF presented its new brand in its personal care products portfolio in the Care Creations™ line, and its latest communications concept "Inspired by Life" at the In-Cosmetics 2012 trade show. The introduction of Care Creations™ was the impetus to create a new website that would satisfy the needs of the market leader and be a reflection of the company’s innovation and new communication concept. BASF Care Creations constitutes an entirely new kind of marketing platform, and is in stark contrast to the standard BASF style guide. This was necessary to fully satisfy the new demands, and thanks to Responsive Design, it was possible to support a number of devices. The web page introduced new personal care products and ideas. Its bold implementation serves as a "best practice" example and offers a fresh and innovative user experience. AAG was very proud to have earned the confidence of such a strong market leader.

The customer's profile


With business partners in over 200 countries, more than 110,000 employees, and almost 330 different product lines, BASF is the world's leading chemical corporation.

The partner's profile


The AAG is a service company for e-solutions and communication. Both divisions work hand in hand, for e-solutions need communication and communication needs e-solutions.

See Complete Partner Profile


The challenge

BASF Care Creations needed a website to which different users from disparate companies would be adding content. Consequently, it was essential to implement an easy-to-understand and user friendly Content Management System (CMS). BASF had to assign different roles to the different users based on a workflow system, so that their user-defined content could be published. The objective was to create a new website using a single-page architecture, which allowed users to dynamically enter content using a CMS solution as a tool. The unique characteristic of this concept was to allow the website to be optimized for different devices. Responsive Design" was the tool to flexibly scale the website, and thus make it independent of screen resolution. The classic desktop, iOS, Android, Windows Phone, and Blackberry were defined as target devices. What was particularly important was to design the website so that only one main page was available at the same time for both the desktop and the mobile versions (i.e. single-page architecture, no-forking), which had the ability to asynchronously load Sitefinity pages as content. All content had to be managed in such a way that the potential for end users errors was kept to a minimum. In addition, the system had to allow corporate and project-specific workflows and roles to be implemented with a view of protecting the site content. Only a certain group of users and roles were to be allowed to see the workflow and the life cycle status. To review, we needed to integrate the complex page structure of the Care Creations website into an easy-functioning CMS, present the content dynamically for a variety of devices, while also assuring the typical CMS functions did not fall by the wayside.

The solution

The new website was designed as a single-page architecture and a common main page was created for both the desktop application as well as the mobile version. The main pages were designed so that they loaded other Sitefinity pages dynamically as content. The relevant markups and scripts were added to both main web pages. This allowed content to be edited for different devices, thus giving the system the ability to load the content both asynchronously as well as dynamically. Responsive Design was the ideal solution because of its ability to combine a single-page architecture with the relevant markups and scripts. As far as content was concerned, Responsive Design was ideal insofar as it allowed content to be managed in Sitefinity lists that could then be expanded using custom fields, giving the user the ability to centrally manage his or her content. Within that process, some custom fields were developed, others were customized. In addition, that solution was used to reduce the number of potential errors to a minimum, thus maximizing usability. Another objective was to develop custom controls accordingly, which generated content based on the lists on the Sitefinity pages. Within that process the page structure was reproduced using Sitefinity pages. The custom controls that were developed in an earlier step were integrated as placeholders on every page as a way to generate and present content. Having in mind the above mentioned reason and in order to be able to allow increased flexibility, the custom controls were equipped with selectors (e.g. page selectors). Then, the Java script functions of the single page were customized so that all of the Sitefinity pages could be loaded dynamically and asynchronously into the main page (single page architecture). That structure made it possible for every device to use the same page, which could then generate its content dynamically on demand. A web service needed to be implemented for the content of the start page, which could then communicate with the Sitefinity lists and dynamically read the images for the start page. What required special attention here was finding a way to assure that the content of the start page would not be identical with other lists, because at that point only images were used. The Sitefinity lists combined with custom fields made it possible to implement that solution flawlessly. Because of the different workflows, it became necessary to modify the Sitefinity preview mode. Having in mind that the single page architecture was required, the preview mode needed to be customized. Within that process, the roles as well as the status and the lifecycle of the various CMS elements were taken into account.

The result

BASF Care Creations now has a clearly arranged, professional and user friendly single site with the advantage that it can be managed and customized using a well-organized user interface. The efficiency of the data structure - as well as the user friendly adaptability options - save the customer time and money. AAG was able to implement exactly what the customer had in mind, and they were (and remain) extremely satisfied with the result. This gives us even more confidence to continue to work with Sitefinity in the future.


Any questions

Your project is similar or just want a consultation about your project?

Contact us

Other Customer Success Stories