fbpx

MISTER Smart Innovation

Mister Smart Innovation è una società giovane formata da personale altamente specializzato sita al Tecnopolo CNR di Bologna, con cui è strettamente collegata operando nel mondo della ricerca scientifica.
Fanno parte di associazioni che riuniscono laboratori di ricerca e centri per l’innovazione della Rete Alta Tecnologia, integrandoli al sistema imprenditoriale del territorio regionale. Il loro obiettivo è quello di creare opportunità e collaborazioni per avere un impatto positivo sul mercato e sulla società attraverso l’innovazione.

Per questo avevano bisogno di un nuovo sito, più innovativo per l’appunto, che li rappresentasse meglio nell’immagine, avendo cura di inserire molteplici animazioni e un nuovo look più curato, moderno ed essenziale. Anche i contenuti sono stati riscritti per aggiornare e migliorare l’architettura delle informazioni, distribuendoli in modo da rendere più performante l’usabilità del sito.

Cliente
MISTER Smart Innovation
Data
2022
Area
UI e Developing
Sito web
Visita
IMG 01_Innovation (1)

Obiettivi di Progetto

bagliore giallo
Vetrina delle expertise

Con il nuovo sito, Mister Smart Innovation vuole trasmettere in modo più chiaro ed immediato la sua natura aziendale, cioè una realtà giovane e innovativa ma anche ricca di certificazioni autorevoli. Soprattutto però, vuole anche comunicare quali sono tutte le sue sfere d’azione, di cosa si occupa e a chi sono rivolti i suoi molteplici servizi, in modo approfondito ma anche attrattivo e comprensibile per tutti gli utenti.

bagliore rosso
Focus sulla Lead Generation

Nella progettazione del nuovo sito, particolare attenzione sarà prestata anche a un obiettivo di lead generation, intercettando i punti migliori all’interno delle varie pagine del sito dove posizionare Call to Action funzionali per attrarre e generare una serie di nuovi contatti e possibili futuri clienti interessati ai servizi di Mister.

bagliore blu
Layout fresco e catchy

Il nuovo sito presterà attenzione all’usabilità da parte degli utenti, ma avrà una veste grafica più catchy e moderna che regali un effetto wow alla navigazione e che aiuti l’azienda ad allontanarsi da un’immagine prettamente istituzionale e respingente nei confronti di nuovi potenziali clienti e collaboratori.

1.
Per poter definire la nuova sitemap, il primo step affrontato è stato quello di analizzare la struttura del vecchio sito tenendo in conto le indicazioni e le necessità espresse dal cliente.

2.
Abbiamo esaminato i siti di alcuni competitor e/o realtà affini per trovare potenziali caratteristiche funzionali anche ai nostri scopi e individuare eventuali best practice di settore.

3.
Abbiamo quindi creato una gerarchia più funzionale alle nostre esigenze, ridistribuendo i contenuti esistenti e prevedendo la creazione di nuovi, volti a creare uno storytelling aziendale meno istituzionale e più friendly, pur mantenendo la dovuta autorevolezza.
La nuova struttura è stata disegnata ovviamente per rispettare anche le best practice per un’user experience ottimale e offrire una navigazione fluida evitando un effetto ‘matrioska’ eccessivo, che rende demoralizzante la navigazione e inaccessibili i contenuti. Inoltre, doveva rimanere funzionale anche ai fini di una nuova grafica moderna e dinamica, ricca di animazioni.

IMG 5_titolo sitemap
IMG 6_vecchia sitemap
IMG 7_nuova sitemap
IMG 8_titolo concept

Per ideare la nuova immagine di Mister sul web, abbiamo analizzato vari aspetti, tra cui sicuramente la sua storia, il settore in cui opera e soprattutto lo spirito ambizioso e innovativo che caratterizza l’azienda.
Volevamo contribuire a trasmettere, anche visivamente

