Unir a artistes i dissenyadors centrant el focus en el talent emergent
Disseny d'App
Blanc!
*Blanc! és un festival de disseny, creativitat i innovació dirigit per i per a dissenyadors, que aposta pel disseny emergent i en el qual durant tres dies, es donen conferències, masterclasses i activitats al voltant del món del disseny. Partint de les necessitats plantejades en el brífing facilitat pel festival, s’ha donat una resposta de disseny tenint en compte els requisits de negoci i d’usuari plantejats en l’informe.
Tipus de projecte
Arquitectura d’informació, disseny de navegació i wireframes
Rols
- UX designer
- UI designer
Àmbit
Acadèmic
Any
2020
Resum
Investigació
Brief de negoci
- Requisits de negoci
- Requisits d'usuari
- Fitxes User Persona
Objectius
Unir a artistes i dissenyadors
Destacar el talent emergent
Crear una App creativa i útil
Interacció mitjançant la veu
Accions
Analitzar els User Persona
Conceptualitzar la interacció
Definir el
contingut
Dissenyar la navegació
Dissenyar la interacció
1
Conceptualizació
Partint de les fitxes User Persona i dels requisits facilitats pel festival, es van desenvolupar sis escenaris ficticis en els quals es va narrar la relació de l’usuari amb el producte des del punt de vista de l’usuari.
Es van treballar una sèrie de metodologies englobades en el marc del Disseny Centrat en l’Usuari
Anterior
Següent
Escenaris i User Journeys
Conceptualitzar la interacció mitjançant escenaris va ajudar a generar situacions i contextos d’ús del producte i amb aquests com a base, es van mapejar les interaccions dels usuaris respecte al producte mitjançant User Journeys. Això va permetre obtenir oportunitats de disseny, les quals es van traduir en una sèrie de requisits de producte amb els quals haurà de comptar l’App.
Es van desenvolupar sis escenaris ficticis en els quals es va narrar la relació de l’usuari amb el producte
Es van desenvolupar sis escenaris ficticis en els quals es va narrar la relació de l’usuari amb el producte
2
Etiquetatge
Una vegada conceptualitzada la interacció i després de definir els requisits del projecte es va elaborar un inventari de continguts del producte com a fase prèvia a l’etiquetatge.
Inventari de continguts
L’inventari recopila la informació recollida en les fases prèvies de recerca i definició del problema i reuneix les categories, les pàgines de contingut, així com les funcionalitats i eines amb les quals comptarà l’App.
Card Sorting
Categories
Per a les categories els usuaris van organitzar les targetes en grups lògics. Les proves es van realitzar en remot. Els parells de categories amb més afinitat es van agrupar en tres zones que podrien correspondre a un espai personal, informació sobre el festival i informació sobre les persones que es reuneixen en ell.
Funcionalitats
Les agrupacions de les funcionalitats van resultar una mica més difuses, però sí que es pot veure com algunes funcionalitats afins queden agrupades, com les de cerca i exploració i les destinades a socialitzar. En el dendograma s’identifiquen clarament tres grans grups que van proporcionar indicadors de com l’usuari aglutina les eines.
Els Card Sortings van servir per a obtenir un etiquetatge i organització concordes amb el model mental de l’usuari
Una vegada conceptualitzada la interacció i després de definir els requisits del projecte es va elaborar un inventari de continguts del producte com a fase prèvia a l’etiquetatge.
Els Card Sortings van servir per a obtenir un etiquetatge i organització concordes amb el model mental de l’usuari
Inventari de continguts
L’inventari recopila la informació recollida en les fases prèvies de recerca i definició del problema i reuneix les categories, les pàgines de contingut, així com les funcionalitats i eines amb les quals comptarà l’App.
Card Sorting
Categories
Per a les categories els usuaris van organitzar les targetes en grups lògics. Les proves es van realitzar en remot. Els parells de categories amb més afinitat es van agrupar en tres zones que podrien correspondre a un espai personal, informació sobre el festival i informació sobre les persones que es reuneixen en ell.
Funcionalitats
Les agrupacions de les funcionalitats van resultar una mica més difuses, però sí que es pot veure com algunes funcionalitats afins queden agrupades, com les de cerca i exploració i les destinades a socialitzar. En el dendograma s’identifiquen clarament tres grans grups que van proporcionar indicadors de com l’usuari aglutina les eines.
3
Després de l’anàlisi de les dades obtingudes amb els Card Sorting i amb el contingut del producte ja definit, es va elaborar un arbre de continguts com a fase prèvia al disseny de la navegació.
Arbre de continguts
L’arbre de continguts és útil per a esquematitzar l’organització de la informació així com per a jerarquitzar apartats
L’arbre de continguts és útil per a esquematitzar l’organització de la informació així com per a jerarquitzar apartats
L’arbre de continguts ofereix una aproximació visual dels continguts del sistema i és útil a l’hora de dissenyar la navegació mitjançant els diagrames de flux.
Diagrames de flux
Es va realitzar un diagrama de flux per cada tasca plantejada en els escenaris i User Journey. Aquesta metodologia destaca per la seva utilitat a l’hora de detectar errors en la navegació o en l’estructura plantejada en l’arbre de continguts. Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema, la qual cosa va permetre posar especial atenció en com traçar la navegació en aquest punt.
Es va realitzar un diagrama de flux per cada tasca (…) Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema
Diagrames de flux
Es va realitzar un diagrama de flux per cada tasca plantejada en els escenaris i User Journey. Aquesta metodologia destaca per la seva utilitat a l’hora de detectar errors en la navegació o en l’estructura plantejada en l’arbre de continguts. Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema, la qual cosa va permetre posar especial atenció en com traçar la navegació en aquest punt.
Es va realitzar un diagrama de flux per cada tasca (…) Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema
Diagrames de flux
Es va realitzar un diagrama de flux per cada tasca plantejada en els escenaris i User Journey. Aquesta metodologia destaca per la seva utilitat a l’hora de detectar errors en la navegació o en l’estructura plantejada en l’arbre de continguts. Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema, la qual cosa va permetre posar especial atenció en com traçar la navegació en aquest punt.
Es va realitzar un diagrama de flux per cada tasca (…) Es va detectar que els processos de més complexitat són aquells que tenen a veure amb el punt d’entrada de l’usuari en el sistema
4
Prototips I
Una vegada definida la navegació arriba el moment de fer els prototips, començant per esbossos ràpids a mà per a acabar amb prototips de baixa i alta fidelitat.
Sketchings
Una vegada definida l’organització i navegació, es va generar d’una primera aproximació de l’aspecte visual de l’aplicació mitjançant el dibuix d’esbossos ràpids. Els esbossos a mà permeten fer modificacions ràpides en el disseny sense repercutir en costos o temps.
Els esbossos a mà ofereixen el gran avantatge de poder fer iteracions ràpides i de baix cost
Anterior
Següent
Wireflows
Després dels esbossos ràpids realitzats amb els sketchings es va obtenir una aproximació del disseny, que posteriorment va ser refinat mitjançant prototips de baixa fidelitat, en els quals es van definir detalls addicionals quant a disseny. Així mateix, mitjançant els wireframes es va elaborar el flux de navegació o wireflows, els quals van servir per a definir el prototip interactiu.
Partint dels wireframes es va elaborar el flux de navegació o wireflows, els quals van servir per a definir la navegació del prototip interactiu
5
Prototips II
Després de tenir clars els wireframes i els seus fluxos de navegació, es van prendre com a base per a generar un prototip interactiu de baixa fidelitat.
El prototip recull les tasques i funcions bàsiques plantejades al llarg de la fase de generació
Prototip interactiu
Trobem un procés d’inici de sessió i d’alta com a punt d’entrada, seguit d’un assistent de creació de porfoli i un sistema de navegació mitjançant una doble barra inferior fixa, des de la qual es poden explorar les principals seccions i subcategories.
També s’ha implementat un sistema d’agenda d’esdeveniments i un altre de sol·licitud de contacte en els perfils d’usuari la qual cosa permet generar una xarxa de contactes i poder connectar a artistes i dissenyadors.
Conclusions
Resultats
Compleix els requisits de negoci
L’App és útil per a l’usuari
Permet formar una xarxa social
Disseny simple i minimalista
Després del procés de treball es va obtenir un artefacte que complia amb els requisits de negoci i amb les necessitats dels usuaris. Es va trobar a faltar l’execució de més metodologies amb usuaris implicats, com per exemple els tree testings, proves que jo hauria afegit com a fase prèvia als diagrames de flux, ja que permeten validar si l’estructura plantejada en l’arbre de continguts és la més adequada, però per raons de temps de lliurament no va ser possible la seva realització.
Quant al visual, es va optar per un disseny simple i minimalista, seguint amb la línia d’estil del festival i prenent com a font la seva pàgina web. Cal dir que el disseny en alta fidelitat (que no forma part del projecte) hauria de comptar amb detalls subtils d’aparença, efectes o ombrejos, ja que la intenció seria la de mantenir la sobrietat i la neteja en el disseny.
El següent pas lògic una vegada realitzat el prototip en alta fidelitat seria el d’avaluar la proposta amb usuaris mitjançant tests d’usabilitat, i amb les dades qualitatives i quantitatives a la mà, iterar en el disseny a fi d’implementar millores d’usabilitat.
