Onikore, más que una nueva guía de estilos (o sistema de diseño)
Onikore es como llamamos en Centraldereservas.com a la evolución de la guía de estilo actual, o lo que llamaríamos hoy en día, el sistema de diseño (que como dice Jeff Gothelf y Josh Seiden en su libro Lean UX, son como «Guías de estilos con esteroides»).
Los objetivos era varios, pero sobre todo había uno principal, y era que el conocimiento actual dependía exclusivamente de 2 personas, y, aparte de que se iba a ampliar el equipo de front, se quería que todo el equipo de desarrollo pudiera integrar los componentes de forma autónoma y sin dependencias, en proyectos SSR (Servers Side Rendering) y en proyectos SPA (Single Page Application, Angular), que es hacia donde está tirando la empresa actualmente.
Aparte, ahora cuando se aplicaban cambios en los componentes había que duplicar el trabajo en varios proyectos, lo cual era una pesadilla de mantener. Gracias al nuevo desarrollo solo se aplicaran en un sitio, integrándolos después en los proyectos.
De donde venimos
El proyecto de la guía fue una creación que se hizo cuando hace 7 años se planteó una fase de rediseño del todas las plataformas online que tenía la empresa de cara al cliente, en concreto estas 3:
- Portales, la parte dedicada al SEO y donde aterriza el usuario.
- Sistema de reservas, funnel de venta
- Mis Reservas, zona interna de cliente.
Como se iba a modificar toda la parte visual, y teníamos que seguir trabajando y evolucionando los componentes, se hizo un proyecto nuevo para poder probar toda la maquetación, estilos, scrips, marcado (HTML)… Ese proyecto fue cogiendo forma y aparte de la integración, también se añadió una parte de documentación, y se empezaron a crear páginas estáticas donde los desarrolladores podían entrar y ver el código.
Pero la guía evolucionó toda vía más y acabó, siendo una herramienta para desplegar todos los assets, empaquetando los ficheros estáticos y creando releases, para tenerla en la CDN, siendo también un módulo que ahora se importaba en proyectos tipo SPA.
Esto cogió cierta envergadura, pero el problema de fondo era que la aplicación estaba basada en PHP y la arquitectura del bundler era Node, lo cual era un ecosistema complejo de mantener. Para haceros una idea, cuando se empezó con el desarrollo todo se basó en una arquitectura de aplicación basada en Silex, un micro-framework de Symphony, que permitía temas de enrutamiento para hacer páginas internas y todo lo que es la parte de templating, basada en PHP, usando Latte de fondo. Como empaquetador, para generar estáticos, al inicio se usaba Gulp, y posteriormente se pasó a Webpack, aunque no se mejoró mucho la situación porque la complejidad seguía siendo elevada.
Por ello, hace tiempo se comenzó a pensar como mejorar esta forma de trabajar, y se desarrolló una versión 2 del sistema de diseño (bautizada como Onikore), pensando en herramientas que sustituyeran el ecosistema antiguo. Para ponernos en contexto, las personas implicadas en su creación hemos sido 3 fronts y 2 UX.
Seguir leyendo «Onikore, más que una nueva guía de estilos (o sistema de diseño)»Nuevo comportamiento del zoom en el mapa y los filtros
Aunque no es la mejora que buscábamos y que comentábamos en el anterior post (otras prioridades han venido), esta semana hemos sacado un cambio en la utilización del mapa y los filtros.
Se suelen ver 2 formas de interactuar entre un mapa que muestra resultados y los filtros que nos ayudan a encontrar lo que buscamos:
- El mapa siempre intenta mostrar todos los resultados que haya dentro de esos filtros. Y si he hecho zoom, me lo actualiza para visualizar todos los resultados.
- El mapa se queda fijo aunque se cambien los filtros, pudiendo no mostrar ningún resultado.
Pues bien, en www.centraldereservas.com siempre se ha priorizado el ofrecer resultados al usuario. Una muestra de ello, es que si una población no hay disponibilidad, se amplia el radio (lógicamente hasta un cierto límite) para ofrecerte alojamientos cercanos.
Por eso nuestro comportamiento del mapa, era el del punto 1. Te explico, el usuario hacía una búsqueda Zaragoza y le salían unos 200 alojamientos de todo tipo, hacía zoom para acercarse al centro, ya que quiere alojarse cerca de la plaza España y el Pilar, y seguía viendo que le aparecían muchos alojamientos. Por ello se pone a filtrar a ver que es lo mejor que puede encontrar para su presupuesto: 3, 4 estrellas, con desayuno… y de repente, bam!! el mapa ya no le muestra la zona centro sino que le muestra todo Zaragoza.
Eso resultaba muy molesto, tanto a clientes como a agentes que están haciendo el mismo proceso con un posible cliente al teléfono. Asi que lo hemos cambiado, manteniendo el nivel de zoom.
Y si filtras se mantiene el zoom, mostrando los resultados:
Pero si no hay no se muestra nada, aunque sigue viendo la columna con los filtros aplicados en desktop, y las pastillas azules encima del listado (si está en la vista combinada), y en la vista móvil un indicador (2) al lado de los filtros para saber el nº de filtros aplicados.
¿Cómo se usa el mapa en la búsqueda de un alojamiento?
En www.centraldereservas.com llevamos unas semanas mejorando el proceso de búsqueda de alojamiento con el mapa. El verano de 2022 conseguimos dar una gran salto y mostrar una vista combinada de alojamientos y mapa (antes teníamos la vista listado o la vista mapa).
El objetivo del cambio fue aprovechar que cada vez tenemos pantallas más grandes lo que nos permite la vista combinada de varios elementos, pudiendo elegir el usuario la vista que más le gusta para ver los resultados.
Google Hotels y Airbnb, muestran esta vista cuando un usuario busca un alojamiento. Nosotros por motivos de negocio no podemos ofrecerla directamente sino que deben pasar previamente por la vista listado.
¿Qué sucede cuando el usuario está con el mapa?
Pero vamos a centrarnos en qué pasa una vez que el usuario ha abierto el mapa. Normalmente se muestra con un nivel de zoom que engloba todos los alojamientos de la búsqueda seleccionada. Por ejemplo si hago una búsqueda en nuestra web de «La Manga del Mar Menor» veré lo siguiente:
Pero si te mueves un poco a ver alguna población cercana ves el vacío en el mapa, 
cuando la competencia vemos que muestra una mejor experiencia de usuario, presentando resultados o al menos indicándole al usuario qué sucede.
En nuestra web si quieres ver algún resultado, tienes que ir lanzando la búsqueda de población en población lo cual es un proceso lento y tedioso para usuarios y agentes.
Qué hace la competencia
Google Hotels, Airbnb y Booking tienen lo que para mi es ideal: al mover el mapa automáticamente van apareciendo los markers con los precios en las nuevas zonas, aunque no sea donde hayas buscado. Aunque no todos funcionan de la misma forma:
Seguir leyendo «¿Cómo se usa el mapa en la búsqueda de un alojamiento?»Caso de uso: como estamos trabajando en el desarrollo de una herramienta interna
Como os comentaba en este post, llevamos un año o asi, trabajando en el desarrollo de un proyecto interno para sustituir a una herramienta que lleva desde los inicios de la empresa, con casi 15 años de desarrollo. Como podréis imaginar la parte visual está basada en un diseño muy antiguo, y no está pensada para móviles o tablet, con lo cual dificulta su acceso con otros dispositivos que no sea ordenadores con pantallas grandes.
Tiene tantas funcionalidades integradas que dado que se han ido añadiendo con el tiempo, la complejidad de la interfaz es muy elevada, con una curva de aprendizaje muy larga en el tiempo. Incluso los agentes que llevan más tiempo empleándola, tienen dificultades para encontrar las cosas. Por ello el objetivo principal era optimizar los procesos de trabajo de todos los usuarios, para asi sacar datos y estadísticas y mejorar los tiempos de ejecución de tareas.
El equipo
Anteriormente se había probado realizar este proyecto solo con desarrolladores cogiendo componentes de un conocido framework. Esta vez exigimos que el equipo fuera multidisciplinar con integrantes de experiencia de usuario y sobre todo teniendo en cuenta a los usuarios desde el inicio.
El core del equipo cuenta con 1 team leader, 3 backs, 2 fronts y 2 UX/UI (una de estas personas asi mismo da soporte al team leader, asi como hace de tester). El team leader que también programa y los backs están «más o menos» al 100% con el proyecto, pero el resto además damos soporte en otras áreas de la empresa. Como podrás imaginar estamos bastante ocupados, teniendo que saber priorizar muy bien las tareas de los diferentes proyectos en los que trabajamos.
Aparte contamos con:
- 1 persona de negocio que va haciendo análisis de como mejorar los procesos actuales ya que no queremos simplemente replicar lo antiguo,
- 1 team leader que gestiona el desarrollo de la herramienta antigua, que con su equipo desarrolla los webservices que necesitamos,
- el equipo de usuarios: un coordinador de los agentes, asi como agentes con algunos con años de experiencia y otros nuevos que prueban todo lo que se diseña, desarrolla y nos dan constante feedback.
Hay que comentar además que antes de comenzar el proyecto, parte de los integrantes del equipo de UX habíamos estado haciendo observación directa con los participantes con el objetivo, en esos momentos, de detectar mejoras para lo que era la herramienta actual (la que se va a sustituir ahora). Por ello ya conocíamos parte de la problemática asi como las formas de trabajar de los usuarios.
Comenzando el proyecto
Al inicio del proyecto, el equipo de desarrollo decidió la tecnología que se iba a usar. A la par desde UX realizamos un estudio de posibles interfaces para decidir cual iba a ser la estructura de diseño en la cual se iba a basar todas las pantallas. Había que tener en cuenta que aunque el 100% del trabajo de los agentes se realiza con un ordenador, se quería que no estuviera su diseño enfocado solo en desktop sino que fuera completamente adaptado a cualquier dispositivo.
Con negocio y los agentes se decidieron cuales eran las principales funcionalidades que se tenían que abordar para una primera versión, y se preparó un backlog para los primeros sprints.
Seguir leyendo «Caso de uso: como estamos trabajando en el desarrollo de una herramienta interna»Trabajando en un proyecto interno
Hola, se acerca el final de 2022 y la verdad es que con la peque poco tiempo he podido dedicarle al blog. Justo me llega para poder leer algún libro o post!
En el trabajo además llevamos casi todo el año centrados en desarrollar una herramienta interna para los agentes, con lo cual tampoco he ido publicando contenido aun porque se ha hecho mucho trabajo de investigación y análisis con los usuarios, de estudio de campo para ver como trabajaban con las herramientas actuales, entrevistas, encuestas, tests probando los que íbamos desarrollando…
Además aunque hay elementos compartidos con el sistema de diseño de la web para el público www.centraldereservas.com, otros componentes son totalmente nuevos, asi como la interfaz ya que no tienen nada que ver las necesidades de un sitio con las del otro.
Aunque aun queda mucho trabajo por hacer, estamos todos muy contentos con el resultado, tanto los desarrolladores como los usuarios.
Para que os hagáis una idea de la magnitud del cambio, esta nueva herramienta va a sustituir a algunas que llevan en la empresa desde casi sus inicios, con casi 15 años de desarrollo. Son sistemas que están usando tecnología que ya no tiene soporte, y como imaginareis la parte visual no está pensada para móviles o tablet, con lo cual dificulta su acceso con otros dispositivos que no sea ordenadores con pantallas grandes (dada la magnitud de la cantidad de datos que se muestra).
Asi mismo, poseen una complejidad y una interfaz tal, que la curva de aprendizaje es muy elevada, habiendo dificultades para que incluso los usuarios que más tiempo llevan usándola la empleen de la misma forma, por no decir, que imposible sacar datos y estadísticas para mejorar los tiempos de ejecución de tareas.
Seguir leyendo «Trabajando en un proyecto interno»Dando confianza al usuario
Una de las máximas en el proceso de compra de cualquier producto o servicio online es que el usuario se sienta seguro y confiado.
Como ya sabéis, la principal diferencia con una tienda física es que no tenemos al vendedor al lado para preguntarle cosas o tocar el producto si tenemos dudas. Para mejorar esto, las personas que nos dedicamos a la experiencia de usuario empleamos muchas técnicas, como poner buenas fotos de los productos donde se vean todos los detalles, poner opiniones de otros usuarios, instalar un chat para que el cliente pueda preguntar dudas en directo, repetir los datos de la compra en el proceso de pago….
Una mejora que llevaba tiempo queriendo poner en www.centraldereservas.com es que el usuario viera durante el proceso de búsqueda los datos de lo que ha buscado, y es que a pesar de que a lo largo del proceso de compra se informe en varios lugares de ello (listado, ficha, formulario…), en ocasiones nos llegan incidencias donde el usuario no se ha dado cuenta y ha puesto una fecha incorrecta, o no ha metido al niño…
Por ello hemos implementado en la modal esos datos:
Haciendo el check-out más sencillo
¿A qué todos odiamos rellenar formularios? Sin duda, ver un formulario enorme en una página web o app, hace que tiemble más de una persona, y más si es lo único que se interpone ante lo que quieres comprar. Y es que normalmente para poder realizar una compra online, es indispensable meter algún dato, y eso se hace con formularios.
Aparte de ser odiados por los usuarios, según como hagas tu proceso de check-out puede hacer que empeore tu conversión. Inviertes un montón de tipo (y dinero) en anuncios, hacer una web preciosa, con una home y unas páginas de aterrizaje alucinantes, una ficha de producto con unas fotos preciosas y un montón de información útil, y cuando el usuario intenta comprar la experiencia se convierte en una pesadilla.
Este proceso es tan importante que Amazon es famoso por realizarlo en 1 solo paso:
Pero para llegar a este punto, antes previamente tienes que haberte registrado, y haber metido unos datos como la dirección o la tarjeta. Aparte de estar logueado en el proceso de la compra para que te reconozca como ese usuario.
Y aunque muchas empresas para reducir esta fricción en el proceso de pago, te ofrecen registrarte, guardando asi los datos para futuras compras… Esto es muy bonito, pero a no ser que seas un usuario recurrente no sueles darte de alta. A nadie le gusta estar dejando su tarjeta por ahi almacenada… Otra cosa es que te obliguen a registrarte para hacer la compra, lo cual debería estar prohibido je je!!
Por ello es importante que el proceso de pago sea lo más sencillo posible, sin saturar al usuario con mucha información. Y si necesitas que rellene ciertos datos, ir pidiéndoselos poco a poco, ya que si se los pides de golpe le va a dar pereza, y puede que ni comience el proceso, pero si los va rellenando poco a poco, psicológicamente se va a sentir más tentado a acabar lo que ya ha empezado. A nadie nos gusta dejar nada a medias!!
Seguir leyendo «Haciendo el check-out más sencillo»Nuevo resumen de búsqueda
A la hora de hacer una compra, es importante que el usuario sepa en todo momento qué está comprando. Por ello, en Centraldereservas.com siempre hemos mantenido visible en todo el proceso de compra de alojamiento los parámetros de búsqueda del usuario.
De hecho una de las cosas que siempre han generado más controversia entre la opinión de los agentes de atención al cliente y lo que proponíamos desde el punto de vista de la experiencia de usuario, era el tema de la caja pre-rellenada con la búsqueda anterior.
Los agentes, que están hablando con clientes todo el tiempo, han vivido en alguna ocasión como algún cliente enfadado llamaba diciendo que se había equivocado al hacer la reserva por poner mal los datos de búsqueda. Y los agentes tenían miedo de que si la caja estaba rellenada, los clientes iban a tener aun más problemas.
Desde el punto de vista de la experiencia de usuario, si le puedes evitar meter al cliente 2 veces la misma información, es mucho mejor.
Normalmente usas los mismos dispositivos para hacer las búsquedas: tu móvil, tablet, ordenador del trabajo… buscando de forma habitual para las mismas personas. Si tienes pareja y 2 hijos de 2 años y 5 años y estás preparando las vacaciones de verano, y estás probando a ver precios en diferentes destinos, agradeces no tener que meter en cada búsqueda todos los datos de las personas.
Seguir leyendo «Nuevo resumen de búsqueda»Mostrando de forma más clara las políticas de cancelación
Una buena experiencia de usuario consiste en mejorar la vida a las personas. Es por ello que cuando un producto que se adquiere, no se puede devolver, como un billete de avión, esto debe quedar claro al usuario.
En www.centraldereservas.com permitimos al usuario personalizar su reserva de alojamiento, añadiendo actividades o seguros durante el proceso de compra. Cada nuevo producto tiene una política de cancelación propia, la cual se muestra tanto a la hora de seleccionarlo como en el formulario de compra.
En la ficha del alojamiento se muestra asi:
En el formulario asi:
Hasta ahora estos extras eran cancelables hasta el comienzo de la reserva pero ahora algunos ya no lo son. Es por ello que hemos introducido varias mejoras para que el usuario reconozca de forma más sencilla posible cuales son reembolsables y cuales no.
Seguir leyendo «Mostrando de forma más clara las políticas de cancelación»Añadiendo divisas al proceso de compra
Otra de las cosas que hemos implementado para ofrecer un mejor servicio a aquellos usuarios que vienen de otros países es implementar la posibilidad de seleccionar entre muchas más divisas a la hora de lanzar la búsqueda.
Ahora mismo teníamos 6 idiomas y 9 divisas en la web. Los idiomas se corresponden a los portales que tenemos traducidos, y las divisas a aquellas que más usaban nuestros usuarios.
Gracias al trabajo realizado para aparecer en Google Hotels, hemos podido ampliar nuestro mercado internacional de una forma como nunca antes lo habíamos hecho. Por ello, las divisas existentes se nos quedaban cortas, pudiendo causar problemas al usuario que volvía a nuestra web después de habernos visitado a través de Google Hotels, que veía todo en EUR y solo podía elegir entre 9 divisas.
Por ello las hemos ampliado hasta 65 nuevas:
