movenzia.com - Il noleggio a lungo termine senza pensieri

Ci siamo occupati di realizzare il prodotto a 360°, iniziando con la progettazione dell’architettura dei contenuti, passando per wireframe e mockup disegnati dal nostro team di designer e procedendo poi allo sviluppo del sito e di tutte le sue funzionalità.

La piattaforma si snoda in due blocchi principali:

• Public Site: sito navigabile dagli utenti, che possono quindi valutare i veicoli proposti e richiederne le informazioni;
• Backoffice: Web Application, basata su piattaforma Strapi, che consente il data entry delle offerte, l’inserimento delle schede informative dei veicoli e la raccolta dei leads.

Per lo sviluppo della piattaforma abbiamo utilizzato Next.js.

Next.js è un framework JavaScript basato su React costruito secondo il principio di “Build once, run anywhere” per lo sviluppo di pagine web statiche e dinamiche.

Grazie alle caratteristiche di questo framework, è possibile creare un sito su misura, flessibile, modulare e soprattutto veloce. L’utente avrà quindi un’esperienza di navigazione fluida e i motori di ricerca intercetteranno più facilmente i contenuti del sito valutandoli con un ottimo punteggio.

Inoltre, sono stati utilizzati formati di immagini innovativi che non rallentano affatto la navigazione. Formati come WebP e AVIF, infatti, hanno una compressione di alta qualità con una diversità funzionale in grado di soddisfare i numerosi requisiti imposti da un formato immagine moderno.

Per la gestione dei contenuti, invece, abbiamo utilizzato Strapi, un sistema di gestione headless che offre grande flessibilità e plugin personalizzati. Consente anche un accesso sicuro ai contenuti grazie alla configurazione degli endpoint REST API. L’utilizzo degli endpoint API REST e l’accesso ai contenuti possono essere controllati anche impostando e assegnando ruoli.

L’infrastruttura è stata creata interamente su AWS, questo ha consentito di garantire maggiore affidabilità e scalabilità. In termini pratici sono stati utilizzati i seguenti servizi:

• ECS Fargate: è stato utilizzato per garantire affidabilità e scalabilità dei Docker containers utilizzati.
• CodeDeploy: per assicurare un bassissimo tempo di down dell’applicativo, la soluzione implementata è stata quella del blue/green deployment.
• Cloudfront: la distribuzione cloudfront è servita per velocizzare e migliorare l’efficienza del Public Site. Per la configurazione di questa CDN sono stati utilizzati i failover di origine proprio per soddisfare le esigenze di elevata disponibilità.
• ElastiCache: il livello di in-memory cache tramite Redis ha aumentato l’efficienza dell’applicativo del backend che può sfruttare tutta la potenza della cache Redis tramite un middleware opportunamente configurato.
• MongoDB Atlas: la parte del database è stata gestita tramite il servizio MongoDB Atlas nella versione cluster dedicato. La configurazione proposta prevede 3 repliche per scalare e garantire efficienza ed alta disponibilità
• Gitlab CI/CD: un ruolo portante è svolto dalla parte CI/CD di gitlab, sono stati creati due diversi environment (staging e production) e sia per il frontend che per il backend sono state create specifiche pipeline con appositi jobs che gestiscono il deploy sui servizi precedentemente elencati.

A parte lo sviluppo, noi di Devmy ci siamo occupati anche dello UI Design del sito movenzia.com.

Come vi abbiamo già accennato quando abbiamo parlato del nostro rebrand, Devmy non è più soltanto sviluppo e formazione ma si occupa anche di UI e UX Design.

Tutto il progetto è stato realizzato in tempi molto rapidi. Abbiamo lavorato sull’architettura dei contenuti e studiato internamente una sitemap e alcuni user flow per poi produrre un wireframe, cioè una prima bozza di come verranno organizzati i contenuti nelle varie pagine e l’ordine in cui verranno mostrati.

Nel wireframe abbiamo quindi indicato:

• gli elementi presenti sulla pagina;
• l’ordine e la gerarchia degli elementi;
• le proporzioni dei testi e immagini;
• la modalità di navigazione;
• call to action;
• percorsi dell’utente tra le pagine.

Una volta condiviso il wireframe col cliente, abbiamo valutato insieme tutti i componenti e i blocchi di contenuto e soprattutto l’user flow dell’utente. Questo processo ha evidenziato la necessità di funzioni aggiuntive e di customizzazioni per rispondere alle richieste del committente.

In linea con i valori e la brand identity di movenzia.com abbiamo dato vita ad una UI semplice e modernaespressa poi nell’uso di una palette di colori a contrasto e sulla scelta di una tipografia Sans Serif che permettesse una buona leggibilità anche da mobile e che trasmettesse i valori di affidabilità e innovazione del brand.

Il tutto è stato progettato in ottica responsive, tenendo conto della qualità di visione sia su schermi molto grandi che su versioni mobile estremamente piccole applicando sempre i principi di accessibilità, dalla tipografia ai colori ed alla disposizione degli elementi.