Branding, UX y Drupal: Catálogo de Espectáculos Flamencos de Andalucía

Rojomorgan Anuncio del catalogo de flamenco
Branding, UX y Drupal: Catálogo de Espectáculos Flamencos de Andalucía

Hace escasos días se ponía en producción de forma abierta y oficial el Catálogo de Espectáculos Flamencos de Andalucía, una plataforma online en la que hemos tenido la suerte de participar aportando todo nuestro Know-How en cuanto a usabilidad, experiencia de usuario y diseño en proyectos web. Y por supuesto cocinado con Drupal. Un nuevo orgullo poder ver funcionando a uno de nuestros “hijos” tecnológicos con el que tuvimos la oportunidad de crecer mucho a nivel profesional ya que el proyecto resultó ser muy ambicioso y requirió dar lo mejor de nosotras para llevarlo a cabo. 

Rojomorgan Presentación catalogo de flamenco

Presentación del Catálogo de Espectáculos Flamencos de Andalucía

Hoy por hoy y tras el lanzamiento oficial, estamos más que preparados para exponer nuestra visión acerca de esta herramienta que nació con la intención de servir de base de datos visual y centralizada de todos los espectáculos flamencos que se producen en Andalucía. ¿Su Target inicial? Aquellos programadores de espectáculos tanto nacionales e internacionales, personas que trabajan cerrando festivales, programas y actuaciones relacionadas con el flamenco y que por primera vez podrían contar un único directorio para localizar producciones, artistas y representantes de estos de una manera sencilla e intuitiva. Podría parecer poco, pero ahora pasaremos a exponernos como ha sido el proceso de trabajo para poder construir la plataforma. Parece sencilla ¿no? pues alucinad con todo el trabajo que algo así puede llegar a tener detrás…

Antecedentes…¿Cómo empieza todo? una llamada, una propuesta, una convocatoria y en resumidas cuentas un planteamiento de proyecto que supone verdaderamente un reto. Los proyectos no son necesariamente un asunto de tecnología o de conceptualización digital. Normalmente van a más allá. Suelen ser una cuestión de empatía, de análisis de necesidades, de testeo, de lenguaje, y por supuesto, de entrar a comprender el universo mental tanto de tu cliente como de los usuarios y usuarias potenciales. Ese es el gran reto: no funcionar como una caja negra de inputs y outputs donde se procesa información y se devuelve un sistema software que normalmente no coincide con las imágenes mentales que el cliente final se haya podido hacer. Es algo que más allá: es que seamos capaces de generar un equipo combinado e ir caminando de la mano para encontrar una solución satisfactoria para todas las partes. Ese es el gran reto. A eso jugamos.

Tenemos la ventaja de contar con software maduro y más que preparado (Software libre, por supuesto), metodologías y marcos de trabajo orientados al aporte de valor (Agile, Scrum,Kanban, XP, etc) y una filosofía muy específica para el desarrollo de producto (MVP, liberar rápido y liberar a menudo, fracasar rápido y fracasar barato). Estas son nuestras claves y son los principios con los que afrontamos este gran reto: El Catálogo de Espectáculos Flamencos de Andalucía.

Un proyecto realizado mano a mano con el Instituto Andaluz del Flamenco, la Agencia Andaluza de Instituciones Culturales y la Consejería de Cultura. Una apuesta, un gran reto. 

Primera parte: Conceptos y Fundamentos

Para empezar, una vez que fuimos seleccionamos para la ejecución de este proyecto, empezamos a  formularnos una serie de preguntas. Nuestros know-how abarca zonas específicas de las posibles dimensiones técnicas del proyecto pero ¿Qué había de las dimensiones humanas? ¿Qué sabíamos acerca de los potenciales usuarios de la plataforma? ¿Qué sabíamos sobre los visitantes? es más ¿Qué sabíamos nosotros acerca del mismo sector del flamenco? muchos interrogantes y por supuesto, mucho trabajo para reducirlos.  

