Proyecto: rediseño de Cestalia

Otro proyecto en el que hemos trabajado en el estudio y que ve la luz después de varios meses de trabajo.

En este caso se trata de lo que llamamos un ecommerce de bajo alcance. Lo llamamos de bajo alcance porque se trata de un tipo de proyecto que tiene un dominio de audiencia limitado, pero muy cualificado y francamente optimizado.

Cestalia es una empresa que se dedica a la creación y distribución de lotes y cestas de navidad. Nuestro cometido en el proyecto ha sido, desde el inicio, plantear un rediseño del ecommerce orientado a la maximización de las ventas a través del canal web. La empresa, en todo caso, también tiene canales tradicionales de venta, si bien el canal web es el principal en cuanto a pedidos.

DV Cestalia Home
Captura de pantalla de la página principal de Cestalia

Lo que hemos planteado en el proyecto es una apuesta por varios elementos que influyan decisivamente no tanto en la decisión de compra, como en la operativa de la misma.

Una de las mejores decisiones que el cliente ha tomado, siguiendo nuestro consejo, es la de cuidar los copys y los mensajes. Sirva un ejemplo de la descripción que de ellos mismos hacen:

Somos una PYME, con 12 empleados y sede en Zaragoza, que llevamos 7 años haciendo exclusivamente lotes y cestas de navidad. No somos los números 1, ni la empresa más grande del sector. Y esta situación le beneficia a usted, porque somos ambiciosos y nos obliga a esforzarnos cada día en mejorar. Porque queremos llegar a ser, con ayuda de nuestros clientes, los números 1.

No es sencillo encontrar empresas (y clientes) que tengan la capacidad de transparencia como la que nos hemos encontrado en Cestalia, esa es la verdad.

En términos de interfaz hemos planteado una serie de elementos que son las claves, a nuestro entender, del rediseño:

  • Minimización del menú de navegación de forma que éste sea exclusivamente operativo.
  • Dotar del máximo protagonismo a las imágenes de los lotes, para contribuir decisivamente a la visualización de los mismos, proporcionando un componente aspiracional (si es que podemos hablar de aspiracional en este contexto).
  • Aumento significativo de la importancia y relevancia de los CTA desde el inicio.
  • Mostrar sin complejos la USP en todas las pantallas del site.
  • Dotar de espacio relevante al contenido referido a los servicios implícitos de Cestalia.
  • Carrito de la compra que acompaña todo el tiempo a la experiencia de compra.
  • Checkout en una sola pantalla, dando todo el protagonismo a la inserción de datos.

Nuestro trabajo ha sido la conceptualización del site (yo mismo y @veniabi), el diseño visual (@lizano) y la realización de las maquetas HTML (@superwillyfoc). La implementación e integración en la plataforma ha sido un trabajo del equipo de Hiberus Internet.

Algunas de las imágenes que cuentan la historia de este proyecto:

Utilizamos el sketching para conceptualizar algunos procesos de la parte responsive

Sketch Cestalia
Dibujos que utilizamos para empezar a definir algunos procesos para la parte responsive del ecommerce

Hicimos análisis de situación con el diseño anterior

Revisión de pantallas
Una de las partes más divertidas fue la de hacer análisis a partir del diseño anterior

Algunas propuestas las diseñamos con el cliente, sobre el diseño anterior

Análisis de pantallas
Con la colaboración del cliente, el análisis sobre el diseño anterior fue una gran herramienta

Gran parte de las decisiones de diseño las tomamos sobre los wireframes

WF Cestalia Home
Un elemento importante en el proceso de trabajo fue que algunas cuestiones las descartamos tras analizar los wireframes

WF Cestalia Checkout
Aunque otros wireframes permanecieron intactos después del proceso de análisis y validación

Apostamos por la máxima transparencia de forma consistente en todo el ecommerce

DV Cestalia About Us
Una de las apuestas fuertes fue la de mostrar la empresa de una forma diferente, abierta y transpartente, dándole relevancia

Tratamos de que la inclusión de datos no tuviera distracciones

DV Cestalia Checkout
La pantalla de Checkout no tiene nada que no sea elementos para completar la acción

Como siempre, estaremos encantados de escuchar vuestras opiniones al respecto.

Curso “Interaction Design” (II)

Retomando el post anterior en el que os conté la primera parte del curso “Interaction Design” al que asistí en ITANNOVA (Instituto Tecnológico de Aragón), hoy escribo sobre las dos sesiones siguientes en las que estuvo con nosotros @saertus hablándonos, principalmente, del diseño de interacción en apps y el prototipado de éstas.

Andrés Botero comenzó nombrando una serie de Principios básicos para un UX, tales como:

  • Todo lo que hacemos tenemos que testearlo, ya que no somos usuarios modelo.
  • La experiencia no tiene por qué basarse sólo en el sistema, sino que se basa en todo lo demás (en el antes, el después,…). La experiencia es holística.
  • Hay que preguntarse siempre el porqué de todo lo que se hace en la realización de un proyecto y pensar en todas las situaciones posibles, no sólo en la más cómoda.

Posteriormente tratamos los Wireframes, que separó en dos grupos:

  • Lo-Fi Wireframes: tienen poco nivel de detalle y carecen de contenido. En estos se pueden añadir comentarios explicativos.
  • Hi-Fi Wireframes: son de alta calidad y contienen prácticamente todo. Son el resultado de la segunda fase de diseño de wireframes.

Seguidamente nos explicó dos conceptos sobre el contenido que se encuentra en los sitios web:

  • Macrocopy: hace referencia a la voz y el tono del lenguaje del contenido.
  • Microcopy: se trata de los textos pequeños que aparecen en todo el sistema.

El contenido de un site es muy importante a la hora de abordar los wireframes, ya que en la mayoría de las ocasiones nos podemos encontrar con que el contenido ha afectado de alguna forma a la estructura de los wireframes que hemos construido.

Dadas las explicaciones, diseñamos los wireframes de nuestra app con más detalle y Andrés nos habló sobre distintos tipos de patrones de interacción para que los reflejásemos también en nuestros diseños, tal y como podéis ver a continuación.

Wireframes incluyendo las interacciones de la app.
Diseño de algunos Wireframes del proyecto reflejando las interacciones dentro de la app.

En cuanto a los patrones de interacción, nos mostró diversos estándares que podemos encontrar en múltiples dispositivos: sitios webs, móviles, televisores, etc.

Por si a alguien le interesa consultar patrones de interacción os indico tres webs que nos recomendó @saertus:

  • uxarchive.com: muestra muchísimos tipos de interacción para apps.
  • capptivate.co: muestra interacciones de movimiento también para apps.
  • patterntap.com: son patrones para diferentes dispositivos, aunque más para desktop.

Tras esto, y con la finalidad de adquirir nuevas ideas de cara a la construcción de los prototipos de un proyecto, nos explicó en qué consiste el concepto deconstrucción. Se trata básicamente de fijarse con mucho detalle en las cosas que componen una web. Y si esto lo hacemos con un sitio que nos gusta podemos obtener buenas ideas.

