Frankhood Lorem ipsum dolor sit amet, consectetur adipisicing elit. Frankhood Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai and Machine Learning Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cloud Service Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Digital Marketing Solutions Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mobile Development Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Project and Product Management Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quality Assurance Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Strategic Consulting Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Web Development Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Approach Identify Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Approach Improve Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Approach Support Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Approach Tailor Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Approach Understand Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Planet Dotted Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Planet Striped Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Planet Solid Icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Bullet Quote Pink icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Bullet Quote Green icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Bullet Quote Blue icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Bullet Quote Purple icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Bullet Quote Yellow icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Finance icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Retail icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Industry icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Health Care icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Marketing icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Deep Learning icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Computer Vision icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Nlp icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Predictive icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Data Visualization icon Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ai Decision Support System icon Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Pan di Stelle_

Involve, excite and create connections with your audience: the key ingredients for positive brand reputation

Pan di Stelle
Customer
Barilla
Partner
Imille
Year
2019
Technologies
Vue
HTML 5
CSS 3
Webpack
php
Simfony

The Pan Di Stelle biscuit made its debut on the shelves as early as the 1980s, but over time it has been able to capture the public's imagination and transform itself from a humble biscuit into a truly iconic and well-loved national brand with a strong identity.

The iconic brand, breaking the boundaries of tradition associated with the rest of the Barilla products, has created its own universe in which the concepts of magic and desire have grasped consumer attention and allowed strong emotional bonds to form.

To further consolidate this relationship, the Imille agency commissioned Frankhood to develop a web platform that acts as a base for all fans of the Pan di Stelle brand, an application in which the user is placed at the center of the digital experience. The project development brief was therefore the optimization of user experience, divided into three parts: the design and architecture of the informational elements, interactivity, and service usability.

The new website gets the consumer involved through a path of images, videos, and animations and immerses them in a story linked to the emotional sphere of the brand. This interaction, through the creation of user-generated content, is most evident in the recipes section, which allows the user to put their own spin on the range of products made available by the brand.

Finally, inside the platform has been reserved a large space for the brand’s commitment to the sustainable cultivation of cocoa, an issue which the company has promoted for many years.

The most challenging aspect of this project was without a doubt the selection of the right technologies and tools, especially in the front-end area, which would allow the user to live a unique digital experience.

Vue.js was selected for the front-end framework. 

Vue.js is a JavaScript framework for the creation of reactive web interfaces that exploit dual-binding between data and view models. This means that it is possible to implement an application by reasoning in terms of data, variables, and objects, abstracting from the implementation and updating of the pages' DOM.

It has been defined as a progressive framework because it specializes in the creation of HTML views, it does not offer a plethora of features like other libraries (such as Angular) but allows for easy integration with components of other libraries and projects. The Vue.js developers themselves have created several autonomous components that may or may not be integrated within an application (vue-router, vue-resource, vue-form ...).

Vue.js implements the MVVM pattern, like many similar frameworks, a variation of the better-known Model-View-Controller (MVC). Despite the somewhat unfortunate acronym (MVVM means Model-View-ViewModel), the pattern has had a lot of success in the front-end and reactive application world.

The use of Vue.js provided a fundamental advantage: component development. Developing a front-end in this way allows extreme reuse of the code and remarkably high development speeds. Each component has its own style, responsive behavior, and javascript logic: this allows you to use the component in different layouts without writing a line of code.

The front-end is therefore very modular. 

The back-end was created in PHP language using the Symfony framework. You heard that right: sometimes we even create projects in PHP, but it is very rare :). In fact, Simfony is a very solid framework and for many years, before the advent of Laravel, it was the reference framework in the PHP world (excluding Wordpress, which is a different issue entirely). The back-end also manages the services offered by the brand's mobile application by exposing API REST. 

The portal was designed in such a way as to periodically host a series of digital activation in the form of competitions or small advergames.

The back-end also integrates with the ecosystem of services related to the brand including the SSO, CRM, and the tracking and ticketing systems with particular attention to the management of personal data from a GDPR perspective.