Nuevo diseño email confirmación

Hace unas semanas cambiamos en la empresa el diseño del email de confirmación, para adaptarlo a los nuevos tiempos, y es que ya le tocaba un cambio de cara.

El nuevo diseño se ha realizado pensando en la correcta visualización en todo tipo de dispositivos, sobre todo móviles.

Aquí podeís ver el antiguo email:

En esta caso una reserva que contenía alojamiento, 2 vuelos, entradas, 2 transfers y un seguro de viaje. A esto aun había que añadirle el modulo de pagos y el pie.

Bonito, eh?

El momento más estresante del usuario en la experiencia de una reserva es el pago y le ver si todo ha ido bien o no. Después de ver la página de confirmación, el usuario busca en su email si le ha llegado también la confirmación de la reserva.

Por ello, es muy importante la correcta visualización de los elementos que aparecen para rebajar el nivel de ansiedad. El email, es asi mismo, un medio contrato donde el usuario puede acudir en todo momento a ver que ha reservado. Los accesos a la información secundaria, u otras acciones deben estar claros.

Se ha trabajado mucho con varias células para intentar resumir la información dejando solo lo importante, teniendo el enlace al detalle de la reserva para los temas menos prioritarios.

Se ha buscado destacar los detalles prioritarios: estado de la reserva, hasta cuándo se puede cancelar, si está pendiente de pago… Aparte se ha añadido nueva información, como un enlace que te lleva a Google Maps con la dirección del alojamiento.

En la parte superior se ha mantenido un resumen de la reserva con los detalles del precio. Luego aparecen los bloques en base a lo reservado: alojamiento, vuelos, actividades, seguro… Al final de todo se encuentra el bloque con la información sobre el estado del pago, los banners de cross-selling, la información sobre el Monedero, el enlace de descarga de la App, y la información sobre la empresa.

Bloque de pagos

Crosselling
Mi Monedero, App e Info corporativa

Esperemos que os guste! Muchíiiisimas gracias a tod@s l@s implicad@s. Ha sido un trabajazo enorme!!

Rediseño detalle de reserva

En el equipo dedicado al apartado de Mis reservas en la web de www.centraldereservas.com, hemos estado trabajando las pasadas semanas en el nuevo diseño del detalle de reserva.

El detalle de la reserva de un alojamiento es un punto importante en el proceso de interacción del usuario en nuestra web. Es donde va nada más hacer una reserva para mirar que está todo correcto, pueden solicitar cambios, preferencias…

Por ello era muy importante su mejora sobre todo de cara a móviles.

Diseño del detalle de reserva

Vista en móvil del nuevo detalle

El cambio es visual y de interacción, con la idea de mejorar la usabilidad sobre todo en móvil y darle un aspecto más moderno.

Sigue leyendo

Experiencia de usuario al contactar con el cliente

Estos últimos días han sido ya 2 clientes quienes a la hora de rellenar el formulario de contacto o de modificar una reserva han puesto específicamente que querían que se les contactara vía email.

Aparte cuando he estado realizando trabajo de campo, observando trabajar a los agentes, en ocasiones algún cliente les especifica qué prefiere si llamada o email, o incluso la hora a la que pueden estar disponibles.

Mejorando los formularios de contacto

Estos casos 2 últimos casos, han contactado a través de formularios de la App. Uno era un usuario con discapacidad auditiva y el otro, no hablaba el idioma:

  • Soy sordo si me podéis contestar por correo electrónico os lo agradecería.
  • Vi que me intentaron llamar.  No hablo español, ¿podríamos comunicarnos por e-mail?

Sobre todo me impactó el primer caso, ya que no creo que sea agradable para esa persona el tener que estar especificar esa condición.

Es decir, siempre la norma dice que lo ideal es tener cuantos menos campos en los formularios, ya que es un dolor para los usuarios rellenarlos.

Nota: Sino lo has visto en grabaciones de sesiones o test con usuarios, te recomiendo que te leas este libro básico UX: Web Form Design (Filling the blanks) del genial Luke Wroblewski.

Pero en este caso creo que es bueno que el usuario pueda especificar la forma de contacto sin tener que contar detalles personales.

