CatSalut

Propostad’appperalServeidePediatriadeCatalunya,presentadaperQuantionaunalicitaciódeCatSalut.Arquitectura,wireframes,prototipsiguiad’estil,fetsenunasetmana.
(SCROLL) ↓
01

Visió general

Un servei de pediatria per a tota la família.

Les famílies amb fills petits es mouen entre visites, informes, urgències i tràmits, sovint per a més d’un menor. La licitació de CatSalut demanava una app del Servei de Pediatria de Catalunya que ho reunís, amb accés segur i un perfil per a cada infant. Vaig entrar a l’equip de Quantion amb la proposta ja en marxa i, en una setmana, en vaig fer l’arquitectura, els wireframes, els prototips i la guia d’estil.

Fitxa

RolUI/UX Designer
Any2021
SectorPublic Health
ClientCatSalut · Generalitat de Catalunya
AgènciaQuantion
Pantalla de benvinguda, urgències pediàtriques i calendari de l’app
Logotips del Servei de Pediatria de Catalunya, /Salut i Generalitat de Catalunya
Mà amb un mòbil a la pantalla de selecció d’usuari
02

Experiència d’usuari

Totes les gestions, en un sol mapa.

Abans de dibuixar cap pantalla vaig mapar el servei sencer: accés amb DNI, CIP o certificat digital, selecció del menor, La Meva Salut, calendari i gestor de visites, eConsulta, quadre mèdic, urgències pediàtriques i Canal Salut. Cada branca amb les seves decisions (primer accés, més d’un perfil, una visita que es vol repetir), perquè el document tècnic expliqués com funcionaria l’app, no només com es veuria.

La meva aportació

  • Arquitectura de la informació: diagrama de flux de tot el servei, del login a les preguntes freqüents.
  • Gestió de perfils: selecció del menor en entrar i canvi de perfil des de la capçalera de cada vista.
  • Accés: DNI o CIP amb contrasenya, o certificat digital.
  • Navegació: menú amb les vuit seccions del servei i un cercador.
Diagrama d’arquitectura de l’app, del login a les preguntes freqüents
Menú de l’app amb les seccions del servei
Wireframes d’urgències, inici, consulta de visites i dades del perfil
03

Prototipatge

Desktop i mòbil per a cada pantalla.

Amb l’arquitectura tancada, cada secció va passar a wireframe en desktop i en mòbil, i d’aquí a prototips navegables amb l’entrada animada inclosa. Les pantalles anaven anotades component a component (capçalera, alertes, targetes d’hospital, mapa, peu), perquè la mesa de contractació pogués entendre cada decisió només llegint el document.

La meva aportació

  • Wireframes: totes les seccions del servei, en desktop i en mòbil.
  • Prototips: benvinguda, accés i selecció d’usuari, amb l’entrada animada dels logotips.
  • Pantalles anotades: cada component explicat al costat de la vista, per al document tècnic.
Portàtil amb la versió desktop del calendari
Informes i resultats, en wireframe i en alta fidelitat
04

Disseny d’interfície

Sobre el manual de la Generalitat.

L’app havia de ser recognoscible com un servei de la Generalitat. Vaig partir del seu manual d’identitat visual, amb la Helvetica Now Display, i el vaig adaptar a una interfície que sovint es fa servir amb pressa: blau primari per a les accions, una escala d’alertes per als avisos, targetes blanques sobre fons clar i el perfil del menor sempre a la vista.

La meva aportació

  • Guia d’estil: arquitectura, colors, tipografia, botons, alertes, formularis i navegació en un sol document.
  • Components: targetes de cita, d’hospital i d’informe, calendari i formularis reutilitzables.
  • Urgències pediàtriques: fitxa de cada hospital amb l’horari destacat i el mapa.
Paleta de colors de l’app: fons, primari, primari fosc i text
Tipografia de l’app
Cinc pantalles en alta fidelitat: inici, calendari, consulta de visites, informes i urgències

La proposta de Quantion no es va adjudicar. Però es va lliurar a temps i completa, amb l’arquitectura, els prototips i la guia d’estil que demanava el plec, i a mi em va obrir la porta als projectes següents de l’agència.

Fotografies de famílies i professionals de pediatria

Comparteix aquest projecte

Continua desplaçant-te per veure el següent cas pràctic.

PADLL