Estaba claro que teníamos que trabajar en tres direcciones: en primer lugar hacia los usuarios clave de la plataforma (profesionales del flamenco que quisieran dejar registro de su trabajo en la web), luego los usuarios que podrían sacar provecho (programadores, técnicos y profesionales de la gestión de eventos asociados al flamenco) y luego y de manera no menos importante, acerca del servicio que debíamos implementar: un catálogo.

Primero

Una de las cuestiones fundamentales en este subapartado una vez que comenzamos era conocer personalmente el perfil de estos usuarios, su nivel medio de alfabetización digital y comprobar si la hipótesis fundamental del proyecto podría llegar a cumplirse. Realmente, ¿Valorarían positivamente los profesionales del flamenco una plataforma digital que centralizase la información?
Por supuesto para poder conectar bien en las conversaciones, antes teníamos que salir al encuentro de su universo mental. Teníamos que conocer el flamenco. Aprender a identificarlo. Saber hablarlo. Todo con el fin de poder capturar cuanto antes el verdadero espíritu del proyecto. 

Así que en primer lugar, era importante ganar un background cultural suficiente. De todos los libros, artículos y folletos que procesamos, recomendaríamos a día de hoy tres obras fundamentales con las que se puede hacer una rápida inmersión en toda esta ancestral cultura. Nuestros recomendados:

1- Una historia del flamenco, de José Manuel Gamboa. Editado por Espasa.
https://www.amazon.es/Una-historia-flamenco-ESPASA-FORUM/dp/8467036877
Este libro está genial y es bastante original. En lugar de remontarse a doscientos años atrás para empezar el relato, lo hace a la inversa: comienza actualmente (bueno, hace unos años) y va desbrozando las conexiones hasta viajar directo a las raíces. Es una buena biblia del flamenco de estilo novelado escrita por un mítico crítico musical.

2- Guía del flamenco, de Luis López Ruiz. Editada por Akal. 

https://www.amazon.es/Gu%C3%ADa-del-flamenco-B%C3%A1sica-Bolsillo/dp/8446026708
Buen aporte para conocer mejor el léxico y realizar una aproximación al lenguaje y terminología. Muy bien descrito y presentado en el formato típico de los diccionarios de bolsillo de la editorial Akal.

3- Historia social del flamenco, de Alfredo Grimaldos. Editado por Península.

https://www.amazon.es/Historia-social-del-flamenco-Atalaya/dp/849942046X
A lo largo de unos dos siglos de historia (documentada, claro), el flamenco no ha sido tanto una cuestión étnica (cantaores gitanos y payos) si no más bien un asunto de clases sociales (y específicamente de clases pobres). Salvando las distancias con la figura actual del “Flamenco-Rock-Star”, la necesidad de cantar letras duras desde lo “jondo” se entiende mejor al conocer su contexto social. Una obra necesaria para obtener ese mencionado contexto.

Y vosotros pensaréis…¿A que viene hablar de libros en un artículo sobre un proyecto web? ¿Se les ha ido la pinza?...

Lección 1: Necesitas comprender el universo mental de tu cliente. Si no, es probable que tengas mil problemas a la hora de ejecutar la traslación de sus necesidades al plano online. 

Segundo

Sobre los programadores de flamenco, cabía también realizarse mil preguntas complementarias. Además de las básicas, necesitábamos saber cómo era su trabajo, que recursos informáticos usaban para sus tareas, como localizaban la información que necesitaban en cada momento y por supuesto, que características debería tener la herramienta de trabajo ideal para ellos. 

Para extraer toda esta información realizamos un circuito de entrevistas personales donde planteamos un guión previo y definimos un calendario de encuentros con profesionales de la programación, técnicos especializados y personal del Instituto Andaluz de Flamenco.

Articulamos un guión que de manera estructurada debería darnos como respuesta ese feedback que estábamos buscando sobre las verdaderas necesidades de ese público potencial: como trabajan, que necesitan, que nivel digital tienen, que esperarían de la plataforma...en total treinta y ocho preguntas organizadas en ocho bloques conceptuales que una vez recopiladas, ensambladas, resumidas y analizadas nos permitió extraer una serie de conclusiones de alto valor para el proyecto.

¿Para que sirven esta información y las conclusiones obtenidas? Entre otras cosas, además de resolvernos piezas fundamentales del gran mapa de este proyecto, también nos permiten empezar a trabajar con el target del proyecto de manera más particularizada. Sin ir más lejos, podemos hacer un trasvase de datos particularizados para empezar a definir de manera visual a nuestro público objetivo, por ejemplo, usando la técnica "Personas". La técnica de diseño de  personas o personajes es de gran utilidad a la hora de diseñar productos satisfactorios. Esta herramienta permite alinear las expectativas y necesidades del producto de todos los implicados en el desarrollo.

Estos implicados son tanto el core team del producto, como los stakeholders  y los hippos. Además,  al emplear personajes se evita que se produzcan desviaciones de los objetivos de diseño del producto. Solo por lo anteriormente expuesto, la técnica de personajes ya debería ser obligatoria en cualquier desarrollo. 

Los personajes forman parte de la táctica del desarrollo, mientras que los clientes potenciales son un elemento estratégico del producto. La idea principal es que los personajes no representan a un usuario en particular como tal, sino que se componen de características de muchos de los potenciales usuarios. Gracias a los datos obtenidos y a esta técnica, ya pudimos empezar a modelar a nuestros "Personajes":

Ejemplo de modelado de usuarios bajo la técnica Personas

 

Lección 2: Necesitas comprender con la mayor exactitud posible quien forma parte del target y que características tiene.

Tercero

¿Un catálogo? ¿Qué es realmente un catálogo? ¿Qué funciones elementales debe tener? ¿Cuáles son las características comunes de los catálogos online más visitados del mundo?
Además, ¿Había ya hecho algo parecido? ¿Alguién se había puesto a trabajar antes con algo así?
Bien, pues a continuación nos pusimos a recopilar nuestras conclusiones sobre estas preguntas. Básicamente todos y todas usamos diariamente “catálogos”, es decir, plataformas online de información modelada en unidades conceptuales facilmente localizables (o deberían serlo) mediante sistemas de búsqueda y debidamente categorizadas. Todos nos movemos a través de Amazon, de Ebay o de la plataforma web de cualquier supermercado. Ahí tendrían que estar las claves que necesitamos validar como hipótesis “de negocio” de la herramienta.

Tras investigar algunos catálogos online de máxima referencia, fuimos capaces de extraer algunas conclusiones para incorporarlas al gran mapa de este proyecto:

    

Pero todavía quedaba otra dimensión importante: la de la naturaleza de la información en sí misma. Para esta parte, organizamos el trabajo de la siguiente manera. Por un lado, un análisis de comparables para extraer algunos factores comunes de casos de éxito de catálogos online.
Por otro, un análisis heurístico de portales web de naturaleza similar, es decir, un cruce de análisis heurístico y análisis de comparables para cotejar las características de distintos sitios web y ver como podrían mejorarse a partir de nuestro particular ejercicio de Benchmarking. 

Un momento...rebobinemos ¿Qué es un análisis heurístico? (artículo muy recomendable de Torres Buriel sobre el concepto)
Para aquellos lectores no iniciados en la consultoría web, podemos decir que (básicamente) consiste en un sistema de evaluación de interfaces y procesos de una plataforma, una combinación de ejercicios a realizar teniendo como base los criterios de interacción Persona - Ordenador, con lo que se suele articular un guión de comprobaciones para chequear de manera ponderada la implementación de los objetivos de negocio de cada plataforma que se revisa, con el objetivo de terminar el proceso extrayendo una serie de conclusiones que se deriven en un set de propuestas de mejora.