Sigue leyendo

Proceso de diseño centrado en los datos

Estos pasados meses hemos estado investigando los eventos que realizan los usuarios durante el proceso de búsqueda obteniendo información para detectar errores y orientar los nuevos diseños.

Esta forma de trabajar #DATADRIVENDESIGN o DDD es la ideal. Requiere tiempo para obtener los datos, analizarlos y ver qué hacer, pero es la única manera de tomar decisiones totalmente objetivas.

En este post os quiero comentar algunos de los datos que se han encontrado, las conclusiones obtenidas y las acciones realizadas.

Búsqueda por alojamiento

Casi un 60% de la gente busca por alojamiento. Lo cual quiere decir que ya han hecho el proceso de investigación antes y tienen muy claro a lo que van: a ver precio.

A raíz de esto,  vimos que esa búsqueda por hotel no daba disponibilidad. Por ello, aparte de investigar si hay algún problema, se pueden pensar en mejoras para ofrecer al usuario vías alternativas.

Por ejemplo hace poco, se puso un enlace rápido en el mensaje de no disponibilidad al calendario para cambiar las fechas.

Enlace nueva búsqueda

O mostrar otros alojamientos similares, o cuándo hay fechas disponibles en el alojamiento buscado.

Uso de los mapas

Una de las cosas que más ha sorprendido es lo poco que usan los usuarios la funcionalidad de ver el mapa con todos los alojamientos.

Mapa en el listado

Este uso es incluso menor si la búsqueda es por un alojamiento en concreto, un alto porcentaje como ya se ha indicado antes.

Es decir, el enlace para ver la ubicación que tenemos en cada alojamiento si que es usado (no hay que olvidar que este enlace también muestra la ubicación del resto). Pero el general, el del dibujo del mapa que se encuentra en la parte superior no.

Como en móviles ocupa mucho espacio, aparte de recargar el diseño de la interfaz, se ha decidido eliminarlo y hacer un rediseño simple de esa parte. A futuro esperamos hacer más cambios.

Acciones en el listado

Los acciones más realizadas por los usuarios en el listado (aparte de pasar a la ficha son):

Filtrar (16,39% ) > Modificar búsqueda > Galería > Ordenar > Paginar

Y en menor medida:

Ver el Mapa individual > Ver Mapa todos

Estos datos cambian si la búsqueda es por alojamiento, con menor uso de los filtros, el ordenar…

¡Está claro que el usuario busca algo en concreto!

Barra fija

En móviles, tanto en la ficha como en el listado al hacer scroll se mostraba al usuario una barra inferior con opciones.

barra-abajo-listado

Del listado, la única opción usada por un 10% de los usuarios era Ordenar. El resto: Filtrar, Ver mapa (todos), Buscar y Subir arriba, no. Esto nos dejo completamente asombrados ya que pensábamos que era tremendamente útil.

Gracias a los datos vimos lo que interesaba a los usuarios de verdad

En la ficha en móviles solo utilizaban y muy poco, la funcionalidad de «Volver al listado». El resto, nada.

Interacciones en la ficha

Aparte algunos navegadores sacan su barra de navegación propia también ahí abajo, lo que causaba problemas. Por ello se ha decidido eliminarla y reubicar las opciones más usadas en otro lugar.

Sigue leyendo

Nuevo diseño de formularios

Este invierno hemos cambiado el diseño de los formularios. Los objetivos a conseguir eran:

  • Que todos los sistemas usaran los mismos formularios del sistema de diseño
  • Obtener un diseño con un aspecto más moderno
  • Intentar que el formulario en su totalidad ocupara lo menos posible en altura
  • Mejorar la usabilidad en la visualización de los datos, el manejo de los errores…

Todos ellos eran importantes pero el primero sobre todo era básico, para evitar esfuerzos en el futuro.

Cualquier cambio que se hiciera en el sistema de diseño debía propagarse automáticamente al resto.

En un principio estudiamos la viabilidad de aplicar Material design pero decidimos crear unos patrones de diseño e interacción propios.

Para ello lo primero que se hizo fue recopilar los diferentes casos de formularios que existían en todos los sistemas para estudiar las funcionalidades y definir una serie de reglas (como buena fan que soy del Gov.uk):

  • Sólo se pedirá información cuando sea necesario.
  • Mejor formularios en una sola columna a no ser que no se quiera que haya scroll vertical. En el caso de que por cuestiones de espacio no se quiera alargar la página, el máximo serán 2 columnas principales.
  • Las labels siempre deben estar visibles.
  • Las labels deben estar asociadas al campo. Si se ponen encima del campo que haya separación visual del bloque con los otros campos.
  • Los textos de las label deben ser cortos y claros.
  • En móviles los campos irán normalmente al 100%.
  • Se leen mejor las minúsculas que las mayúsculas.
  • Placeholder o hint solo cuando aporte valor.
  • Agrupar los campos relacionados de forma visual.
  • Indicar el estado del campo en todo momento (focus, inactivo, error…)
  • En el caso de que haya errores debe quedar claro a que campo se refiere.

Sigue leyendo

La intuición no aplica en Ontruck

Seguimos con los post de la masterclass de @nachogil (diseñador de producto en Ontruck) en Factorystartup tocando ahora el tema de cómo realizan el proceso de diseño de producto.

Nacho nos cuenta el proceso de 8 pasos que siguen con cada nuevo desarrollo o proyecto basado en las características del producto de Ontruck.

Los 3 productos de Ontruck no son para cualaquier usuario. Es decir, no es un producto genérico tipo Facebook o Gmail. Con lo cual, el equipo de producto no es usuario de su producto, por lo que basan su aprendizaje en ser humildes y escuchar.

Eso les obliga a construir el producto que necesitan nuestros usuarios.

1. Comprender

  • Las ideas o problemas proviene de cualquiera.
  • Lo primero que hay que hacer es entender el problema.
  • No se piden soluciones, se plantean problemas. Las soluciones están sesgadas por la persona que las propone. Por cómo ve el problema, por cómo le afecta.
  • Nos importan los problemas, no las soluciones. Los problemas son más fáciles de compartir y discutir.
  • Observamos a los usuarios para comprender sus necesidades.

Y dijo esta frase que más valdría que muchas personas que cuestionan el coste de la UX y los métodos de research (investigación) deberían tener en cuenta:

Perder 1 día en ver y hablar con varios clientes te evita gastar 1 mes en desarrollo.

Clarito, ¿no?

2. Divergir

Una vez definido el problema, en una sesión de 2 horas, se reune todo el equipo (desarrollo, diseño y producto) e intentan pensar en soluciones obvias. El objetivo es intentar no seguir esas ideas, y generar entre todos la mayor capacidad de innovación.

Crazy Eights

Para ello, para diverger, y generar el mayor número de posibles soluciones, aplican técnicas para divergir y encontrar otras ideas, como Crazy Eights, Mapas mentales, Mapas de empatía,  How Might we…? o simplemente coger post-its y poner ideas y luego clasificarlas…

3. Decidir

En esta etapa el objetico es de las ideas viables que entran en scope clasificarlas y quedarse con una. Para ello:

  • Se decide el alcance del proyecto (scope).
  • Siempre se orientan a reducir el desarrollo. Mínimo desarrollo posible en todo (minimal waste, puro lean!), tanto en diseño como en código. Si puedes falsear la solución con algo manual, comprueba que es la adecuada y ya invierte el tiempo en hacerlo.
  • Se comparte con Tech, QA, Operaciones, Ventas y Mkt.
  • El resultado suele ser un plan para dividir el proyecto en varias fases.

Desarrollo de producto Lean

Ese plan siempre comienza con un MVP (Minimuml Viable Product) que si se puede hacer sin pintar pantallas y sin tirar código mejor.

Sigue leyendo

Metodología de Nacho Gil para diseño de producto

Seguimos con la masterclass de @nachogil (diseñador de producto en Ontruck) y su «awesome design methodology» para diseñar producto. Como él comenta, no hay que  lo más importante es la tenacidad y tener sentido común.

¿Cueces o enriqueces?

Por cada capa de cera que se da al producto se debe quitar 3.

Dar cera, pulir cera.