Otro de los temas que tratamos fue el de los gestos que hacemos al interactuar con los productos digitales, que no paran de evolucionar. Cada vez hay más productos con los que interactuamos: móviles, relojes, etc. Y lo importante es que los gestos que se hagan para dicha interacción sean intuitivos para los usuarios.

Otro aspecto importante a la hora de diseñar un producto digital es lo que se conoce como Storytelling. Cuando se presenta un producto a un cliente, este pide una serie de explicaciones o cuando se vaya a vender el producto al usuario, no basta con enseñarlo simplemente, sino que hay que contar la historia que ha sido construida anteriormente siguiendo una serie de pasos. Esto es básicamente en lo que consiste el Storytelling. Y acompañándolo está el Screenflows, una herramienta muy útil de cara a mostrar las pantallas y contar la historia.

Y ya pasamos a hablar del prototipado y las distintas formas que hay de construir los prototipos:

  • Papel: se hacen los diseños sobre papel y la interacción se consigue poniendo los dibujos unos sobre otros según corresponda. Otra forma es con la app PopApp que os conté en el post anterior.
  • Herramientas web
  • HTML / CSS /JS
  • Quartz Composer: Se trata de una herramienta de diseño de Apple.
  • Origami: Es similar al anterior, pero con una “capa” por encima para hacerlo más sencillo y vistoso para el diseñador.

Andrés nos recomendó diversas herramientas y aplicaciones para realizar prototipos y os las pongo a continuación:

  • Fluidui: es un software para construir prototipos de aplicaciones móviles.
  • Gomockingbird: es una herramienta online que sirve para prototipar tanto sitios web como aplicaciones.
  • Balsamiq: se trata de una herramienta para sitios web y aplicaciones, como la anterior.
  • Invision: es una aplicación para prototipar y además pueden trabajar simultáneamente varias personas y se poner hacer comentarios sobre el prototipo.
  • Framer: permite pasar los diseños de Photoshop a Framer para dotarlos de interacción. Está pensado fundamentalmente para app, pero también sirve para ordenador.
  • Flinto: Es más sencillo y es muy útil para prototipos rápidos y sencillos de apps.
  • Pixate: Es más potente que Flinto y funciona con capas como Photoshop. Y es un pack: se instala en el ordenador y se puede visualizar en el móvil.

Y por último, hablamos de otros temas como son:

  • Las animaciones, que en numerosas ocasiones son las responsables de que una app brille más que otra, de ahí su importancia.
  • El universo multidispositivo, en constante evolución y crecimiento.
  • Los inputs methods, que también existe una gran variedad que sigue creciendo. Existen muchas formas de interactuar con los productos digitales: la voz, el teclado, el ratón, las pantallas táctiles, etc.
  • El Responsive Design, lo cual dió pie a hablar también del conocido “Mobile First”, tema que ya hemos tratado en este Blog tiempo atrás en el Post “Cómo diseñar una Web Mobile”.

Así que ya véis que el curso “Interaction Design”, en su conjunto, abarcó un gran temario, y a mí personalmente me gustó mucho, tanto el curso en sí como los profesionales que lo impartieron :)

Proyecto: diseño de IberCaja Aula en Red

Hace pocas semanas que se ha puesto en producción un proyecto en el que hemos participado en el proceso de rediseño. En este caso se trata de un proyecto de la Obra Social de IberCaja llamado IberCaja Aula en Red. Como es costumbre en esta casa, os contamos lo que hemos hecho en el proyecto y estaremos encantados de recibir el feedback que os parezca oportuno, si es que os parece oportuno.

El encargo del cliente fue abordar un proceso de rediseño que llevase al proyecto a obtener:

  • mejores resultados a la hora de conseguir leads en forma de contactos
  • unidades didácticas abiertas y completadas

El objetivo de la web es proporcionar a alumnos y personal docente una serie de actividades complementarias para la formación en las aulas y en los espacios de tiempo no lectivos de forma que las materias vistas en diferentes niveles educativos estén presentes de forma activa, de cara a la consolidación de los conocimientos. En ese contexto, lo que se propone tanto a estudiantes como al personal docente, es una serie de unidades didácticas con las que complementar lo visto en las aulas.

Nuestro objetivo en la parte de diseño ha sido proporcionar una experiencia transparente para el acceso a las unidades didácticas, a la formación complementaria para personal docente y a los concursos orientados a estudiantes.

El principal reto que tuvimos que afrontar fue la organización de los contenidos disponibles en dos planos:

  • El acceso a las unidades didácticas en función del perfil de usuario: estudiantes, personal docente, y padres y madres.
  • El consumo de las unidades didácticas de apoyo a los contenidos del aula, entendiendo consumo como el proceso mediante el cual las y los estudiantes desarrollan una actividad formativa complementaria al aula, poniendo el foco exclusivamente en su acción.

En ese sentido las pantallas clave propuestas, y su diseño, se han basado en enfocar desde el inicio en esos planos:

  • Proporcionar acceso a unidades didácticas en función de dos criterios: nivel educativo y tipo de contenido
  • Proporcionar acceso a formación complementaria en función de perfiles de usuario: personal docente y alumnado
  • Poner el foco en la actividad del alumnado cuando se trata de fomentar su actividad con las unidades didácticas
  • Dotar de toda la información necesaria de la manera más sencilla, pero a la vez más completa, cuando se trata de conseguir leads en ámbitos de formación para personal docente

El resultado es el que se puede experimentar en la web que actualmente existe en producción: IberCaja Aula en Red.

El desarrollo del trabajo, entre otras cuestiones, lo hemos llevado a cabo en coordinación con la dirección de la Obra Social de IberCaja, el personal de IberCaja y sus centros, así como el Centro de Cálculo Bosco, que es quien en su momento diseñó e implementó los elementos interactivos que despliegan la funcionalidad de las unidades didácticas.

Nosotros desarrollamos nuestra metodología de trabajo en proyectos en los que queremos asegurar la mejor experiencia de usuario:

  • Sesiones grupales con el cliente en las que planteamos la investigación previa para dotar al proyecto de objetivos definidos y claros, aplicando la famosa regla SMART
  • Una arquitectura de la información consistente y alineada con los stakeholders identificados
  • El diseño de unos wireframes con los que asegurar que todos los actores del proyecto permanecían alineados en todo momento
  • El diseño de una línea visual consistente con los requerimientos internos
  • El despliegue en visual de todas las pantallas que conforman los procesos del sitio web

¿Cómo lo hicimos? Así:

Wireframe de la página principal

Wireframe página principal. Ibercaja Aula en Red.

Wireframe de una unidad didáctica

Wireframe de Ficha de contenido didáctico. Ibercaja Aula en Red.

Wireframe de la página de formación para docentes

Wireframe de Ficha de curso profesor. Ibercaja Aula en Red.

Visual de la página principal

Página principal. Ibercaja Aula en Red.

Visual de unidad didáctica

Modelo de ficha didáctica. Ibercaja Aula en Red.

Visual de unidad didáctica en modo trabajo

Modelo de ficha didáctica en simulación. Ibercaja Aula en Red.

Visual de formación para docentes

Modelo de ficha de actividad para profesores. Ibercaja Aula en Red.

Como siempre, insisto, estaremos encantados de escuchar, o leer, lo que tengáis que decir.