¿Todo bien ahora? bueno, pues nuestro análisis heurístico incluía cuestiones específicas acerca de diferentes apartados tales como:

 

  1. Identidad e Información
  2. Lenguaje y Redacción
  3. Rotulado
  4. Estructura y Navegación
  5. Lay-Out de la Página
  6. Búsqueda
  7. Elementos Multimedia
  8. Ayuda
  9. Accesibilidad

Diseñamos una valoración, sometimos a una serie de portales web a nuestro escrutinio y extrajimos conclusiones de alto valor para el proyecto:

Lección 3: No dejes de investigar que hay hecho en ese sector ni comparar portales web con objetivos parecidos, aprendiendo tanto de las cosas que están bien hechas como de las que no.

Segunda parte: Desarrollo de marca

Dentro del alcance del proyecto se encontraba la tarea de modelar una identidad reconocible e independiente del catálogo de espectáculos flamencos de Andalucía. Así que no solo había que construir una herramienta si no que como se dice ahora usando cierto palabro, también había que “brandearla”. Bien. 

Nos pusimos manos a la obra recopilando información y preparando un Briefing fiable y útil. Una vez que estuvo validado por todas las partes, comenzamos el proceso creativo. Teníamos que salir de los estándares clásicos y salirnos un poco de la representación formal del flamenco en el entorno figurativo y en el entorno simbólico. Crear algo que fuese más"cosmopolita", más maduro y que tuviese la capacidad de envejercer realmente bien.

Realizamos varias propuestas gráficas pero desgraciadamente, a veces por muy cerrado que quede un briefing, se hace necesario volver a iterar. Estas fueras algunas de nuestras propuestas gráficas:

Una de las propuestas iniciales para el branding del Catálogo de Espectáculos Flamencos de Andalucía

 

Sin embargo, empezamos a trabajar apuntando a la actualización de elementos clásicos. Trabajando con formas geométricas elementales, podíamos generar figuras evocadoras que permitiesen una doble lectura bastante interesante. Así fue como nuestro director de arte y responsable creativo comenzó los trabajos de prospección con formas y figuras para este proyecto, hasta que encontró un juego visual realmente interesante: trabajando con cuadrados, opacidades y movimientos de rotación, podíamos generar una figura a medio camino entre el clásico abánico (un elemento habitual en el flamenco) y la representación evocativa de un verdadero catálogo físico con sus páginas abiertas y en movimiento. La idea gustó mucho, fue aceptada por la organización cliente y a partir de ahí teníamos ya un camino por el que transitar.

 

Seguimos iterando hasta dar con una propuesta específicamente validada y dar el siguiente paso, encontrar el color representativo de la nueva marca del proyecto:

Y a partir de ahí pudimos seleccionar una versión del logotipo que incluiría a partir de ahora el color corporativo del catálogo y enfocar un adecuado desarrollo de marca. Ya teníamos la base para empezar a trabajar sobre diferentes aplicaciones y soportes. Ya teníamos otra pieza del gran mapa.

 

Tercera parte: Usabilidad e implementación

Imaginaos que llega una fase en la que tenemos todas las partes anteriores resueltas y consensuadas. Tenemos un background cultural suficiente como para situarnos dentro del mundo del flamenco y comprender sus bases, sus retos e incluso su slang.

Hemos trabajado codo con codo con profesionales del sector, del lado artístico al lado organizativo, para saber que necesitan, en que herramienta se apoyarían y extraer una información lo más precisa posible para el diseño de nuestro producto. Tenemos varios sets de ideas, comentarios, anotaciones y peticiones explícitas que ocupan documentos digitales en nuestros discos duros pero además cartulinas, folios y postits en nuestras paredes. El target nos habla desde muy cerca y nosotros escuchamos atentamente.