Cuando hablamos de productos tecnológicos poner es relativamente más económico que si hablamos de productos físicos. No es lo mismo añadir una nueva feature que poner un chalet en el mercado o fabricar una pieza de plástico (CAD/CAM, Molde, Inyeccción…).

Dar cera pulir cera

Por ello debemos evitar añadir cosas porque sí. Esto tiene que ver con lo que comentamos en el anterior post sobre «Less is more».

Mirar fuera

Cuando se tiene alguna duda sobre cierto componente o algún patrón de interacción o simplemente se quieren explorar alternativas, es bueno coger algo de aire fresco y mirar alternativas fuera de tu sector.

Nacho tambien comenta que el se inspira mucho en el mundo físico para diseñar un producto digital, ya que es donde vivimos todos los usuarios.

Donde hay patrón no manda designer

No innoves en cosas que ya existen a no ser q sea el core de tu negocio. Gasta esos recursos en cosas que sean más importantes.

Por ejemplo si debes diseñar un chat, porque tu aplicación debe tener esa funcionalidad, cópialo de las demás. No es core, no aporta nada, hay un patrón, td el mundo sabe usarlo. No inventes la rueda cuando no es necesario. Tira para adelante. Prioriza.

Sigue leyendo

Diseño de producto con Nacho Gil en Valencia

El pasado jueves Nacho Gil (@nachogil) impartió la clase de Diseño de Producto en el curso Factory Start Avanzado.

Ontruck es una startup que se dedica a ser intermediario entre los camioneros y las personas que desean envíar palets, para de esta forma que entren en cotacto directamente y aprovechen los recorridos y los espacios que disponen.

Ontruck

Se esta convirtiendo en líder de su sector en un tiempo récord y el equipo de producto ha sido clave en la estrategia por lo que tener en Valencia a Nacho contándonos como lo están haciendo era una ocasión que no me podía perder.

Nacho comenzó la charla explicando las diferencias entre conceptos como la belleza, la estética y el diseño, contándonos lo que para él es un buen diseño.

Salieron nombres como Dieter Rams y sus 10 principios sobre el buen diseño, Don Norman y sus principios de diseño de interacción y la menos conocida, Lillian Moller Gilbreth, inventora del famoso «Triángulo de trabajo en la cocina“ (The Kitchen Work Triangle”).

Pero no por aplicar un buen diseño, se solucionan todos los problemas de negocio.

Consejos a evitar cuando se diseña

Nacho continua la clase con una lista de consejos para evitar «Cagarla a lo grande by design™» como la «Featuritis«. Como cuando se quiere añadir todo lo posible a un producto y se acaban teniendo monstruitos que nadie sabe utilizar.

Featuritis

Una mezcla del famoso «Less is more» o como dice Eduardo Manchón:

«Diseñar para lo más probable y no para todo lo posible»

Y es que existe una fina relación entre el valor añadido que se aporta y la complejidad que se genera, difícil de medir pero fácil de representar.

Valor añadido

Porque añadir cosas porque si, porque se puede, mal. Se debe pensar en lo que aporta valor al usuario y a negocio. Al lanzar una empresa, si se sale al mercado con una sola proposición es mucho más fácil.

Sigue leyendo

Design Thinking

Soy muy partidaria de que cuando diferentes personas participan en la creación de un producto o se centran en la solución de un problema es cuando aparecen las mejores ideas. Ya que es imposible que una sóla persona sepa toda la información hay que aprovechar el conocimiento de todos para crear algo diferente.

Para obtener un resultado creativo y novedoso, tiene que existir cierta cantidad de caos, pero es necesario empezar por un orden.

Pero en el día a día nos olvidamos de esto, y en vez de juntar los cerebros trabajamos de forma individual, desaprovechando esos increibles recursos que son las personas que tenemos a nuestro alrededor.

Design Thinking es un método para la resolución práctica y creativa de problemas.

Ayuda a facilitar el proceso de innovación permitiendo trabajar en grupo de forma dinámica, comunicativa y eficiente hablando el mismo idioma y sin tener en cuenta egos, ni posiciones jerárquicas e involucrando a todo el mundo de la misma forma.

Trabajando de forma dinámica y positiva

