Disseny UX/UI per a webs, botigues en línia i aplicacions

Investiguem com fan servir el teu producte les persones, ordenem la informació, prototipem i provem abans de programar, i lliurem un sistema de disseny que el teu equip pot continuar fent servir. Accessible segons WCAG 2.2 AA des del primer esbós, i amb el mateix equip que després el construeix.

Explica’ns el teu producte Veure com treballem

2-3 clics Fins a la compra d’entrades al TNC
WCAG 2.2 AA Accessibilitat des del disseny
Des del 2009 Disseny i desenvolupament, mateix equip

01 · Recerca Marca, públic i competència
02 · Concepte Una idea que ordena
03 · Sistema Tipografia, color i components
04 · Prototip Navegable i provat
05 · Proves Amb usuaris reals
06 · Lliurament El teu equip l'usa des del primer dia
Cada prova afina el sistema

Scroll

Definició

Què és el disseny UX/UI?

El disseny UX/UI és la feina de definir com funciona un producte digital (UX, experiència d’usuari) i com es veu i s’usa cada pantalla (UI, interfície d’usuari). La UX decideix fluxos, estructura i contingut a partir del que necessiten les persones; la UI els converteix en components, tipografia, color i estats que s’entenen a la primera.

A la pràctica inclou recerca amb usuaris, arquitectura de la informació, wireframes i prototips navegables, disseny visual, un sistema de disseny amb els seus components i proves d’usabilitat. S’aplica a webs, botigues en línia, aplicacions mòbils i plataformes SaaS, i ben fet redueix errors, peticions de suport i desenvolupament refet.

Resum

Resum executiu

Què compres quan contractes disseny UX/UI i què t’estalvia.

El cost d’una mala experiència no apareix a cap factura: és al carretó abandonat, al formulari que ningú acaba, a les trucades a suport per fer una cosa que hauria de ser òbvia i a les setmanes de desenvolupament que es llencen quan una pantalla es redissenya després de programar-la. El disseny UX/UI porta aquestes decisions al principi, quan canviar-les costa un prototip i no un sprint.

Treballem amb recerca i dades reals (entrevistes, analítica, mapes de calor, proves amb usuaris), no amb opinions. D’aquí surt l’estructura, després els prototips que es proven i, al final, un sistema de disseny amb components, estats i regles perquè el producte creixi sense perdre coherència. L’accessibilitat WCAG 2.2 AA hi entra des del primer esbós: contrast, focus, mides de toc i ordre de lectura es dissenyen, no s’apedacen.

El que ens distingeix és que disseny i desenvolupament són el mateix equip. El disseny que aprovem és el que es construeix, i qui el va dissenyar revisa que es respecti. Així ho vam fer al Teatre Nacional de Catalunya, on el redisseny UX va deixar la compra d’entrades a 2-3 clics i va reduir un 37 % el LCP en mòbil.

-37 % LCP en mòbil després del redisseny del TNC
+35 % Reserves directes a Tamarit Beach Resort
+200 % Donacions en línia a Ampans

Què inclou

Què inclou el disseny UX/UI

Cada fase deixa un lliurable que pots fer servir, encara que el desenvolupament el faci un altre.

Recerca amb usuaris: entrevistes, anàlisi de l’analítica i dels mapes de calor, i revisió de la competència
Arquitectura de la informació: mapa de continguts, navegació, taxonomies i fluxos de les tasques clau
Wireframes i prototips navegables a Figma per validar els fluxos abans d’invertir en la part visual
Proves d’usabilitat amb persones reals sobre el prototip, amb troballes prioritzades
Disseny d’interfície a partir de la teva marca: tipografia, color, icones, estats i microinteraccions
Sistema de disseny: components, tokens i regles d’ús perquè el teu equip creï pantalles noves coherents
Accessibilitat WCAG 2.2 AA des del disseny: contrast, focus visible, mides de toc i ordre de lectura
Disseny responsive i mòbil primer: cada pantalla pensada per a mòbil, tauleta i escriptori
Acompanyament al desenvolupament: especificacions, revisió del que s’ha construït i ajustos amb dades després de publicar

