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_

Coinvolgere, emozionare e creare legami con il proprio pubblico: gli ingredienti della brand reputation

Pan di Stelle
Cliente
Barilla
Committente
Imille
Anno
2019
Tecnologie
Vue
HTML 5
CSS 3
Webpack
php
Simfony

Il biscotto Pan Di Stelle, esordisce sugli scaffali già negli anni 80, ma nel tempo ha saputo intercettare talmente bene l’interesse del pubblico da riuscire a trasformarsi, da semplice frollino, in un vero cult nazionale e love brand dalla forte identità.

L’iconico marchio, muovendosi dentro e fuori i confini della tradizione legata ai prodotti Barilla, ha creato attorno a sé un proprio universo in cui i concetti di magia e desiderio hanno catalizzato l’attenzione dei consumatori creando con essi un forte legame emotivo.

Per consolidare ulteriormente questa relazione, l'agenzia Imille ha commissionato a  Frankhood lo sviluppo  di una piattaforma web che funge da polo di aggregazione per tutti gli appassionati del brand Pan di Stelle, un applicativo in cui l’utente viene posto al centro dell’esperienza digitale. La matrice di sviluppo del progetto è stata dunque l’ottimizzazione della user experience tripartita nella progettazione e architettura degli elementi informativi, nell’interazione e nell’usabilità del servizio.

Il nuovo sito web coinvolge il consumatore attraverso un percorso fatto di immagini, video e animazioni e lo immerge in una narrazione legata alla sfera emozionale propria del brand. L'interazione, attraverso la creazione di user generated content , viene invece assicurata dalla sezione ricette, che permette all’utente di reinterpretare creativamente il paniere di prodotti messo a disposizione dal marchio.

Infine, un ampio spazio all’interno della piattaforma è stato riservato all’impegno solidale che l’azienda da anni promuove nei confronti della coltivazione sostenibile del cacao.

La sfida più grande di questo progetto è stata sicuramente la scelta di tecnologie e strumenti, specie in ambito Frontend, che permettessero all'utente di vivere una esperienza digitale unica.

Per il frontend è stato scelto di utilizzare il framework Vue.js. Vue.js è un framework JavaScript, dedicato alla realizzazione di interfacce web reattive che sfruttano il dual-binding tra modello dati e vista. Ciò significa che rende possibile implementare un’applicazione ragionando in termini di dati, variabili e oggetti, astraendosi rispetto all’implementazione e aggiornamento del DOM della pagina.

È stato definito framework progressivo perchè è specializzato nella realizzazione delle viste HTML, non offre una pletora di funzionalità come altre librerie (Angular in primis) ma permette di integrarsi facilemente con componenti di altre librerie e progetti. Gli stessi sviluppatori di Vue.js hanno realizzato diversi componenti autonomiche possono o meno essere integrati all’interno di un’applicazione (vue-router, vue-resource, vue-form…).

Vue.js implementa il pattern MVVM, come molti framework simili, una declinazione del più famoso Model-View-Controller (MVC). Nonostante l’acronimo un po’ infelice (MVVM significa Model-View-ViewModel), il pattern ha avuto parecchio successo nel mondo frontend e delle reactive application.

 L'utilizzo di Vue.js ha fornito un vantaggio fondamentale: lo sviluppo a componenti. Sviluppare un frontend in questo modo permette un riutilizzo estremo del codice e una rapidità di sviluppo notevole. Ogni componente ha al suo interno lo stile, il comportamento responsive e la logica javascript; questo permette di utilizzare la componente in molti layout senza scrivere una riga di codice.

Il frontend di conseguenza risulta molto modulare. 

Il backend è stato invece realizzato in linguaggio Php utilizzazndo il framework Simfony. Si, non è un errore: a volte ci capita anche di realizzare progetti in Php anche se molto raramente :). A dire il vero Simfony è un framework molto solido e, prima dell'avvento di Laravel, escludendo Wordpress per cui varrebbe la pena fare un discorso a parte, è stato per moltissimi anni il framework di riferimento nel mondo Php. Il backend gestisce anche i servizi offerti dall'applicazione mobile del brand esponendo api REST. 

Il portale è stato progettato in maniera tale da ospitare periodocamente una serie di digital activation nella forma di concorsi a premio o piccoli advergame.  

Il backend si integra anche con l'ecosistema di servizi legati al brand tra cui l'SSO, CRM, e i sistemi di tracciamento e ticketing con particolare attenzione alla gestione dei dati personali in ottica GDPR.