Curso “Interaction Design” (I)

Después de casi dos meses sin escribir por aquí os cuento mi experiencia en un curso sobre Interaction Design al que asistí a finales de octubre que organizaba ITANNOVA (Instituto Tecnológico de Aragón).

El curso lo impartieron @EsterSerrano y @saertus, dos diseñadores de la empresa Designit, y sinceramente me encantó, tanto el contenido que vimos como la metodología que utilizaron ambos al impartir las clases.

Aunque tenía sus partes teóricas, fue un curso fundamentalmente práctico, que es la mejor forma de aprender de verdad.

Los dos primeros días estuvimos con Ester Serrano y los dos últimos con Andrés Botero. Y lo que hicimos fue, trabajando por equipos y partiendo de un sitio web real, desarrollar todos los pasos que se deberían seguir a la hora de diseñar un producto digital, empezando desde el estudio del producto hasta el prototipado del mismo.

Comenzamos con @EsterSerrano llevando a cabo un Briefing del proyecto para conocer mejor el producto y definir sus funcionalidades y clasificarlas en tres grupos:

  • Must have: son funcionalidades totalmente necesarias.
  • Incremental: no son tan fundamentales.
  • Delighter: son aspectos que el usuario no espera, pero en el momento que los conoce los quiere tener siempre.

Cabe decir que estos “delighters” con el tiempo se acaban convirtiendo en “incrementales” y posteriormente en “must have”.

A continuación pasamos a realizar un Benchmark con el fin de conocer todos los aspectos de la competencia y otros sitios web que, aunque no sean competencia, sirvan de ayuda para el proyecto a abordar.

También hicimos una Lluvia de ideas para que seamos capaces de generar numerosas ideas cuando trabajemos en el diseño de un producto digital. Ideas de todo tipo por muy absurdas que parezcan inicialmente, ya que de ahí siempre se puede sacar algo valioso.

Tras la generación de ideas llevamos a cabo la Creación de personas, atendiendo a aspectos como las necesidades que tiene la persona, sus motivaciones, preferencias, barreras o el objetivo que quiere satisfacer con el sitio web.

Posteriormente creamos un Mapa de empatía con la finalidad de conocer en mayor detalle a la persona. Para ello abordamos seis categorías:

  • Qué piensa
  • Qué ve
  • Qué dice
  • Qué hace
  • Qué siente (preocupaciones, miedos, …)
  • Qué oye

Y para finalizar la primera sesión creamos lo que se conoce como Customer Journey, que consiste en describir el viaje detallado de un cliente cuando está en conctacto con el producto o servicio diseñado. En este viaje se decriben tres momentos: antes, durante y después del contacto. Y suelen crearse dos Customer Journey: uno en el que se de un escenario favorable para el usuario y otro en el que le vaya mal algo.

Además de los momentos citados, se pueden utilizar otras dimensiones:

  • Emociones del usuario
  • Artefacto que utiliza
  • Espacios en los que se encuentra
  • Stackholders que intervienen

Para continuar con el Customer Journey, en la segunda sesión pasamos a identificar la pantalla que se encuentra detrás de cada momento, indicando el nombre de ésta. Cabe decir que no tiene por qué ser una única pantalla, pueden ser más, pero eso lo desarrollamos en una fase futura.

En la siguiente fotografía podéis ver el resultado de la mayoría de las fases realizadas hasta el momento.

Primeras fases del diseño de un producto digital
Primeras fases del diseño de un producto digital: Benchmark, Creación de personas, Mapa de empatía, Customer Journey, Identificación de pantallas.

Tras la identificación inicial de pantallas realizamos el Flujo de pantallas, que se compone de tres elementos:

  • Historias de uso: es un resumen de lo que quiere el usuario. (Hecho ya en fases anteriores).
  • Escenarios de uso: es la historia con un mayor nivel de contexto.
  • Casos de uso: consiste en desgranar una a una las historias del usuario de forma que obtengamos un guión de lo que hace el usuario en la web. Y este proceso es el que nos permite obtener los flujos de pantalla.

Este flujo lo representamos dibujando un mapa de pantallas, tal como se muestra en siguiente imagen, destacando en cada una la acción principal (CTA) que enlaza con la siguiente pantalla, mediante la inclusión de botones.

Flujo de pantallas de un producto digital.
Representación del Flujo de pantallas.

Del mismo modo que en el Customer Journey, no sólo hay que pensar en escenarios favorables, por ello es conveniente representar errores importantes que puedan suceder durante el proceso.

Una vez terminado el Flujo de pantallas de nuestro proyecto, Ester nos habló sobre dos puntos básicos antes de pasar al diseño de los Wireframes: los Principios de la Gestalt y los Heurísticos de Nielsen, una serie de normas básicas sobre diseño y usabilidad, respectivamente.

Y para terminar la sesión tratamos el Diseño conceptual, donde Ester nos explicó la diferencia entre dos tipos de Wireframes y elaboramos los de nuestro proyecto, como os enseño más abajo.

  • Wireframe conceptual: en él sólo se representa el contenido, sin tener en cuenta otros aspectos como la navegación.
  • Wireframe detallado: en él se plantea ya cómo va a ser el aspecto, cómo se presentarán los distintos elementos (la ubicación, el tamaño, etc.).

Wireframes de un producto digital.
Wireframes del producto digital.

Además, para poder interactuar con nuestros Wireframes, nos enseñó una aplicación que me gustó mucho, llamada Popapp.In. Esta aplicación permite convertir en prototipos unos simples Sketches de la app de un proyecto. Lo único que hay que hacer es fotografiar con el móvil los dibujos sobre papel del proyecto y posteriormente POP permite seleccionar los botones de las distintas pantallas para enlazarlos con otras y así poder interactuar con la app diseñada. Me parece super interesante y útil para muchas ocasiones.

En general, las dos sesiones con Ester Serrano me gustaron mucho. Muchos temas ya los conocía, pero nunca está de más volverlos a tratar. Además, nunca había elaborado todas las fases del diseño de un proyecto concreto teniendo que tomar, junto con mis compañeros de equipo, todas las decisiones, lo cual cambia mucho todo y deja ver nuevas cosas.

En el próximo post os contaré cómo fueron las otras dos sesiones del curso con Andrés Botero, en las que nos centramos más en los prototipos de los proyectos.

CX Meeting, encuentro de experiencia de cliente

Bueno, pues un mes después de contar que llevaba yo mucho tiempo sin escribir, vuelvo a la carga con un post de esos que mola mucho escribir. Y es que ayer mismo tuve la oportunidad de asistir a un evento, privado, llamado CX Meeting:

Encuentro especializado en experiencia de cliente basado en casos reales, actuales y que tienen su clave en la innovación para la diferenciación y generación de resultados.

Ni qué decir tiene que ya sólo con las personas que han liderado la organización de este evento ya me podía hacer a la idea de que me iba a gustar lo allí visto y escuchado. Y la realidad lo confirmó.

El encuentro se basó en las experiencias de varias empresas en torno a la experiencia de cliente, o lo que es lo mismo, al cuidado, atención, detalles y método de trabajo orientado a mejorar el servicio que se proporciona a los clientes en el seno de un producto o servicio.

