Empezar un proyecto desde cero siempre supone un reto. Adaptar un proyecto que ya está en marcha (y que no frena), es uno todavía mayor.
Pues bien, a esto tuve que enfrentarme en 2017 cuando después de redefinir los estilos de la web de Centraldereservas.com le llegó el turno a la app.
Por aquel entonces ya existía una versión para Android e iOS, con unas funcionalidades reducidas en comparación con la web, y un diseño algo rudimentario.
Tal que así:
Se decidió crear un equipo específico para abarcar este proyecto: una persona para coordinar, otra para desarrollar en Android, un par más para iOS y yo, sobre quien recayó toda la parte de diseño. Afortunadamente contábamos con la ayuda de unos cien compañeros/as más en la empresa para probar la app y que nos reportasen todos los fallos (yuju).
La pregunta del millón era ¿por dónde empezamos?
Queríamos incorporar muchas nuevas funcionalidades, pero también era importante que el usuario que hubiera hecho su reserva desde la web tuviera una experiencia similar al abrir la App, empezando por la coherencia visual. De manera que decidimos que ese sería el punto de partida: identificar los diferentes elementos e ir reduciendo y reemplazando poco a poco la paleta de colores hasta que ambos productos (web y app) armonizasen:
El proceso fue relativamente rápido, con cambios de versión cada pocos meses que, paralelamente al cambio de color, incorporaban pequeñas mejoras funcionales -apartado de reservas, perfil, búsquedas…- pero sin cambiar prácticamente la apariencia y ubicación de los componentes, ni el modo de navegación, para no volver locos a los usuarios.
Una vez nos deshicimos de cualquier elemento gráfico que recordase a la antigua imagen de marca fue cuando realmente nos pusimos a trabajar en el diseño para crear una guía de estilos coherente, sólida y al mismo tiempo fácil de editar:
- Identificamos todos los elementos comunes en las diferentes apartados de la aplicación y sus posibles estados
- Y establecimos…
- jerarquía entre estos elementos
- grid y espaciados
- tamaño y posición de fuente
- colores
- iconos según uso (interacción o ilustración)
- efectos y transiciones
Dividimos el trabajo en fases priorizando aquellas pantallas con más consultas: listado y detalle de reservas. Los pagos desde el móvil tampoco eran tan populares hace unos años y los usuarios por aquel entonces hacían sus reservas mayoritariamente desde la web.
El uso que hacían de la App era principalmente para consultar sus reservas y mostrarlas en su llegada al alojamiento.
Conseguir que los usuarios hicieran sus reservas desde la app era una prioridad de negocio, pero no había una demanda real por lo que decidimos que el buscador lo abordaríamos con más atención y calma una vez satisfecha la otra parte.
Tal como comentaba al inicio del post, este proyecto estaba ya vivo y como tal iba cambiando.
Gracias a tener definida una guía de elementos y componentes, podíamos incorporar nuevos contenidos con gran flexibilidad.
Se añadieron más funciones en los apartados principales, como galería de fotos y valoraciones en la ficha de alojamiento, opciones de pago e información sobre la cancelación de reservas, o consulta de movimientos del monedero.
Además la empresa y sus servicios crecían: se incorporaron las reservas de vuelos, cheques regalo y nuevos extras… que pudimos incorporar también en la app basándonos en los estilos de cards y elementos que ya teníamos definidos.
Así contado parece todo un trabajo de cuento, pero el proceso hasta conseguir una unidad estética y la homogeneización completa (sobre todo desarrollando en dos entornos) fue para echarle paciencia…
…aunque el resultado «final» y más conociendo todo el proceso, resulta gratificante. Tenéis la presentación «bonita» en mi porfolio y podéis descargar la App desde aquí.
Si encuentro el momento, desarrollaré cómo fue el trabajo de ux, los cambios que implementamos en el buscador y cómo curiosamente varios aspectos de este rediseño se anticiparon e influyeron más tarde para hacer nuevos cambios en la web. Pero eso de momento es otra historia 😉