Per què

Disseny UX/UI, disseny web i branding: què és cada cosa

Tres serveis que es toquen, amb objectius diferents.

El branding defineix qui ets: l’estratègia de marca, el logotip, la identitat visual i el to. El disseny web és el projecte d’una web corporativa que transmet aquesta marca i converteix visites en contactes. El disseny UX/UI va un pas més endins: com funciona un producte amb tasques de veritat, com comprar, reservar, donar-se d’alta, gestionar un compte o treballar cada dia en una plataforma. El necessites quan el problema no és la imatge, sinó que la gent no aconsegueix fer el que ve a fer. Si el que falla és la conversió d’una web que ja funciona, comença per CRO.

sistema-de-disseny/boto.json

// Un component, totes les seves regles

"boto-principal": {

"estats": ["normal", "hover", "focus", "desactivat", "carregant"],

"contrast_minim": "4.5:1",

"area_de_toc": "24x24 px com a mínim",

"focus": "visible, 3:1 sobre el fons"

}

Amb estats Components
WCAG 2.2 AA Accessibilitat
Provat Prototip

Claus

Què dissenyem

Productes on l’experiència decideix si es fan servir o no.

01
Webs amb tasques complexes

Agendes, cercadors, àrees privades, reserves o compra d’entrades. Al TNC vam redissenyar la navegació per agenda amb filtres i les fitxes d’espectacle amb una jerarquia clara (dates, repartiment, preus i botó de compra).
02
Botigues en línia i processos de reserva

Fitxes de producte, col·leccions, carretó i checkout. A Tamarit Beach Resort la UX mòbil porta la reserva en 3 passos, amb galeria i comparador d’allotjaments.
03
Aplicacions mòbils

Fluxos, navegació i components per a iOS i Android, respectant les convencions de cada sistema i amb mides de toc i estats pensats per al polze. Ho construïm a desenvolupament d’aplicacions mòbils.
04
Producte digital i SaaS

Panells, formularis llargs, permisos i ús diari intensiu. Ho fem a casa: Nexo, la nostra pròpia plataforma de CRM, projectes, facturació i control horari, la dissenyem i la fem servir cada dia.
05
Sistemes de disseny

Llibreria de components, tokens i documentació perquè diversos equips o proveïdors dissenyin i programin amb les mateixes peces, sense reinventar cada pantalla.
06
Auditories d’UX i d’accessibilitat

Revisió heurística, anàlisi de dades i proves amb usuaris sobre el que ja tens, amb una llista prioritzada de canvis. Si cal complir la normativa, hi entra el nostre servei d’accessibilitat web.

Com treballem

Com treballem un projecte d’UX/UI

Del que sabem dels teus usuaris a un disseny provat i a punt per construir.

01
Descobriment i recerca

Entrevistes amb el teu equip i amb usuaris, revisió de l’analítica, dels mapes de calor i de les consultes de suport. En surten els objectius, les tasques clau i els problemes a resoldre.
Segons l’abast
02
Arquitectura i fluxos

Mapa de continguts, navegació i fluxos de cada tasca clau. Decidim què va a cada pantalla i en quin ordre abans de dibuixar-la.
Segons l’abast
03
Prototip i proves

Wireframes i prototip navegable que provem amb persones reals. El que no s’entén es canvia aquí, quan costa poc.
Iteratiu
04
Disseny d’interfície i sistema de disseny

Disseny visual a partir de la teva marca, amb tots els estats de cada component i les regles d’accessibilitat WCAG 2.2 AA documentades.
Segons l’abast
05
Construcció i mesura

Acompanyem el desenvolupament (el nostre o el teu), revisem que el que s’ha construït respecti el disseny i mesurem amb dades què funciona després de publicar.
Continu

Per a qui

És per a tu?

El disseny UX/UI rendeix quan hi ha tasques que la gent ha de completar i dades per mesurar si ho aconsegueix.

Per a qui

Empreses amb una web o una botiga on la gent es perd, abandona o truca per fer una cosa que hauria de ser senzilla.
Equips que construiran una app o un SaaS i volen validar els fluxos abans de programar.
Productes que han crescut a base de pedaços i necessiten un sistema de disseny per tornar a ser coherents.
Organitzacions que han de complir accessibilitat (WCAG 2.2 AA, European Accessibility Act) i prefereixen dissenyar-la des del principi.
Equips de producte o de desenvolupament propi que necessiten dissenyadors amb criteri tècnic.

Per a qui no

Si només necessites una web corporativa senzilla que transmeti la teva marca: el teu servei és disseny web.
Si el que falta és la identitat de marca (logotip, colors, to): comença pel branding.
Si busques pantalles boniques sense temps per investigar ni provar amb usuaris: no et donaríem el que venem.

Lliurables

Què hi entra i què no

El que reps al final d’un projecte de disseny UX/UI.

Inclòs

Informe de recerca amb les tasques clau, els problemes detectats i la seva prioritat
Arquitectura de la informació i fluxos de les tasques clau
Prototip navegable a Figma i resultats de les proves d’usabilitat
Disseny de totes les pantalles acordades, en mòbil, tauleta i escriptori
Sistema de disseny: components amb els seus estats, tokens i regles d’accessibilitat
Fitxers de disseny editables i propietat de tot el que s’ha lliurat

No inclòs

Desenvolupament i programació (es pressuposta a part, amb el nostre equip o amb el teu)
Creació de marca i identitat visual des de zero (és un projecte de branding)

La prova

Disseny que es mesura en resultats

Al Teatre Nacional de Catalunya vam fer un redisseny UX centrat en tasques: la compra d’entrades va quedar a 2-3 clics, el LCP en mòbil va baixar un 37 % (de 3,8 a 2,4 s), les pàgines per sessió van pujar un 18 % i el web compleix WCAG AA. A Tamarit Beach Resort vam dissenyar una reserva mòbil en 3 passos sobre el seu motor de reserves propi, i les reserves directes van créixer un 35 %. A la Fundació Ampans el disseny inclusiu, amb WCAG 2.1 AA, va acompanyar un augment del 200 % en donacions en línia. I a TwoPoles el redisseny de fitxes de producte i col·leccions, mesurat amb CRO, va portar la conversió del 2,1 al 2,5 %.

2-3 Clics fins a la compra d’entrades (TNC)
3 Passos de la reserva mòbil (Tamarit)
+35 % Reserves directes (Tamarit)
5,0 Valoració a Clutch

Per al CTO

Resum per al CTO

Com encaixa el disseny amb l’enginyeria.

Dissenyem en components amb tots els seus estats (normal, focus, error, buit, carregant, desactivat) i amb tokens de color, tipografia i espaiat que passen tal qual al codi. Així el sistema de disseny i la llibreria de components parlen el mateix idioma i un canvi de marca no obliga a revisar pantalla per pantalla.

L’accessibilitat s’especifica en el disseny: contrastos de 4,5:1 en text i 3:1 en controls i focus, àrea de toc mínima, ordre de focus i semàntica de cada component. Després es mesura amb axe-core i lectors de pantalla, no a ull. I el rendiment també es dissenya: pes d’imatges, fonts i animacions que no comprometin les Core Web Vitals, com al TNC.

Tecnologies

Figma
Tokens de disseny
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Components amb tots els seus estats, no només l’estat ideal
Tokens de disseny que es traslladen al codi sense reinterpretar
Accessibilitat WCAG 2.2 AA especificada i mesurada amb axe-core
Rendiment tingut en compte des del disseny (imatges, fonts, animació)
Revisió del disseny sobre el que s’ha construït abans de publicar

Riscos i com els cobrim

Els riscos que evitem

El que sol sortir malament en un projecte de disseny.

01
Dissenyar segons l’opinió de qui mana més a la reunió

Mitigació
Cada decisió important es recolza en recerca, dades d’ús o proves amb usuaris, i queda documentada.
02
Un disseny preciós que després no es pot construir o es construeix diferent

Mitigació
Disseny i desenvolupament són el mateix equip: el disseny es valida amb criteri tècnic i revisem el que s’ha construït abans de publicar.
03
Accessibilitat afegida al final, a base de pedaços

Mitigació
Contrast, focus, mides de toc i ordre de lectura es defineixen al sistema de disseny i es mesuren amb axe-core.
04
Un producte que perd coherència a cada pantalla nova

Mitigació
Un sistema de disseny amb components, tokens i regles d’ús que el teu equip pot continuar fent servir sense nosaltres.

Tecnologies

Eines

Amb què investiguem, dissenyem i mesurem.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Tokens de disseny

Preguntes freqüents

Preguntes freqüents sobre el disseny UX/UI

El que més ens pregunten abans de començar.

Quina diferència hi ha entre UX i UI?

La UX (experiència d’usuari) decideix com funciona el producte: quines tasques resol, en quin ordre, amb quina estructura i quin contingut. La UI (interfície d’usuari) decideix com es veu i s’usa cada pantalla: components, tipografia, color, estats. Una bona UI sobre una mala UX continua sent difícil d’usar; per això les treballem juntes.

Què fa una agència de disseny UX/UI?

Investiga com fan servir el teu producte les persones, ordena la informació, dissenya i prova prototips, crea la interfície i un sistema de disseny, i acompanya el desenvolupament perquè el que es construeix respecti el que s’ha dissenyat. En el nostre cas, a més, el mateix equip el pot construir.

En què es diferencia del disseny web?

El disseny web és el projecte d’una web corporativa que transmet la teva marca i capta contactes. El disseny UX/UI se centra en productes amb tasques: botigues, reserves, àrees privades, apps o plataformes SaaS, amb recerca i proves amb usuaris. Molts projectes de disseny web inclouen UX; el que canvia és la profunditat.

Quant costa un projecte de disseny UX/UI?

Depèn del nombre de fluxos i pantalles, de quanta recerca i quantes rondes de proves calguin i de si necessites un sistema de disseny complet. No publiquem una tarifa única: després d’una primera sessió de descobriment et donem un pressupost tancat per fases. Si el que necessites és una web corporativa, el preu està publicat a disseny web: des de 4.500 €.

Quant temps triga?

Depèn de l’abast: una auditoria d’UX d’un flux concret no és el mateix que el disseny d’un SaaS sencer. Com a referència real, el redisseny integral del TNC, amb disseny i desenvolupament, va durar 8 mesos. Després del descobriment et donem un calendari amb fites.

Feu proves amb usuaris reals?

Sí. Provem els prototips amb persones que s’assemblen als teus usuaris abans de programar, i després de publicar mesurem amb analítica i mapes de calor. El que no s’entén es canvia al prototip, que és on canviar-ho costa menys.

Què és un sistema de disseny i el necessito?

És la llibreria de components (botons, formularis, targetes, taules), amb els seus estats, tokens i regles d’ús. El necessites si el teu producte té moltes pantalles, si diverses persones o proveïdors hi dissenyen i programen, o si ha de créixer. Per a una web petita n’hi ha prou amb una guia d’estil.

El disseny compleix WCAG 2.2 AA?

Sí, de sèrie. Contrast suficient, focus visible, mides de toc, ordre de lectura i textos alternatius es defineixen en el disseny i es mesuren després amb axe-core i lectors de pantalla. Si necessites una auditoria formal o complir l’European Accessibility Act, ho fem amb el nostre servei d’accessibilitat web.

Podeu dissenyar i que ho desenvolupi el meu equip?

Sí. Lliurem fitxers editables, sistema de disseny i especificacions, i acompanyem el teu equip durant el desenvolupament. Si prefereixes que ho construïm nosaltres, disseny i desenvolupament són al mateix equip, sense traspassos.

Dissenyeu aplicacions mòbils?

Sí: fluxos, navegació i components per a iOS i Android, respectant les convencions de cada sistema. Si també necessites construir-la, mira desenvolupament d’aplicacions mòbils.

Següent pas