Online dal 1997, Hardware Upgrade è un punto di riferimento per chiunque ami la tecnologia o che semplicemente cerchi aggiornamenti, informazioni e recensioni in campo informatico (che sia l’ultimo iPhone 12 o le nuove patch di Cyberpunk 2077).
L’offerta dei contenuti è diversificata per categorie: dalla telefonia ai videogiochi, dalla fotografia digitale ai multimedia in generale in abbinamento sempre alle storiche sezioni dedicate al mondo dell’hardware e dei software.
Proprio per questo aspetto di content curation così articolato abbiamo analizzato e studiato tutti gli aspetti della UX (sia in frontend che in backend) per favorire l’inserimento e la gestione dei contenuti oltre che una navigazione snella e funzionale (lato utente).
Dopo l’analisi preliminare siamo passati al disegno del layout e allo sviluppo (utilizzando GatsbyJS per il frontend e Strapi per il backend).
Progettazione della UI
I test di usabilità, attraverso dei prototipi, sono stati un importante elemento per l’ottimizzazione della UX e UI.
User friendly
L’aspetto user-friendly, in termini di chiarezza del contenuto e di semplicità di fruizione (principalmente) da dispositivi mobile (in linea con una visione mobile-first) è stato un elemento centrale in tutto il processo di sviluppo.
Non solo da un punto di vista tecnico (ad es. page speed, responsive layout, ecc.), piuttosto da un punto di vista di user experience dei visitatori del portale.
Se la versione mobile di un sito non si adatta ai dispositivi, il tasso di abbandono da parte degli utenti sarà elevatissimo oltre alla difficoltà di posizionamento sui principali motori di ricerca.
GatsbyJS il nostro alleato
Per favorire questo processo abbiamo scelto di utilizzare GatsbyJS, un framework in React che permette di garantire elevate prestazioni nei siti web.
Il vantaggio principale della realizzazione di un sito con GatsbyJS è la velocità. Un fattore determinante per il posizionamento organico su Google.
Ma non solo, un sito statico permette di garantire un maggiore livello di sicurezza e di ammortizzare i costi del server e dell’hosting.
Semplice, moderno e funzionale
La sezione delle Schede Tecniche si presenta con un layout grafico semplice e moderno ma funzionale a favorire la consultazione immediata delle informazioni tecniche. Questo permette di migliorare l’esperienza complessiva del visitatore e aumentare i tempi di permanenza sul sito.
Tecnologie usate
- Adobe XD per studio della UX e disegno della UI
- GatsbyJS
- Strapi
...e non finisce qui!
Abbiamo iniziato con le Schede Tecniche, ma (a quanto pare) i nostri amici di Hardware Upgrade hanno apprezzato così tanto che… (rullo di tamburi) ci occuperemo del restyling dell’intero portale (e non vediamo l’ora).
Noi siamo davvero soddisfatti e carichi per la seconda fase di lavoro. Le nuove Schede Tecniche di Hardware Upgrade saranno navigabili in pochi giorni, seguiteci per scoprire cosa accadrà in futuro.