Tenemos unas claves extraídas de otros modelos de catálogos online para tener en cuenta en nuestro proyecto y que consideramos que deben ser de obligado cumplimiento. Contamos también con una identidad clara y definida para la herramienta. 

Prácticamente ya ha llegado el momento de empezar a modelar, proponer e iterar sobre el asunto.

Primero: análisis de comparables

Al igual que hicimos en el primer análisis de comparables para valorar los aspectos principales de la usabilidad, ahora volvemos a realizar otro algo más abstracto para ponderar los siete aspectos de Morville. En el contexto web, Morville (2004) propone el análisis de la experiencia del usuario en base a siete aspectos o propiedades que debe cumplir un sitio web:

1. Útil ¿Resulta de utilidad para el usuario?
2. Usable ¿El site es cómodo y amigable en cuanto a uso?
3. Deseable ¿Motiva y atrae a la navegación?
4. Encontrable ¿La información es fácil de localizar dentro del site?
5. Accesible ¿Cumple el site con requisitos de accesibilidad web?
6. Creíble ¿El site es capaz de generar una sensación de buena reputación en los
usuarios?
7. Valioso ¿Se aporta valor en los contenidos del site?

Resultados del análisis de comparables bajo los siete aspectos de Morville

Segundo: Lógica de navegación

En base a todas las piezas que ya hemos reunido y en especial a la información y conclusiones con las que ya podemos contar acerca del posible uso, perfiles de usuarios y características que debe cumplir la plataforma, empezamos a plantearnos los modelos de rutas (caminos de entrada y salida del sitio web) y las acciones que pueden acometerse a lo largo de todo el camino por la plataforma.

En función a esos usuarios que modelamos anteriormente mediante la técnica “Personas”, desarrollamos lo que se llama “Historias de usuario” es decir, la definición esquemática en la que un usuario debe interactuar con la plataforma. Esta es una técnica muy intuitiva y útil para trazar todo el campo de lo posible aplicado a nuestra plataforma, ya que de un modo muy elemental, con todos los casos de uso parametrizados bajo expresiones “El usuario debe” - “El usuario recibe” se puede modelar el funcionamiento conceptual de la plataforma. Además es una técnica que puede combinarse bastante bien con otras más clásicas como la toma de requisitos (funcionales, de información, etc) de nuestra plataforma.

 

En nuestro caso, tras realizar  convenientemente ejercicios de tomas de requisitos e historias de usuario, empezamos a modelar esos ciclos funcionales de relación entre el usuario y la plataforma para describir características y especificaciones técnicas del proyecto.

 

Tercero: Cartografía URL  y clasificación de la información

En este paso nos encontramos dos retos fundamentales: por un lado ser capaces de ordenar mediante un nombrado URL todas las diferentes secciones, menús, pasos, procesos y resultados que el usuario irá encontrando por el camino. En el segundo apartado, tendremos que trabajar duro para modelar unos criterios de organización que sean suficientemente inclusivos con toda la información que vamos a manejar desde la plataforma.

Uno de los mapas de direcciones URL del Catálogo de Espectáculos Flamencos de Andalucía

Básicamente, tendremos que construir las taxonomías adecuadas que nos servirán para categorizar de la manera más exhaustiva posible toda la información (Como catálogo online, la plataforma tiene que ofrecer un buen  servicio de localización de la información y para ello esta tiene que estar exhaustivamente ubicada y relacionada). Así que a trabajar duro para conseguir los vocabularios de esas taxonomías.

Taxonomy Chart para la organización de la categorización de la información del Catálogo de Espectáculos Flamencos de Andalucía