Gracias al poder de la escritura y el dibujo todo el mundo tiene oportunidad de aportar sus conocimientos de la misma forma. Logra evitar que siempre hablen los mismos, poniendo al mismo nivel todas las ideas e integrando el conocimiento de todos en el trabajo común.

Cuando alguien habla, solo esa persona tiene el poder en ese momento.

Si en vez de hablar, se escriben las ideas en dibujos o etiquetas, todo el mundo trabaja a la vez, construyendo algo de forma conjunta. Además se evita el bias del poder de la oratoria e influenciar en otras personas aunque sea una mala idea.

Al escribir la idea deja de ser de la persona pasando al grupo.

El hecho de dibujar o escribir dinamiza la actividad, ya que es más entretenido que estar escuchando a una persona. Y es que la capacidad de atención del ser humano es limitada, siendo cada vez menor.

Design Thinking

Workshop de Design Thinking usando Manual Thinking

Además al ordenar las etiquetas o post-its nos movemos, cambiando el equipo de forma constante de posición y postura, tanto de forma mental como física.

Sigue leyendo

La II Guerra Mundial, Japón y su importancia en la UX

Últimamente he estado leyendo mucho sobre Lean, Agile, Scrum, Kaizen… Y bastantes términos y artículos mencionan Japón, viniendo en muchos casos relacionados con su rápido resurgimiento después de la destrucción que vivió durante la Segunda Guerra Mundial.

Por ejemplo, el framework Scrum fue creado por Ken Schwaber y Jeff Sutherland directamente después de la publicación de Ikujiro Nonaka e Hirotaka Takeuchi de «The New New Product Development Game» en 1986, en la Harvard Business Review (HBR).

Pues bien, Nonaka fue contratado por el gobierno japonés después de la Segunda Guerra Mundial para ayudar a analizar por qué perdieron la guerra.

Otro ejemplo más relacionado con la UX o Experiencia de Usuario es el caso de W. Edwards Deming y su sistema de medios para generar de forma sostenible y económica productos y servicios que satisfagan los requerimientos del cliente (¿te suena?)

William Edwards Deming

Como consecuencia de la II Guerra Mundial, Japón estaba muy dañado, a pesar de diferentes cómites de los países aliados, no había grandes mejoras.

La situación era grave ya que no podía producir la sufciente comida para alimentar a la población, y no podían exportar bienes para ganar dinero para comprar alimentos, ya que la producción industrial era muy mala (patrimonio negativo).

El Dr. Deming (1900-1993) ingeniero y consultor de gestión estadounidense, fue invitado por el directore ecutivo de la a Unión de Científicos e Ingenieros Japonenes, JUSE (Japanese Union of Scientists and Engineers), Qenichi Qoyanagi, para que les diera a los investigadores, líderes empresarios e ingenieros, una serie de conferencias sobre métodos de control de calidad y sus teorías de gestión en agosto de 1950 en Tokyo (Hakone Convention Center).

En ellas animaba a los japoneses a producir con calidad, siguiendo el método de realizar una investigación y mirar a futuro para producir bienes que tuvieran mercado durante mucho tiempo. Al finalizar el verano, había llegado a le gerencia de la mayoría de las grandes compañías, como Sony.

Muchos consideran que Deming fue una de las inspiraciones del milagro económico japonés de posguerra (1950 a 1960) al influenciar con sus ideas la forma de trabajar, entre ellas:

  • Mejorar el diseño de los productos para mejorar el servicio
  • Conseguir el mejor nivel uniforme de calidad de producto
  • Mejorar las pruebas de productos en el lugar de trabajo y en los centros de investigación
  • Aumentar las ventas gracias a los mercados secundarios (glbales)

En resumen el mensaje a los líderes japoneses fue que si invertían en calidad e investigación, la mejora en el diseño y la calidad a la larga reduciría los gastos al tiempo que aumentaría la productividad y la cuota de mercado.

Varios fabricantes japoneses aplicaron sus técnicas y experimentaron niveles de calidad y productividad desconocidos hasta el momento. Combinando el aumento de calidad junto con un coste reducido creó una nueva demanda internacional de productos japoneses.

Sigue leyendo