Pazienti.it

ux/ui design website design system mobile desktop

A digital platform focused on health and wellness

Following the covid pandemic, Pazienti.it introduced new services such as video-conference visits, shortening the distance between doctors and patients. They also decided to extend their target market by adding animals to the equation.

The introduction of new services and the change of paradigm highlighted the need for re-organisation and re-styling of the portal, creating a new digital identity that not only works on its own but is also scalable to the various aspects that make up the brand.

Design process

La progettazione e realizzazione del portale ha richiesto una fase inziale di workshop con il cliente con l’obiettivo di definire le funzionalità, una bozza di architettura e l’approccio visivo. Sulla base delle funzionalità e dell’architettura, sono stati disegnati i flussi utente, fondamentali per poter affinare e migliorare la user experience. A questo punto, abbiamo impostato i token (colori, tipografia, griglia, etc) che ci hanno permesso di realizzare design system e conseguentemente la UI definitiva.

Functionalities

User and Doctor

Sono state create due landing page, una dedicata alla registrazione degli utenti generici e l’altra riservata ai medici. Ognuna di queste pagine presenta i vantaggi e le caratteristiche specifiche legate al tipo di utenza corrispondente ed è stata progettata considerando la possibilità di essere integrate in una campagna pubblicitaria.

More than one soul

Fin dall’inizio, è stato evidente che Pazienti.it desiderava esprimere appieno la sua diversità e ricchezza di contenuti. Per conseguire questo obiettivo, si è ideato un sito web che, mantenendo coerenza e solidità nella sua struttura di base, si adattasse con colori e contenuti alle varie sfaccettature: salute, benessere, cura della persona, alimentazione, genitorialità e animali.

Video Visit

Il videoconsulto consente agli utenti di prenotare facilmente e rapidamente una visita online di 15 o 20 minuti con uno specialista di loro scelta, basandosi su recensioni, prossimità geografica e altri criteri pertinenti. Abbiamo disegnato una landing dedicata che presenta in modo chiaro le caratteristiche e le procedure per la prenotazione, con l’obiettivo di rendere accessibile il servizio anche per gli utenti che arrivano sulla pagina tramite una campagna pubblicitaria.

Magazine

Pazienti.it si impegna a fornire contenuti e informazioni mirati per aiutare gli utenti a migliorare il proprio benessere personale o quello dei propri cari. Questo obiettivo viene raggiunto attraverso una struttura basata su blog verticalizzati, organizzati sia per macro categorie che per sottocategorie più specifiche, al fine di offrire un’esperienza di navigazione chiara e focalizzata.

Styles

Color mapping

La definizione dei colori “primitivi” è stata un passo cruciale nel nostro processo di progettazione e sviluppo del sistema di design. Abbiamo identificato i toni primari, secondari e di sistema, ciascuno con un ruolo ben definito nell’aspetto visivo complessivo e nell’esperienza dell’utente.

I toni primari sono i colori fondamentali che costituiscono la base dell’intera palette. In questo caso i colori delle categorie fungono da secondari, vengo infatti impiegati per differenziare sezioni specifiche del design e per aggiungere accenti visivi. I colori di sistema sono quelli utilizzati per indicare stati, azioni o feedback all’utente all’interno dell’interfaccia.

Una volta definiti i colori primitivi, li abbiamo utilizzati come base per impostare i token semantici, come sfondi, testo, bordi e altri elementi visivi. Questo approccio ci consente di garantire coerenza e coesione visiva in tutto il sistema di design, fornendo un linguaggio visivo comune che è di fondamentale supporto alla parte di sviluppo.

Project color palette

Grid definition

Abbiamo definito i breakpoints e le griglie per i diversi tipi di dispositivi, al fine di garantire che il sito si comporti e si adatti in modo ottimale alle varie esigenze e dimensioni dello schermo.

Large desktop screens

1440px <

12 Columns Margin 60px Gutter 24px - Stretch

Small desktop screens

< 1440px

12 Columns Margin 60px Gutter 24px - Stretch

Tablet devices

< 1024px

12 Columns Margin 40px Gutter 20px - Stretch

Mobile devices (landscape)

< 768px | < 480px

4 Columns Margin 16px Gutter 24px - Stretch

Typography

In linea con lo stile del brand, abbiamo selezionato due font: Museo e Apercu Pro.

Museo è stato preferito per i titoli e i sottotitoli, mentre Apercu Pro è stato scelto per il corpo del testo principale.

Abbiamo assegnato etichette di dimensione a ciascun stile di testo, consentendo così di stabilire un linguaggio condiviso e coerente.

Font sizes and weights

Components

Dopo aver definito le linee guida di design, ci siamo dedicati alla creazione del design system seguendo un approccio basato sull’atomic design.

Abbiamo iniziato con la definizione degli elementi più basilari, come bottoni e input, per poi progressivamente costruire componenti sempre più complesse e articolate.

Design system components screenshot
Pazienti.it