l’affidabilità e l’istituzionalità
di una società che opera ormai da 13 anni e che collabora con enti istituzionali di grande prestigio

IMG 9_foto 1

la sua anima più moderna e vivace
composta da un team giovane ma altamente specializzato e sempre aggiornato nell’ambito tecnologico e scientifico.

IMG 10_foto 2

Per unire queste due facce della stessa medaglia, abbiamo optato per l’abbinamento equilibrato di due font a contrasto, uno graziato e più elegante, quasi di altri tempi, uno lineare, geometrico e moderno, che trasmetta un appeal tech.

Microscopio

Per richiamare l’ambito accademico e di laboratorio, abbiamo optato per uno sfondo luminoso, un bianco materico che ricordasse sia la carta su cui si scrive e si studia, sia gli ambienti sterilizzati dei laboratori.

Lo sfondo neutro non risulta asettico e freddo, perchè in alcuni punti è stato illuminato da bagliori sfumati dei colori della palette cromatica del brand Mister.

Chiarezza.
nei contenuti tecnici e nel descrivere Mister, era un obiettivo cardine del progetto, raggiungibile grazie agli accorgimenti cromatici, ai titoli grandi e con posizioni di rilievo gerarchico, a un menu a tutta pagina privo di inutili orpelli e a sezioni ben bilanciate nei contenuti testuali e fotografici.

Scelta delle immagini.
che avrebbero avuto un ruolo nella definizione dell’identità visiva digitale di Mister.
Saranno scorci di laboratori e di strumenti tecnici (realizzate ad hoc nei laboratori dell’azienda), che sbirceremo attraverso le forme che le conterranno, come se fossero finestre da cui osservare il processo dell’innovazione in continua evoluzione.

Look moderno.
Oltre alla chiarezza e all’aspetto aziendale più professionale però, non ci siamo dimenticati di soddisfare anche l’altro obiettivo di progetto: risultare più catchy per il target di riferimento, dando voce al lato più innovativo e moderno di Mister.
Per riuscirci, abbiamo scelto impaginazioni non standard dei testi e soprattutto ad animazioni di entrata, di parallax e di scorrimento, come anche dei bottoni dal design ricercato e non banale.

rem6

IMG 13_titolo website
IMG 14_video menu_1

Numerose animazioni popolano le diverse pagine del sito, tra cui: effetti di movimento e parallax dei testi, transizioni di pagina dal colore sempre diverso, aloni di colore pulsanti e sfocati che arricchissimo il background.

Per realizzarle, abbiamo utilizzato diversi framework tra cui:
Swiper Per gestire i vari carousel presenti nelle pagine
Barba JS Per creare la transizione tra una pagina e l’altra
Locomotive Scroll Per gestire tutte le animazioni all’interno della singola pagina: scroll orizzontale degli elementi, effetti di parallax, eventi quando l’elemento entra nella viewport del browser.

IMG 15_layout screen

Per ottimizzare al meglio il caricamento delle pagine abbiamo sviluppato un tema che attraverso l’utilizzo del routing basato sul DOM è in grado di richiamare un file JS dedicato per quella specifica pagina. In questo modo verrano inclusi solamente gli script necessari per far navigare correttamente la pagina visualizzata. Inoltre i file JS e i file SASS vengono minimizzati per non appesantire le pagine.

Per la creazione dei vari template di pagina abbiamo utilizzato:
Bootstrap Per creare la griglia e gestire la disposizione dei componenti
Advanced Custom Field Per creare tutti i campi necessari da compilare per le varie sezioni sviluppate.

IMG 17_layout mobile

Project Team

Creative Agency Wider View
Client Mister – Smart Innovation
–
Project Management & Accounting Flavio Lenoci
UI/UX Design Sabrina Mencarelli
Developing Tommaso Costantini

Facciamoci due chiacchiere

Per informazioni, richieste di preventivo, collaborazioni o corsi, non esitare a scriverci!

Scrivici

Progetto precedente

Progetto successivo