Dicho así puede que sorprenda que en esta casa, donde hablamos de experiencia de usuario, estemos mirando a los paisajes de la experiencia de cliente. Nada más lejos de la realidad. Estamos hablando de un mismo campo de trabajo: la mejora de la experiencia de usuario. Porque usuario es cliente, es ciudadano, es prescriptor, es candidato, es consumidor… El hecho diferencial radica en que los límites de las experiencias que ayer nos contaron las empresas asistentes no se quedaba en lo digital sino que lo transcendía, y nacía y aterrizaba en lo offline.

Y de ahí que me gustara, y mucho.

No es la primera vez que en este blog hablamos de propias experiencias de trabajo en las que hemos constatado que el trabajo de mejora de experiencia de usuario en el entorno digital nos lleva por los caminos del offline. De hecho hablamos de ello en UX Zaragoza aportando 3 casos en los que ese camino se había producido. Por ello, escuchar experiencias de empresas grandes y consolidadas como Iberia, ALSA, Opticalia o Bosch me gustó especialmente.

Vamos a repasar lo que más interesante me pareció de las experiencias que compartieron los asistentes a CX Meeting.

Para empezar fueron unos monstruos del diseño de servicios quienes abrieron la jornada: Fjord.

@stereochromo nos habló de lo que hacen en las oficinas de Fjord Madrid y nos contó cómo a través de un método de trabajo son capaces de convencer a sus clientes de que el diseño visual es sólo el 10% del trabajo en un proyecto, pese a que ese proyecto sea un proyecto de diseño.

David Arconada, de Iberia, nos contó de una forma excelente cómo están abordando las mejoras en experiencia de cliente en la compañía. Las claves: detalles de mejora en experiencia de cliente que se introducen dentro de procesos que ya existen y que, aporto, tienen un coste de implementación extraordinariamente poco significativo (especialmente si los comparamos con la ganancia en términos de fidelización). Fue la ponencia que más me gustó.

Virginia Fernández, de ALSA, nos explicó cómo incorporar la experiencia de cliente dentro de una compañía de transporte de viajeros por carretera, desde el momento en el que el departamento es unipersonal hasta que se consolida como equipo de trabajo estable y, lógicamente, más poblado de efectivos. Relató de una forma brillante cómo la mejora en la percepción del servicio se logra a través de una comunicación explícita y sistematizada de los procesos que ya se estaban ejecutando en la empresa. Virginia comunica estupendamente.

Jaime Compadre, de Bosch, nos contó cómo vender una plancha. Suena un poco a broma si lo dejamos con ese titular, pero desarrolló de forma amena y muy efectiva cómo a través de la investigación de usuarios se puede consolidar un naming para producto que es mucho más eficaz, comprensible y adoptable por parte de los usuarios.

Víctor Gonzalo, de Opticalia fue el golpe encima de la mesa del evento. Con un carisma extraordinario y una forma de comunicar que no pasaba desapercibida, detalló la estrategia seguida en Opticalia para alinear las expectativas de los usuarios cuando se compran unas gafas en el campo de la moda, de forma que se alejase del campo de la medicina o de la prótesis. Me pareció francamente brillante.

Mercedes Carreras, de la Xunta de Galicia, fue otro de los descubrimientos que hicieron que mi cerebro funcionase revolucionado después de su intervención. Contó cómo la Xunta de Galicia está implementando servicios en el ámbito sanitario que están pensados para adaptarse a las necesidades de los usuarios, ciudadanos en este caso, de forma que sean los servicios los que estén a disposición del usuario y no al contrario. Francamente esperanzador.

Dolors Pou, de User Zoom, ya conocida en los ámbitos de la UX y de este blog, nos contó cómo utilizar las herramientas de investigación de usuarios para resolver el ciclo completo de mejora de un producto digital (en el caso que nos contó, un e-commerce de gran dimensión). De un plumazo Dolors saltó del discurso que podemos escuchar en cualquier encuentro de usabilidad y UX a un discurso centrado en los servicios y en la experiencia global de cliente.

@abarbero estuvo hablando de Feebbo, y lo hizo con una naturalidad pasmosa. Me recordó a esas veces en las que cuando era estudiante y llegaba a un examen sabiendo que me iba a salir bien porque lo llevaba tan bien preparado y no me quedaba ninguna duda de que todo iba a ir bien. Me pareció especialmente brillante cómo contó que Feebbo interviene sólo en los contextos en los que el usuario es susceptible de contestar una encuesta dentro de un proceso de compra, localización de información o contratación de un servicio.

Hubo más, pero estas ponencias son las que más me gustaron y las que más me hicieron pensar. Y eso es algo que hace mucho que no me sucedía en un evento, la verdad.

Como conclusión lo que me quedó muy claro es que pude constatar que cuando hablamos de la experiencia de usuario debemos pensar, una y otra vez, en que el entorno digital no es sino una extensión del entorno offline. O si le queremos dar la vuelta, el entorno digital no lo debemos separar del entorno offline, ya sea porque los prestadores de servicios digitales tienen siempre una serie de condicionantes que residen en lo offline o, atención, porque los usuarios siempre, y digo siempre, tienen condicionantes que habitan en el offline. Porque hasta la fecha no se conoce ser humano que no sea de carne y hueso.

Obvio, pero conviene no olvidarlo.

Diferencia entre Arquitectura de la Información y Diseño de UX

¿Todo el mundo tiene clara la diferencia entre lo que es la Arquitectura de la Información y el Diseño de Experiencia de Usuario? Darren Northcott nos cuenta en su post “The Difference Between Information Architecture and UX Design” las diferencias entre estos dos campos y profesiones, además de proporcionarnos útiles consejos para comenzar en ambas, a pesar de que él mismo se define como un “arquitecto de experiencia de usuario”.

Yo he decidido hacer una traducción adaptada de este post, que os muestro a continuación.

Darren comienza su post exponiendo las definiciones que da la Wikipedia en versión inglesa de estos dos términos. Así, la Arquitectura de la información es “el arte y la ciencia de organización y etiquetado de sitios web… para apoyar la usabilidad”. Y la Experiencia de usuario es “la forma en la que una persona se siente al utilizar un producto, sistema o servicio. (Esto incluye) las percepciones de una persona en aspectos prácticos como la utilidad, facilidad de uso y eficiencia del sistema.”

De modo que en lo que respecta a su definición, la Experiencia de Usuario toma a la Arquitectura de la Información como su fundamento y lo lleva al siguiente nivel.

Planteado esto, Darren continúa exponiendo cinco apartados diferentes, como os muestro a continuación.

La arquitectura de información se refiere a la estructura

La arquitectura de la información es un término relativamente viejo. Viejo en el sentido de la web y de la progresión tecnológica.

La AI se centra en la organización y estructura del contenido de forma que el usuario pueda navegar por él. Digitalmente hablando, las variaciones son muchas, podemos tener desde un simple y sencillo sitio hasta un sistema de información complejo.

Los arquitectos de la información trabajan para crear estructuras de contenidos usables de complejos conjuntos de información. Y esto lo hacen utilizando multitud de métodos de diseño centrados en el usuario: tests de usabilidad, investigación y creación de “personas”, y diagramas de flujo de usuarios, entre otros.

