SITIOS WEB:
HOTELES MX &
CASA MX
Diseño de un sitio web mobile first para MX Hoteles y Casas MX que muestre un atractivo catálogo de destinos y permita reservaciones y pagos en línea.
Fecha:
Diciembre, 2020
Disciplinas:
Research, Benchmarking, UX, Interactions, Information Architecture, Wireframing, Prototyping, Enginner.
Cliente:
Grupo MX: Hoteles MX y CASA MX
El problema
MX Hoteles tenía un sitio web con catálogo de hoteles únicamente de la Ciudad de México con motor de reservaciones y pasarela de pagos de un servicio de terceros en donde sólo se puede reservar sin pagos en línea. El proceso de reservación se realizaba con un servicio de un proveedor externo que no permitía una personalización de diseño y llevaba a los usuarios a otra plataforma, esto implicaba problemas de usabilidad, confianza, imagen de marca y sobre todo de abandono.
Declaración del problema
Alan Estrada es un gerente de ventas, joven y aventurero que necesita reservar una habitación de hotel en la ciudad de México de manera sencilla y segura en sus viajes de negocio a la CDMX por lo que necesita revisar un catálogo de hoteles, comentarios de otros usuarios y valoraciones para su decisión de reserva y aprovechar la ubicación del hotel para visitar lugares turísticos y divertidos durante su estancia.
El Objetivo del proyecto
Diseño de un sitio web mobile first centrado en el usuario para MX Hoteles y Casas MX que muestre un atractivo catálogo de destinos y permita reservaciones y pagos en línea.
El diseño anterior del sitio web
Mi rol en el proyecto
Líder del proyecto UX para diseñar una interface de usuario UI centrada en el usuario.
Responsabilidades:
- Definir los objetivos del proyecto y reglas de negocio con los Stakeholders del Grupo MX.
- Realizar una investigación de usuario para identificar a las Buyer y User Personas y puntos de dolor del anterior sitio web.
- Realizar una auditoría competitiva e investigación de mercado para descubrir la propuesta de valor del nuevo sitio web.
- Idear las soluciones de diseño que permitan integrar una pasarela de pagos, un catálogo de productos (hoteles y habitaciones), servicios y propuesta de valor.
- Definir el diseño de la interface de usuario, la arquitectura de información, arquitectura UX de las páginas y secciones y de las recomendaciones de contenidos* y diseño visual*. (*Contenidos, textos, imágenes y diseño visual proporcionados por el Cliente y no incluidos en el alcance del proyecto).
- Realizar wireframes de baja resolución y prototipado de baja y alta resolución, además del diseño de interacciones.
- Consultoría y validaciones en el diseño visual siguiendo los lineamientos de diseño de la marca.
- Realizar validaciones de navegación y de usabilidad para el diseño visual y el desarrollo del sitio web en coordinación con el equipo de Desarrollo Web (proveedor externo).
- Diseñar un modelo de medición con las herramientas de Google Analytics y Google Tag Manager para su implementación.
ETAPA DE DESCUBRIMIENTO
INICIAR EL PROYECTO Y DEFINIR ESTRATEGÍA Y ALCANCE
Inicio del proyecto
- Levantamiento de requerimientos y funcionalidades en entrevistas con los Stakeholders.
- Declaración de la visión del proyecto.
- Definción del equipo de UX.
Descubrimiento – Empatizar, definir e idear
- Customer Journey Map – Mapa de experiencia del sitio anterior.
- Percepción del Diseño – Entrevistas y encuestas.
- Service Blue Print – Del diseño anterior.
- Benchmark Interno Performance – Métricas del sitio web.
- Auditoria competitiva Perfomance de sitios web.
- Definición de Buyer Persona.
- Mapa de experiencia para el nuevo sitio web.
- Auditoria competitiva de Arquitectura de la Información de sitios web.
- Propuesta Arquitectura de la información para nuevo sitio web.
- Propuesta de Arquitectura UX de páginas y secciones.
Customer Journey Map y Service Blue Print
Objetivo
Documenté el proceso de reservación e Identifiqué los puntos principales de contacto entre el usuario objetivo y la interface UI del sitio web mxhoteles.com y casamx.com antes de hacer el re diseño.
Metodología
Revisé de la experiencia mediante la técnica Customer Journey Map, analizando los puntos clave, atendiendo las áreas de oportunidad, puntos de dolor y proporcionando los elementos necesarios para la generación del Service Blue Print y liste las recomendaciones y acciones necesarias para mejorar la experiencia del usuario.
Plataforma
Método cualitativo realizado manualmente por especialistas UX.
Formato
Detallado. Screenshots y gráficas comparativas en Excel.
RECURSOS
- UX Researcher.
- UX Architect.
Performance y rendimiento
Objetivo
Identificar los sitios web con mejor desempeño cumpliendo los lineamientos en la industria para mejoramiento del SEO para descubrir soluciones e inspiraciones en el mercado.
Metodología
Benchmark secundario y auditoría competitiva. Utilizando el conjunto de datos públicos de las propiedades de Google Analytics del sitio web, se analizaron verticales de comportamiento del sitio, adquisición de tráfico, velocidad en dispositivos diferentes dispositivos.
Plataforma
Digital. Herramientas digitales siguientes: Page Speed de Google, Pingdom Tools, GT Metrix y Google Test My Site.
Formato
Detallado. Screenshots y gráficas comparativas en Excel.
RECURSOS
- UX Researcher.
- Analista de inteligencia digital.
Proto Personas
Objetivo
Identificar a los arquetipos del segmento digital y al Buyer Persona primaria que representa al usuario principal del sitio web mxhoteles.com
Metodología
Benchmark interno. Utilizando el conjunto de datos disponibles de Google Analytics de la propiedad del portal comercial y los datos públicos de las propiedades de Google Analytics del sitio web, se analizaron verticales de datos demográficos y comportamientos en el sitio web.
Encuesta cuantitativa sobre la percepción del diseño anterior y la personalidad de los usuarios.
Social Listening. Diagnóstico a profundidad de análisis de la marca para conocer percepciones, asociaciones y actitudes, así como identificar audiencias de categoría.
Plataforma
Digital. Sitio web Similar Web, Panel de gestión de la propiedad de Google Analytics, Sitio web Alestra. Audience Insights Facebook, Sysomos MAP, Estudios IAB México- Generación Millennial y Think with Google. Optimal WorkShop. Survey Monkey.
Formato
Detallado. Screenshots y gráficas comparativas en Excel.
RECURSOS
- UX Researcher.
- Analista de inteligencia digital.
ARQUITECTURA DE INFORMACIÓN
Objetivo
Identificar los principales contenidos de navegación, secciones relevantes, estándares y soluciones de los competidores.
Inspección visual en dispositivos de escritorio y móviles de los sitios web mejor evaluados en el benchmarking de performance.
Metodología
Benchmarking secundario. Auditoría competitiva. Revisión de la interface de navegación, secciones, diseño UI y relevancia de contenidos.
Plataforma
Digital. Inspección visual de sitios web en línea.
Formato
Detallado. Screenshots y gráficas comparativas en Excel.
RECURSOS
- UX Architect.
- Information Architect.
- UX Wtriter.
ETAPA DE IDEACIÓN Y DEFINICIÓN
MAPA DE EXPERIENCIA NUEVO SITIO WEB
Wireframes y prototipado
Esta etapa fue la de mayor tiempo invertido ya que el alcance del proyecto sólo contemplaba el diseño en mediana resolución y otro equipo externo realizaría el diseño visual basado en la arquitectura propuesta.
Mockups y Diseño Visual
Ver interacciones en el proceso de reservación en el prototipo Adobe XD de baja fidelidad en versión desktop.
Ver interacciones en el proceso de reservación en el prototipo Adobe XD de alta fidelidad en versión desktop.
DESARROLLO DE LOS SITIOS WEB
El alcance del proyecto UX no contempló el desarrollo web (front end & back end).
La etapa de desarrollo, maquetación y programación de funcionalidades fue realizada por un proveedor externo a la que se le entregaron los flujos de usuario en los prototipos navegables de las versiones escritorio y dispositivos móviles junto con un documento de requerimiento de funcionalidades y una guía de estilo del diseño visual con los assets de diseño en editables AI, XD y PSD. Durante esta etapa, se validaron las funcionalidades y corrigieron problemas de diseño visual y maquetación.
La carga de contenidos (imágenes, textos y traducciones) las realizó el equipo del cliente utilizando un gestor de contenido CMS construido específicamente para dicho fin.
Aprendizajes
Cabe mencionar que el tiempo de investigación y las técnicas realizadas en esta etapa no estaban contempladas en el alcance pero como un Diseñador UX, me encargué de realizar un rápido análisis con métodos cuantitativos.
En definitiva, me hubiera gustado realizar una investigación de usuario y una etapa de Discovery más profunda, sin embargo, pude analizar datos cuantitativos de los datos de Google Analytics y análisis de mercado de pares y competidores.
También me hubiera gustado participar en la definición del diseño visual, pero nuevamente esto no estaba en el alcance del proyecto negociado por la agencia digital en donde prestaba mis servicios.
