Archivos de la categoría Diseño web

Diseño de páginas web realizadas por saraclip. Zaragoza.

UX Team Leader en Capgemini

Tiempo de lectura: 1 minuto

Desde septiembre 2015 hasta octubre 2016 he formado parte del equipo UX de Capgemini en Valencia, siendo los últimos 10 meses UX Team Leader de uno de sus clientes más importantes.

Capgemini

En septiembre de 2016, tomé una de las decisiones personales más importantes de mi vida y decidí buscar nuevos retos que se centrasen más en la experiencia con los usuarios.

Los trabajos que realizábamos se basaban en la creación y evolución de diferentes guías de estilo para cada dispositivo, implementadas en un framework y el desarrollo de aplicaciones principalmente internas, desde la toma de requisitos, prototipado, diseño y posterior ejecución.

Lógicamente, por confidencialidad, no puedo subir ejemplos de los trabajos realizados, pero puedes ver diseños anteriormente realizados en otros proyectos.

Rediseño de la página de reserva

Tiempo de lectura: 2 minutos

Continuamos mejorando el proceso de reserva de Centraldereservas.com. En concreto se trata de la página más importante para mí, donde el usuario finaliza su reserva de alojamiento, poniendo sus datos personales y bancarios.

La página donde el usuario finaliza su reserva de alojamiento es una de las más delicadas de todo el proceso. El principal problema de la actual era que no era responsive por lo que los usuarios que reservaban con el móvil tenían serios problemas para visualizar y rellenar los campos al estar diseñada para su uso en un ordenador. Con lo cual al ser el punto más doloroso de todo el proceso, es una tarea de prioridad número 1.

El cambio a una versión responsive ha sido un proceso complejo y duradero, pero indiscutiblemente necesario.

Otra de las páginas más complejas, el listado de alojamientos disponibles, ya había sido lanzado siendo un éxito el incremento de búsquedas en móviles. Ahora le tocaba a la página donde el usuario tiene que perder su tiempo rellenando un odiado formulario (¿a quien le gusta rellenar formularios?), y pagar.

Listado alojamientos

La cuestión es que dado como estaba construida esa página no era tan sencillo cambiar las CSS y adaptar la página a todos los dispositivos. Si se quería aprovechar el mismo código para todas las versiones y no generar 3 páginas diferentes (desktop, iPad y móvil) con su incremento de coste de mantenimiento, implicaba un cambio en la estructura del código de la página y la ubicación de ciertos bloques de contenidos.

Lógicamente, en el proceso están implicados muchos stakeholders, incluido el CEO. No siempre es fácil hacer entender a una persona ajena al código, que si se quiere usar el mismo código para todos los dispositivos la ubicación de ciertos elementos a lo mejor no puede ser igual. Se trabajó mucho en ello, reestructurando la información para que se visualizase en el orden adecuado en todos los dispositivos.

Dada la importancia que tiene en el negocio que el proceso sea fluido y sencillo, el cambio debía ser muy estudiado, ya que cualquier equivocación puede llevar a un descenso en el número de clientes que finalizan sus reservas.

A continuación se muestra a la izquierda como era el diseño anterior y como es la versión actual en su vista de escritorio.

sr-3

Aquí vemos como fue el diseño para dispositivos móviles, tanto del listado como de la página de confirmación.

Página de reserva móvil

Página de confirmación

Una vez que el usuario ha seleccionado el método de pago y este se ha efectuado, el usuario necesita ver la página donde se le confirma que el pago se ha realizado correctamente y los detalles de la reserva.

Sigue leyendo Rediseño de la página de reserva

Seguimos mejorando el listado de reservas en los móviles

Tiempo de lectura: 2 minutos

Hace unas semanas lanzábamos el nuevo listado del sistema de reservas adaptado a móviles. 

Y como empresa AGILE que somos, hemos observado los primeros datos y pensado en como podemos optimizar el diseño.

Listado de alojamientos

Mejoras diseño
Orden y filtros

Lo primero que hemos hecho ha sido subir las funcionalidades de ordenar y filtrar a la parte superior, justo debajo de la búsqueda, quitando en la primera visualización la barra del pie. Al hacer scroll la barra inferior vuelve a aparecer.

Sigue leyendo Seguimos mejorando el listado de reservas en los móviles

Listado de alojamiento adaptado a móviles III

Tiempo de lectura: 2 minutos

Entre las novedades más destacadas está la visualización de las imágenes del alojamiento y la posibilidad de interactuar entre los filtros y el mapa.

Galería de fotos

La galería es una de las zonas más visitadas por los usuarios a la hora de reservar un alojamiento.

Por ello, para facilitarles el acceso pusimos que tanto desde el listado como desde la ficha pudieran acceder a ella.
Galeria en el móvil

Debajo de la imagen pone el nombre del alojamiento, y el número de foto que estás visualizando, así como el número total de imágenes para que el usuario sepa cuantas imágenes le quedan por ver.

Mapa

El mapa era otro de los puntos críticos que queríamos que quedara muy sencillo e intuitivo para el usuario, ya que mucha gente busca su alojamiento en función de donde esté situado.

Sigue leyendo Listado de alojamiento adaptado a móviles III

Listado de alojamiento adaptado a móviles II

Tiempo de lectura: 1 minuto

Seguimos avanzando novedades del nuevo diseño del listado de alojamientos adaptado a móviles.

Filtrado de resultados

Una de las mayores mejoras demandada lógicamente por los usuarios, respecto al listado que usa la App, y la antigua web móvil, fue la posibilidad de filtrar los resultados.

Se accede desde el enlace situado en el pie del listado:

Filtros en el movil

¿Cómo puede un usuario elegir su alojamiento perfecto entre las más de 800 opciones que encontramos en Madrid sino es acotando los resultados?

Pues vamos a hacérselo fácil:

Sigue leyendo Listado de alojamiento adaptado a móviles II

Listado de alojamiento adaptado a móviles I

Tiempo de lectura: 2 minutos

Hace unas semanas, lanzamos en Centraldereservas.com el nuevo listado de reservas optimizado a móviles y tablets pequeñas

Hasta ahora, estábamos en un proceso de cambio, y desde una web optimizada para móviles, el usuario al lanzar la búsqueda del alojamiento, acababa en la versión desktop de resultados.

Es decir, pasaban de una página responsive, adaptada a una navegación en móvil, a una página donde o hacías zoom para ver los detalles o tenías muy buena vista ;-).

Diseño móvil

Los usuarios, acostumbrados a este tipo de cambios, no se sorprendían (o no les quedaba más remedio) y reservaban. Pero ahora, gracias a este desarrollo pueden navegar en una web pensada para la reserva desde dispositivos móviles, optimizada, tanto en diseño como en su desarrollo.

¿Qué importa si el diseño es muy bonito y usable, pero  cuesta 5 minutos descargarlo?

Por ello, el equipo de programación ha sido muy cuidadoso, teniendo en cuenta el entorno de uso de los dispositivos móviles en todo momento, ya sea en los tiempos de descarga como en la experiencia ofrecida.

Era muy importante ofrecer una experiencia completa en la que el usuario no sintiera que le faltaban funciones que usa en la versión de desktop. Lógicamente, algunas se han suprimido o se han cambiado de lugar, pero se ha realizado un trabajo a conciencia de que las importantes estén:

Funciones

Pero no sólo nos hemos quedado en el listado…

Sigue leyendo Listado de alojamiento adaptado a móviles I

Diseño responsive de la página de valoración

Tiempo de lectura: 2 minutos

Entre los cambios que ha habido para hacer responsive la zona privada de “Mis reservas” uno de ellos ha sido la página de valoración del alojamiento.

Aquí os enseño la nueva página de valoración del alojamiento:
Nueva página de valoración del alojamiento

Aunque a nivel visual el cambio sea importante, lo más destacable es su adaptación a todos los dispositivos, es decir el cambio en su maquetación para obtener un diseño responsive.

Diseño responsive

Anteriormente esta página estaba basada en tablas y su visualización y uso en tablet y móviles no era lo más adecuada.

El objetivo principal de esta página es recopilar información real de los usuarios

Es decir, mostrar opiniones y fotografías de usuarios que se han alojado en los alojamientos, para que futuros clientes puedan tener una visión real de donde van a estar alojados en su viaje.

Sigue leyendo Diseño responsive de la página de valoración

Anular/Modificar reserva App

Tiempo de lectura: 1 minuto

Introducción de una nueva funcionalidad en la App de reservas de alojamientos de Centraldereservas.com.

El usuario en el momento que lo desee puede modificar o cancelar su reserva conociendo los costes si estos existen.

Se realizó un prototipo interactivo de bajo nivel para verificar la correcta interacción del usuario con la nueva funcionalidad.

Sigue leyendo Anular/Modificar reserva App

Diseño de la cabecera

Tiempo de lectura: 1 minuto

Troya no se venció en un día y lo mismo ocurre con las páginas web. No siempre es fácil o posible hacer el cambio a futuro perfecto y se pasa por diseños y desarrollos intermedios.

En www.centraldereservas.com se pasó de un diseño completamente pensado para ordenadores, a tener ciertas partes de la web adaptadas a tablet y móviles.

Cabecera de la web

Vemos el diseño actual de los elementos de la cabecera en escritorio

Por ello había zonas como las cabeceras o los pies que en medio de este proceso, lo que se hizo fue adaptar el diseño original para escritorio a móviles, sin pensar en el uso y en el espacio propio de cada dispositivo.

Sigue leyendo Diseño de la cabecera

Rediseño de la página de alojamiento

Tiempo de lectura: 3 minutos

Poco a poco, aunque menos rápido de lo que me gustaría ;-), vamos implementando cambios y mejoras, tanto en diseño como en usabilidad.

Y es que, sin cambiar la maquetación de ciertas páginas, es decir, su “core” es imposible que cumplan los objetivos deseados en determinados dispositivos.

Quieres un diseño que proporcione la mejor experiencia desde cualquier dispositivo

El problema, era que como la mayor parte de las webs, ni su estructura ni su experiencia, estaba pensada para tablets o móviles, sino que sólo estaba optimizada para desktop.

Diseño página de alojamiento

Diseño responsive de la página de alojamiento

Y lógicamente dado el porcentaje de tráfico actual que viene de móbiles y tablets, era impensable continuar así, sin tener la web optimizada para dar la mejor experiencia.

Hace más de 2 años, cuando entre en Central de reservas, la página de alojamiento era similar a esta imagen:

Sigue leyendo Rediseño de la página de alojamiento