Dicho esto, parece que el diseño de UX está de moda. Y el motivo es que la AI sólo comprende una pequeña parte de la experiencia general del usuario.

La experiencia de usuario se refiere a las emociones

¿Entonces qué es la experiencia de usuario? Los diseñadores de experiencia de usuario llevan un paso más allá la arquitectura de la información de un sitio, considerando no sólo su navegación, sino también la habilidad del usuario para realizar una acción, con el fin de facilitarle esta tarea. Para hacer esto, utilizan el diseño centrado en el usuario para generar una cohesión, previsible y deseable, que afecte a su público objetivo.

Esencialmente, los diseñadores de UX trabajan para hacer cosas más profundas, clasificando a sus usuarios en un nivel emocional. El diseño de UX añade un contexto y una historia del comportamiento natural de un usuario, lo que les permite llevarse algo de su experiencia.

Así pues, la Experiencia de Usuario es algo que abarca un gran espectro. Es como tomar una taza de Arquitectura de la Información, mezclado con una pizca de usabilidad, una pizca de estrategia de contenido y mucha creatividad. O, aún más simple, UX es el niño fruto del amor entre un director creativo y un arquitecto de información. Muchas veces esto significa quitar cosas quedándote sólo con la esencia de lo que el usuario necesita.

Haciéndolo fácil y cool

Si aún no estás completamente confundido, probablemente estés pensando que es necesaria una buena AI para tener una buena UX. Exacto. Otra forma de verlo es que los diseñadores de Experiencia de Usuario consideran la Arquitectura de la Información, pero que los arquitectos de información no consideran necesariamente toda la experiencia de sus usuarios.

Una experiencia usable es fácil, simple y permite hacer la tarea. Una experiencia atractiva hace todo eso e incluso impacta al usuario de forma duradera. Esa es la diferencia entre pensar “Ha sido fácil” y “Ha sido genial”, tras haber estado en un sitio haciendo algo.

Esa es la diferencia entre aplicaciones como Wunderlist y Clear.

Comparativa entre Wunderlist y Clear
Comparativa entre Wunderlist y Clear

O entre Skethbook y Paper.

Comparativa entre Sketchbook y Paper
Comparativa entre Skethbook y Paper

Las aplicaciones antiguas son herramientas buenas, fáciles y usables. Pero las nuevas no sólo son fáciles y usables, sino que también son divertidas y atractivas.

Esto es todo el planteamiento

En cuanto al flujo de trabajo de estas dos disciplinas abarcan enormes proporciones y tienen grandes diferencias.

Las necesidades de un arquitecto de información pueden ser investigar los objetivos de los usuarios y llevar a cabo algún tipo de análisis de la competencia. Y al final generan flujos de página, wireframes y, por supuesto, mapas de los sitios web. Se pueden incluir también como tareas hacer algún test de usabilidad, refinamiento y revisiones.

Los diseñadores de UX, a pesar de que tienen en cuenta el flujo de trabajo de la AI, también pueden considerar los objetivos emocionales del usuario final. Su comparación competitiva puede ser más alrededor de los modelos de interacción, en lugar de la estructura y el diseño.

Conclusión

La UX se basa en los fundamentos de la AI, con el objetivo de llevarla al siguiente nivel, tanto creativo como emocional. Esta es la diferencia clave que define cómo las aplicaciones, sitios web y productos de hoy en día son diseñados, al contrario de como eran diseñados los de antes.

Para aquellas personas que estén interesadas en conocer más del tema, Darren Northcott incluye una lista con diferentes recursos al final de su post.

Mucho tiempo sin escribir, de nuevo

Bueno pues no he desaparecido. Aunque lo parezca, que lo parece.

Desde hace varios meses lo que esta casa era, es otra cosa. Ya no es el blog de Daniel. O mejor dicho, ya no es sólo el blog de Daniel. O de @torresburriel. Desde hace varios meses podéis ver que por aquí escribe Verónica, que es la persona que se ha unido al estudio. Porque lo que desde 2003 era un blog personal/profesional ha terminado siendo la web del estudio que he montado.

He de reconocer que la comunicación de todos estos cambios no ha sido la mejor. En casa del herrero, cuchillo de palo. O eso dicen.

Torresburriel Estudio y UX Learn son las apuestas profesionales que ocupan mi tiempo, en mucha más medida de lo que pensé en su momento, desde hace años. Y así va a seguir siendo.

Quizá no escribo en el blog con la frecuencia que me gustaría, pero en todo este tiempo he tratado de seguir compartiendo lo que sé y lo que sigo aprendiendo en otros canales, Twitter generalmente. Aunque el firme propósito (formulado más de una vez, lo sé) es seguir haciéndolo aquí, en el blog.

Lo cierto y verdad es que el volumen de trabajo que manejamos deja poco margen para alimentar el blog, y eso siempre es bueno. Nos está dando la posibilidad de aprender un montón de todos los clientes con los que trabajamos, y nos está proporcionando una experiencia extraordinaria. Obviamente, nos ayuda también a pagar las facturas, que no es un tema menor.

En todo caso tenía la necesidad de escribir un poco para decir que seguimos aquí, que somos fácilmente localizables y que el trabajo de diseño de experiencia de usuario sigue siendo lo mejor que sabemos hacer. Pese a que no podemos dedicar todo el tiempo que nos gustaría sólo a lo estrictamente técnico-profesional, este blog va a seguir siendo ese sitio donde vamos a continuar publicando lo que hacemos, lo que aprendemos y lo que nos gusta y nos llama la atención.

Por el momento, y después de haber abandonado las retros semanales, seguimos embarcados en varios proyectos de diseño, formación y consultoría. 2014 está siendo un buen año profesional y trabajamos ya para planificar lo que haya de venir en 2015.

Cómo diseñar una web mobile

En estos meses de verano hemos estado trabajando con dos sitios web, uno de ellos dedicado a temas culturales y otro a temas de educación, para abordar el diseño de la versión mobile de cada uno. Y es que contar con una web mobile ahora es algo más que fundamental.

¿Y cómo debemos abordar el diseño de una web mobile? De manera general podemos distinguir dos formas:

  • Adaptar la web desktop a la versión mobile, es decir, construir una web responsive.
  • Llevar a cabo un diseño mobile first.

Mobile First vs Web Responsive
Diseño de una Web Responsive vs Mobile First

¿Qué es esto de mobile first? Se trata de comenzar un proyecto de diseño por la pantalla más pequeña e ir adaptándolo posteriormente a las más grandes. De esta forma lo que conseguimos es centrarnos en lo más importante, aquello imprescindible para la web de acuerdo a los objetivos que tenga, que se verá reflejado en la web mobile. Y así, al diseñar las webs del resto de dispositivos, no habrá más que aumentar el tamaño de los elementos e incorporar otros, si es necesario, conforme vaya creciendo el tamaño de la pantalla con la que se esté trabajando.

¿Pero esto siempre es factible? Tengo que decir que no. Es cierto que sería lo ideal y lo más aconsejado. Actualmente es vital que pensemos en todos los dispositivos posibles a través de los cuales nuestros usuarios pueden entrar en el sitio web, ya que no sabemos con cual lo van a hacer. Y además, cada vez hay más dispositivos y, por tanto, más tamaños de pantallas diferentes a los cuales hay que adaptar los sitios web, y utilizar la técnica de mobile first sería la mejor opción de optimizarlos.

Sin embargo, no siempre nos encontramos con la situación de partir de un proyecto desde cero en el cual poder abordar primero su versión móvil. Más bien sucede lo contrario. En la mayoría de los casos nos encontramos con clientes que ya tienen su web desktop y lo que quieren es adaptarla a la versión mobile.

En este caso la forma de trabajar es diferente y llevaremos a cabo acciones de diseño distintas dependiendo de los objetivos que se quieran satisfacer con la web mobile.

  • En un primer lugar habrá que seleccionar las pantallas que se desean incorporar en la versión móvil, dado que puede que no todas las que están en la versión desktop sean necesarias. Puede que haya pantallas innecesarias de acuerdo a los objetivos propuestos.
  • De forma similar, también habrá que eliminar los elementos (desde pequeños detalles hasta apartados completos) que no sean necesarios, nuevamente según los objetivos.
  • Por supuesto, se deberá diseñar una nueva cabecera, pie de página y el menú principal.
  • En general, habrá que adaptar todo el contenido:
    • Reduciendo el ancho.
    • Adaptando la tipografía.
    • Aumentando el tamaño de determinados elementos y/o destacándolos (mediante listas, recuadros, etc.) para que puedan verse fácilmente en la pantalla de menor tamaño y para que se pueda interactuar con ellos de forma táctil sin problemas.
    • Colocando un elemento debajo de otro, nunca en horizontal si esto va a complicar la interacción con ellos. Por ejemplo cuando hay varias opciones para seleccionar en un formulario.
    • Lista de opciones de un formulario en web desktop
      Lista de opciones de un formulario en web desktop

      Lista de opciones de un formulario de web mobile
      Lista de opciones de un formulario en web mobile

    • Creando botones en los casos en los que se facilite la interacción. Por ejemplo, un enlace a “ver más imágenes” puede convertirse en un botón en la versión mobile ya que, de esta forma, se ve más y es más fácil presionar el botón con el dedo.
    • Botón para ver más elementos
      Sustituir el enlace de “Ver todos los patrocinios” por un botón en la versión mobile de la web.

    • Además, se pueden crear nuevos elementos de interacción. Por ejemplo, en los datos de contacto, el número de teléfono puede ir seguido de un icono que permita llamar directamente al pulsarlo.

      Cabecera de una web mobile
      Cabecera de una web mobile con un icono junto al teléfono para llamar directamente al presionarlo.

      O por ejemplo, si en la versión desktop hay un mapa, en la mobile podemos quitarlo y poner un botón que lleve a la aplicación de Google Maps directamente.

    • Enlace directo a la app de Google Maps
      Botón con enlace directo a la app de Google Maps.

  • Y por supuesto, habrá que comprobar que todo se ha adaptado correctamente. Para ello tendremos que visualizar la web en todos los dispositivos posibles. Además podemos ayudarnos de herramientas como el Simulador de iOS donde podemos comprobar como se vería la web en un iPhone o un iPad. Aquí podéis consultar otros emuladores para testear el sitio web en dispositivos Android, Nokia, etc.
  • Simulador iOS
    Simulador iOS.

Estos son aspectos que yo tengo en cuenta, pero seguro que vosotros podéis contarnos otras acciones que lleváis a cabo a la hora de abordar el diseño de una web mobile.

Y en cuanto a lo comentado sobre el mobile first, ¿qué opináis?

Primera edición de UX Zaragoza

El pasado viernes 11 de julio celebramos la primera edición del evento UX Zaragoza, un proyecto nuestro, de Torresburriel Estudio, en el que además colaboraron Cachirulo Valley y Etopia.

En UX Zaragoza contamos con cuatro charlas sobre diseño de servicios y experiencia de usuarios, que paso a resumiros a continuación.

Adriano Latorre y Pablo Jimeno – Las cosicas del Lean UX

@adrianolatorre y @pablojimeno nos hablaron del proyecto que están llevando a cabo, Spines, e introdujeron la idea de “¿Cómo se integra la UX en un desarrollo ágil de producto?”. Ellos mismos respondieron que no lo saben, pero por eso mismo han estado cuatro meses experimentando. Decidieron llevar a cabo una Inception en Canfranc con el fin de entender el problema del proyecto y generar una serie de hipótesis acerca de éste. Tras esto, los pasos que siguieron fueron los siguientes:

  • Determinación de iteraciones.
  • Preocupación constante por la priorización.
  • Elección y uso de herramientas:
    • Daily (para las reuniones online)
    • Retrospectiva
    • Automatización
    • Mapas mentales
    • Wireframes
    • Guía de estilo
    • Backlog enriquecido
    • Accountability
    • All Together Now…
  • Hipótesis y validación:
    • Entrevistas
    • Experimentos
    • La métrica correcta
    • Dificultades            

Y terminaron concluyendo lo siguiente:

“Si la experiencia de usuario es algo que afecta a casi todos los aspectos de tu aplicación, ¿por qué no vas a permitir que se encargue todo el equipo, todo el tiempo, de ella?”

Podéis ver su presentación aquí.

Guillermo Latorre – La locura, esa facultad fundamental

@Superwillyfoc comenzó su ponencia diciéndonos que en las empresas habría que probar cosas nuevas dentro de un equipo de trabajo, habría que investigar e invertir en mejorar la experiencia de trabajo, dado que hacer estas “probatinas” o locuras conlleva numerosas ventajas. En Cuéntica, la empresa de la que Guillermo es socio fundador, han probado a hacer cosas nuevas y esto es lo que les ha aportado:

  • Motivación
  • Diversión y comodidad
  • Ideas
  • Solución de problemas eficaz y eficientemente
  • Creación de Equipo
  • Conocimiento de necesidades

Posteriormente nos habló y recomendó muchísimas herramientas que sustituyen a las “típicas y populares”, pero que tienen, incluso, más utilidades y ventajas que estas otras.

Dado el montón de herramientas que nos mostró no pude hacer otra cosa que hacer fotos todo el tiempo, por si acaso, aunque luego nos dijo que colgaría su presentación. Así que os cuento brevemente algunos detalles sólo de unas pocas.

Mapbox es una herramienta que sirve como sustituta de Google Maps y que además incluye nuevas cualidades: permite modificar un mapa como uno quiera, permite ponerlo en un sitio web sin problema, es totalmente responsive, etc. 


En cuanto a CMS’s, tenemos al gran WordPress, pero… resulta que Guillermo opina que el HTML está volviendo.


Independientemente de ello, nos recomendó dos CMS específicos para algo concreto:

  • Ghost es un CMS específico para Blogs.
  • Cinemática es específica para crear una página de vídeos donde puedes integrar tu canal de YouTube o de Vimeo.

Cambiando de tipología de herramientas por completo, tenemos, por ejemplo, a Freckle que sirve para imputar las horas trabajadas.

Y para que descubráis todas las demás herramientas que nos presentó os dejó aquí su presentación.

Como nota deciros que las que están marcadas en azul son las que Guillermo más recomienda y las marcadas en verde son españolas.

Daniel Torres Burriel – Service design de pueblo

@torresburriel nos mostró tres ejemplos de tres clientes con los que ha trabajado, con la finalidad de que conociéramos las implicaciones que tiene sobre toda la empresa la aplicación de conocimientos de diseño.

El primer caso que nos contó fue el de Cuéntica, cuyas implicaciones fueron las siguientes:

  • Cambio en la concepción de los servicios.
  • Cambio en los roles internos.  
  • Modificaciones en la estructura física de las instalaciones.

Como vemos, la aplicación de conocimientos de diseño sobre una empresa puede acarrear grandes cambios sobre esta.

En segundo lugar nos habló sobre Maestrex, cuyo objetivo era rediseñar el sitio web, lo que supuso estas implicaciones:

  • Aprendizaje de herramientas para la gestión de redes sociales. No hay que olvidar que estos clientes son expertos en lo que respecta a su ecommerce, y no tienen porqué saber de redes sociales.
  • Diseño de objetos para clientes en espacios de tiempo entre jornadas de aventuras.
  • Incremento de las interacciones post-venta en plataformas sociales, que genera nuevos leads.

Y por último, nos expuso el caso de la Fundación Genes y Gentes, en cuya web había que cambiar numerosas cosas y por ello se decidió tirarla y construirla de nuevo. Las implicaciones que tuvo fueron las siguientes:  

  • Cambio total en la orientación de la inversión: de la edición de libros a las campañas de publicidad online.
  • Modificación de las pautas de organización interna del trabajo: uso de herramientas de gestión digital.
  • Más personas involucradas en la organización.

Y para terminar, Daniel nos explicó los pasos que hay que seguir en un proceso de Service Design:

  • Inmersión
  • Ideación
  • Hipótesis
  • Prototipado
  • Validación
  • Análisis y corrección      

Os muestro seguidamente su presentación para que podáis echarle un vistazo.


Verónica Traynor – Falla rápido y barato, falla investigando  

 @verotraynor comenzó reflexionando sobre las pruebas de usabilidad, sosteniendo que cuando se hacen este tipo de pruebas se confunde lo que el usuario ve con lo que el usuario comprende, que no es lo mismo, en absoluto.

Así, para saber lo que un usuario ha visto (si hay visto una cosa determinada o no) nos podemos servir del proceso eye tracking. Pero esto lo hacemos con una simple máquina, por lo tanto no nos dice luego qué es lo que el usuario ha comprendido. Nos da resultados de lo que ha visto, pero ¿lo ha comprendido? Para ello debe haber gente que analice e interprete estos resultadosSin embargo, por el hecho de ser personas las que se encargan de esto, sacan percepciones subjetivas.

De modo que lo que se debe hacer a la hora de hacer pruebas de usabilidad son dos cosas:

  • En primer lugar, hay que generar hipótesis, hay que pensar por qué pasan determinadas cosas.
  • Y en segundo lugar, hay que comprobar estas hipótesis estudiando los datos reales (de analytics, etc.).        

Además de contarnos todo esto, Verónica nos mostró un ejemplo de un análisis de comportamiento de usuarios para analizar todo el proceso.


Si queréis ver su presentación podéis hacerlo aquí.

Como conclusión, fue una agradable tarde con interesantes ponencias, evidentemente para unos unas charlas serían más interesantes que otras ;) pero en general estuvo muy bien, así que espero que haya una segunda edición del UX Zaragoza.

Cómo hacer un buen programa VoC online

Actualmente, que un cliente comparta una buena o mala experiencia es algo extremadamente fácil y común, y no sólo con la gente que conoce, sino también con otras personas al compartirlo en redes sociales u otros medios de comunicación. Y esto influye a todos estos usuarios a la hora de comprar.

Por lo que ahora es todavía más importante que las empresas generen una buena experiencia con el cliente a través de todos los canales de comunicación, dado que la satisfacción de este está totalmente ligada a las ventas de la empresa.

Lo primero que se debe hacer es escuchar a los clientes y para ello es necesario contar con un buen programa de Voice of Customer (VoC).

A continuación os muestro lo que explica un informe elaborado por Userzoom sobre “Como hacer un buen programa de Voice of Customer online”.

Cómo hacer un buen programa de VoC
Estudio de Userzoom acerca de cómo hacer un buen programa de Voice of Customer online.

El VoC permite a la empresa:

  • Saber si sus clientes están satisfechos o no.
  • Saber si reciben resoluciones rápidas a sus problemas y dudas.
  • Detectar las tendencias de sus consumidores.

Y todo esto le ayudará a conocer cómo sus clientes valoran y utilizan sus productos en comparación con los de la competencia y a satisfacer mejor sus necesidades.

La implantación de un buen programa VoC no sólo ayudará a mejorar la relación de la empresa con sus clientes, sino también su cuenta de resultados.

Esto es debido a que la información y feedback recogido de los clientes sirve para canalizar acciones enfocadas a incrementar la lealtad hacia la marca y esto influye en el valor del ciclo de vida del cliente y por tanto en la cuenta de resultados de la empresa.

Y más concretamente, es necesario implementar un programa de VoC porque:

  • Ayuda a mejorar el grado de satisfacción de los clientes.
  • Permite conocer la relación de los clientes con la marca.
  • Permite conocer las fortaleza y debilidades de la empresa desde la perspectiva del cliente.
  • Ayuda a la innovación y a la mejora de los servicios, gracias a las aportaciones y sugerencias de los clientes.
  • Facilita la resolución de las dudas y problemas eficientemente.

¿Cómo crear un programa Voice of Customer en la empresa?

Paso 1: Definir los objetivos de la empresa

Para definir correctamente los objetivos de la empresa hay que abordar ocho puntos diferentes, tal y como os muestro a continuación.

A) Información sobre nuestros clientes

Se debe comenzar recogiendo la información sobre los clientes, la cual será analizada posteriormente:

  • Su perfil demográfico
  • Su comportamiento en Internet: patrones de uso, frecuencia de navegación, uso del móvil, etc.
  • Su percepción sobre la empresa en relación a la competencia: qué sites de la competencia visita, qué le gusta de esta, etc.

B) Identificar los objetivos de nuestros clientes

A continuación se identifican los objetivos de los clientes: qué es lo que hacen cuando van a la web o a la aplicación móvil de la empresa, ya que esto le permitirá mejorar.

C) ¿Buscan algo que no tengo?

En tercer lugar hay que saber si el cliente busca algo que la empresa no tiene, especialmente si es algo que necesita, ya que si se frustra no volverá.

D) Identificar problemas

Por supuesto, los estudios VoC también ayudan a saber si los clientes consiguen alcanzar sus objetivos de forma fácil o, si por el contrario, se encuentran con algún problema. Pero además, permite conocer cuáles son estos problemas y su grado de importancia (si han podido continuar la tarea a pesar de la dificultad o se han visto obligados a abandonarla).