En esta parte del trabajo se hace necesario el analizar debidamente lo que a nivel web llamamos “Tipos de contenido”, es decir, que forma tiene la información que vamos a procesar: características, campos de información que hay que recoger, formatos, cuantos tipos diferentes podemos encontrar del mismo elemento, etc. Realizando este análisis para cada tipo de contenido (TdC) de la plataforma, podremos interrelacionarlos entre sí para ver como se relacionarán los contenidos en el sitio web. En nuestro caso, identificamos que vamos a operar con tres elementos fundamentales de información a nivel atómico (o al menos con la mayor granularidad que podemos conseguir en este momento): El Espectáculo, La Compañía y El Artista. Nuestros tres contenidos básicos de la plataforma. Los datos mínimos que se requerirán para definir un nuevo caso dentro del sistema. 

Cuarto: Diseño y prototipado

Con todas las piezas ya dispuestas y teniendo validadas aquellas que tratan de la organización de la información (lógica de navegación, arquitectura, mapa URL) y con el añadido de tener ya un desarrollo de marca en ejecución, pudimos ponernos a modelar el posible aspecto de la futura plataforma. 

Mockup de trabajo para la definición de prototipos del Catálogo de Espetáculos Flamencos de Andalucía

Comenzó para nosotros un proceso de construcción visual que partiendo de mockups, y pasando por tareas de wireframing pudo concluir con la presentación de propuestas de “Look&feel” de la plataforma (solo ponemos estas pero había muchas más) :-)

Quinto: Implementación software

Y por fin, la ejecución de la última parte. Ya en este momento lo teníamos todo. Todo o casi todo claro, porque plataforma no teníamos aún, así que este era el último cabo por amarrar, la conjunción final de todas las piezas anteriores para construir eso que veníamos viendo de manera parcial y que configuraba el gran mapa de este proyecto: la plataforma online que tendría que servir como catálogo de Espectáculos Flamencos de Andalucía. Haciendo resumen, ¿Con qué información contamos en este momento del proyecto?

1-Perfiles de usuario
2-Listado de funcionalidades que debe cumplir la plataforma
3-Recomendaciones y contraejemplos de otras plataformas similares
4-Arquitectura de la información y organización del contenido
5-Mapas de direcciones URL para ordenar secciones, subsecciones y contenidos
6-Una descripción rigurosa de los tipos de contenidos que debe albergar el portal web
7-Una identidad visual ya definida

Así que solo nos quedaba empezar a ensamblar las piezas. Ahora toman el control operativo nuestros compañeros de software a nivel backend y frontend, para empezar a debatir con nosotros los diferentes aspectos del ensamble funcional de todas estas secciones anteriores. ¡Mucho trabajo por cohesionar! 

Una vez seleccionada la tecnología base para el proyecto, que en nuestro caso y debido a nuestro “expertise” consiste en Drupal, un CMS robusto, maduro y flexible que puede adaptarse completamente a las necesidades de este proyecto.

Cuarta parte: Resumen y conclusiones

A veces, para conseguir la simplicidad de unos resultados eficientes hay que trabajar duro y articular procesos bastante complejos. En el caso de ciertos sistemas web como el que nos ocupa hoy en este artículo ha sido así: para poder ofrecer a los usuarios la posibilidad de relacionarse fácilmente y de manera intuitiva con la plataforma ha sido necesario recorrer un arduo camino de ejercicios, técnicas, análisis y búsqueda de conclusiones útiles para el proyecto. Ir a los fines esenciales, sacrificar lo superfluo en aras de conseguir un enfoque mucho más certero en aquello que verdaderamente importa.

Para nosotros ha sido realmente un proyecto verdaderamente retante, y esto es tal vez lo que más nos gusta. Ha requerido lo mejor de cada uno de nosotros en nuestros diferentes perfiles y ha conseguido que trabajemos duro aprendiendo técnicas nuevas o reforzando algunas que ya conocíamos. 

Y por supuesto, también ha hecho que nos sintamos orgullosos de un proyecto que realmente tiene lo mejor de cada uno de nosotros. 

11 May 2016 - 1:42pm
Total votes: 141
David Rodríguez's picture
David Rodríguez

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor.