Avui et portem un post diferent. Et deixarem entrar una mica a Trilogi perquè coneguis com treballem els dissenys de les botigues online. Explicarem de manera resumida quins aspectes tenim en compte per aconseguir un bon disseny eCommerce. Veuràs les diferents fases que seguim fins arribar al resultat final.
Resum
No et volem avorrir! Així que només seran unes pinzellades que t’ajudin a entendre com prenem les diferents decisions de disseny. Comencem?
01 – Introducció
El disseny eCommerce, o disseny de botigues online, té com a finalitat solucionar els diferents problemes que pugui tenir un particular al voltant de la funcionalitat del producte, especialment en el comerç electrònic. I, com a dissenyadors i dissenyadores, oferirem totes les opcions possibles que t’ajudin a assolir els teus objectius. El resultat final serà la unió entre l’estètica i la funcionalitat. Una experiència visual atractiva, coherent i pràctica.
Cada projecte de disseny web començarà amb un procés de disseny. Ens ajudarà a detallar els passos que cal seguir i ens guiarà fins al resultat final. Vegem com es crea una botiga online!
02 – Recerca i documentació
Per començar, és molt important fer una recerca inicial que ens doni prou coneixement sobre l’empresa, el nostre client directe i l’usuari final, conèixer els objectius que es volen assolir i investigar el mercat professional en què es mou.
Punts clau per iniciar el disseny eCommerce:
- Empresa
És molt important saber com penses, com vols mostrar el teu producte i com vols que se’t reconegui. - Objectius
Per enfocar bé la nostra estratègia de disseny hem de saber què vols aconseguir, quin missatge vols transmetre, si serà un B2B o un B2C… En qualsevol cas, en tractar-se d’un eCommerce, l’objectiu principal serà augmentar la taxa de conversió (és a dir, vendre!). - L’usuari
Gairebé més important que l’empresari, sobretot hem de conèixer les necessitats de l’usuari que navegarà per la botiga. Tingues en compte que serà ell qui generarà els beneficis. - La competència
Un altre punt important és analitzar la competència: què fa, què no fa i, sobretot, com es mostra al mercat per destacar respecte de la resta. Visualment, cada sector té uns colors atribuïts i una manera més o menys agressiva de destacar (sí, els colors influeixen en el nostre estat emocional i en la predisposició a comprar un producte!).
“… Si es tracta d’una botiga online, el seu objectiu principal serà augmentar la taxa de conversió.”
03 – Definir conceptes
Un cop hem aprofundit en la recerca, concretem els aspectes més importants i actuals que hem de tenir en compte. Les botigues online no en són cap excepció.
Com que les noves tecnologies tenen cada cop més impacte en la nostra cultura, cal treballar noves estratègies i directrius per mantenir-les actualitzades i preparades per a tot tipus de dispositius.
El concepte de disseny responsive o disseny adaptatiu, les bases específiques del framework Bootstrap (amb què treballem a Trilogi), la filosofia Mobile first, la usabilitat i l’experiència d’usuari (UX), l’aplicació de tècniques relacionades amb el SEO On Page…
Així doncs, es pot dir que totes són pràctiques must have. Elements imprescindibles que hem d’incorporar correctament en tots els nostres dissenys eCommerce, tant si són nous com si són redissenys.
04 – Idear i plantejar les primeres idees
És hora de plantejar les primeres idees de disseny i crear els esbossos o wireframes. Aquests dibuixos ens ajudaran a entendre i recordar totes les idees que vagin sorgint durant el procés
En resum, què tenim en compte:
- Imatge corporativa de la marca: definim com s’apliquen les tipografies, els colors i els estils gràfics. Ho farem a partir del manual corporatiu de l’empresa o bé segons la nostra proposta de disseny.
- Definim les funcionalitats més importants segons els objectius marcats.
- Determinem quins elements de contingut hi apareixeran i quins seran els més importants.
- L’arquitectura de la informació (AI). Consisteix a organitzar i prioritzar el contingut esmentat de manera descendent perquè sigui tan comprensible com sigui possible. És a dir, de més a menys rellevància.
- Pensem com s’adaptaran tots els elements a les diferents pantalles (mòbil, tauleta i escriptori). La tecnologia responsive o adaptativa.
- Usabilitat i experiència d’usuari (UX). A grans trets, és el conjunt de tècniques i coneixements que permeten que l’usuari tingui una bona experiència del producte, tant a nivell físic com emocional. Que sigui fàcil i intuïtiva.
Ex.: saber com pensen, si aconsegueixen llegir i trobar tot el que busquen, que la pàgina tingui una bona accessibilitat, que la velocitat de càrrega sigui òptima, tenir un cercador de productes eficient, una ubicació clara del menú de categories, un aspecte visual clar i atractiu…
En general, són molts els aspectes que tenim en compte a l’hora de fer un disseny eCommerce. Però el que sembla especialment important és això: com més feliç (o menys estressat) se senti un usuari, més probabilitats hi haurà que torni a entrar a la botiga online. En conseqüència, augmentaran les possibilitats de compra i pujarà la taxa de conversió (és a dir, més vendes!).
05 – Propostes de disseny: mock-ups
És hora de posar-nos a treballar de debò (en realitat, és la fase d’experimentació més creativa. Ens trenquem el cap —ens posem a prova— buscant solucions noves i innovadores. Els més tècnics en diran la fase: a produir!).
Plasmem totes les nostres idees en un arxiu d’imatge (.jpg) que mostra la proposta de disseny. També representem com reaccionarà la pàgina a les accions dels usuaris (a quin color canviarà un botó quan hi passem per sobre, com es mostrarà el desplegable de categories, com es veuran els enllaços, etc.).
Aquest tipus de document s’anomena mock-up perquè és una representació més avançada del disseny gràfic (gairebé com el disseny final), però sense interacció ni navegació reals.
Què s’hi planteja:
- Imatges i continguts. Les imatges poden ser exemples i el text pot ser “text fals” (el famós text Lorem ipsum ).
- La paleta de colors
- Les tipografies
- La iconografia
- Les dimensions dels continguts i serveis
- Hi afegim la nostra creativitat, sense oblidar la funcionalitat!
Aquest procés pot ser més o menys llarg segons la complexitat del projecte. Enviem tots els arxius necessaris perquè s’entengui com funciona tot el disseny eCommerce. Esperem rebre el feedback i s’analitzen totes les impressions que hagi generat.
En general, aquesta fase consisteix en un “tu a tu” continu entre dissenyador i client. El Project Manager gestionarà el projecte per facilitar l’acord. Com a resultat, cada disseny de cada pàgina i versió que presentem s’haurà d’aprovar i acceptar. Finalment, arribats a aquest punt, tanquem la fase de disseny pròpiament dita.
06 – Validar i verificar la funcionalitat de la botiga
Però no s’acaba aquí! Gairebé hem acabat…
També generem i facilitem tot el material que pugui necessitar el tècnic per començar la seva feina. Ens agrada cuidar els projectes amb molt d’afecte i volem col·laborar en qualsevol problema que pugui sorgir.
Per aquest motiu, fem un seguiment del procés per plantejar solucions i/o resoldre tots els dubtes. És possible que sorgeixin situacions que no s’havien previst inicialment (malauradament, aquestes coses solen passar més del que ens agradaria!).
Un cop la botiga està “acabada” i s’ha pujat la major part o la totalitat del contingut real, fem un últim pas: revisió d’usabilitat (UX), errors i anàlisi d’efectes i transicions (un document molt esperat que es pot allargar tant o tan poc que per això ens temen i ens estimen alhora).
Tan aviat com s’apliquen tots els ajustos necessaris, només queda esperar! Arriba el dia de l’obertura, comencem a navegar i gaudim de la nostra bonica feina!
07 – Trilogi, treballem en equip
Però no tot és gràcies al disseny (evidentment). Obrir una botiga online requereix molta participació i organització. La col·laboració entre tots els departaments és fonamental. Sense cap d’ells, no podríem veure el nostre esforç en directe!
Espero que t’hagi agradat conèixer el nostre dia a dia i que t’animi a endinsar-te una mica més en aquest món creatiu. Al departament de Disseny ens encanta que els clients gaudeixin de la nostra feina i que acabin amb un somriure d’orella a orella. Per això, si vols més informació, no dubtis a contactar amb nosaltres. T’assessorarem amb molt de gust.