Algunos de los problemas de importancia que se pueden identificar son los siguientes:

  • Que la navegación sea difícil y poco intuitiva.
  • Que falte información relevante, en la ficha de producto por ejemplo.
  • Que la información no se muestre de forma clara y no sea fácil de entender.
  • Que no se transmita seguridad, que no exista coherencia entre lo que muestra la empresa que es y sus valores de marca, etc.
  • Que existan errores técnicos, por ejemplo que no funcionen correctamente los formularios.

E) Conocer la satisfacción de nuestros clientes

Tener clientes contentos significa tener clientes fieles a la marca, los cuales, a su vez, traerán nuevos clientes.

Para saber si estos están contentos al navegar por la web de la empresa, lo ideal es monitorizar el Net Promoter Score (NPS) de la empresa y compararlo con el resto de compañías del sector. Esta técnica, además de medir la satisfacción de los clientes, también ofrece su evolución en el tiempo.

Lo que se debe hacer es preguntar a los clientes si recomendaría la empresa a sus amigos o familiares, señalando un valor en una escala del 1 al 10.

Y filtrando los resultados obtenidos por distintos perfiles de usuarios (nuevos clientes, aquellos que abandonan el carrito, etc.), se puede mejorar la experiencia de cada uno en concreto, atendiendo a los diferentes objetivos y necesidades que tienen.

F) Información multicanal

Con el surgimiento de las nuevas tecnologías, los clientes se comunican con la empresa a través de diversos medios, por lo que la empresa necesita comprender las relaciones que se crean entre estos diferentes canales.

Puede cuestionarse aspectos como: ¿Se informan en la web y luego van a la tienda? ¿Comienzan la compra en un medio online y la terminan en otro?

G) Percepción y expectativas de producto y marca

La experiencia que el usuario tenga durante la visita a la web o aplicación móvil es algo muy importante dado que una mala experiencia puede hacer que cambie la percepción que tiene de la marca.

Algunos de los factores que pueden afectar negativamente a la experiencia de compra de los usuarios son:

  • No tener los productos en stock que ofrece la empresa.
  • Tener un coste elevado de gastos de envío.
  • Que la imagen del sitio web no sea consistente con la marca offline.

Estos casos o cualquier otro, es importante conocerlos para poder corregirlos y así eliminar las barreras a la conversión y aumentar las ventas.

H) Obtener respuestas para los datos de nuestra analítica web

Además, el programa de VoC, debería permitir cruzar los datos de la analítica web de la empresa con las preguntas que se están haciendo a los clientes.

Esto permite explicar los datos cuantitativos, por ejemplo por qué los clientes abandonan una página (el rebote de la página), y así corregir los problemas que existan.

Paso 2: Escoger el software adecuado para conseguir los objetivos

El software es un elemento clave a la hora de implementar el programa de Voice of Customer en la empresa y debe cumplir una serie de funcionalidades:

  • Debe ir más allá de las encuestas online. Se deben realizar las preguntas después de que el usuario haya navegado por la web para que las respuestas sean de calidad.
  • Se debe adaptar a las necesidades de la empresa. Debe proporcionar flexibilidad para diseñar un cuestionario a medida.
  • Se debe poder personalizar el look and feel del cuestionario, para que el usuario no sienta que las preguntas se las hace alguien externo.
  • Debe funcionar en dispositivos móviles.
  • Debe permitir obtener datos objetivos para poder analizar el comportamiento del usuario.
  • Debe permitir integrarse con herramientas de Web analytics como Site Catalist o Google analytics y herramientas de Tag management.
  • Debe aportar un plus de funcionalidades como:
    • Que sea multiidioma
    • Que tenga capacidad de gestionar el cuestionario desde una plataforma online.
    • Que utilizando un mismo JS se pueda utilizar para diferentes cuestionarios.

Paso 3: Decidir donde interceptar a los usuarios

En la experiencia de compra online hay distintos puntos en los que se pueden hacer las preguntas a los clientes:

  • En la home, donde se recogen los objetivos que tienen y si los consiguen.
  • En secciones o landings, donde se recoge información de los usuarios que llegan a través de buscadores a una página determinada.
  • Cuando abandonan, lo que ayudará a conocer por qué se van de esa página en concreto.
  • Después de su compra, momento en el que se puede recoger información sobre la experiencia de compra de los clientes invitándoles a participar en el cuestionario desde la página de confirmación de la compra o enviándoles un email.
  • En la tienda física. El cliente accede al cuestionario online a través de un código QR.

Paso 4: Identificar si la empresa necesita uno o más cuestionarios

Antes de diseñar el cuestionario hay que establecer si se tienen diferentes perfiles de clientes y distintos objetivos de análisis.

Se puede diseñar un sólo cuestionario y derivar a los clientes hacia diferentes preguntas según sus respuestas, o, si tenemos varios objetivos que analizar, diseñar diferentes cuestionarios para obtener la información necesaria en cada momento de la navegación.

Paso 5: Las 10 preguntas que no se deberían dejar de hacer

  1. ¿Qué has venido a hacer en esta visita?
  2. ¿Consideras que has conseguido lo que te habías propuesto?
  3. ¿Qué problemas te has encontrado?
  4. ¿Has realizado una compra en esta visita?
  5. ¿Cuáles van a ser tus próximos pasos?
  6. ¿En qué medida recomendarías esta web/app a un amigo o familiar?
  7. ¿Eres hombre o mujer?
  8. ¿Puedes indicarnos tu edad?
  9. ¿Eres cliente?
  10. ¿Es la primera vez que visitas esta página?

Paso 6: Ofrecer a cada perfil de la empresa la información que necesita

Dado que el programa de VoC genera información relevante para muchos trabajadores, hay que definir qué es lo que le interesa a cada uno y en qué formato se le va a entregar.

Por ejemplo:

  • Los C Level están interesados en el ratio de éxito y el NPS.
  • El equipo de marketing online y e-commerce está interesado en medir una serie de KPIS y su evolución en el tiempo.
  • Los web analytics managers necesitan entender el porqué de los datos que analizan.

Paso 7: Ir más allá del VoC y recoger otro tipo de información

Todos sabemos que los clientes dicen una cosa, pero realmente hacen otra, por ello se debe investigar su comportamiento de forma independiente e incorporarlo como métricas al programa de VoC.

Estos datos externos podemos obtenerlos de diferentes fuentes: de Analytics, de los vídeos de su navegación o realizando test de usuarios.

Paso 8: Pensar en grande

Por último, a la hora de implementar el programa de VoC, lo ideal es comenzar con uno sencillo, centrándose en recoger la información más importante y posteriormente ir mejorándolo para adaptarlo a las necesidades de la empresa.

Dado que un VoC es un proceso de mejora constante en el que hay que establecer un sistema de medición de la Experiencia de Cliente continuo y en constante evolución.

Los ocho paso a seguir para implementar el VoC
Resúmen de los ocho pasos que se deben seguir para hacer un buen programa de Voice of Customer online.

Y para concluir una última reflexión: es importante escuchar, interpretar, analizar y medir los resultados a lo largo del tiempo para establecer un buen programa de Voice of Customer online.

Así que ya lo veis, lo que para algunos usuarios podría parecer un simple cuestionario lleva un inmenso trabajo detrás de él.