Öasis, el nuevo concepto de hotel y apartamentos.

Diseño desde el brief hasta la solución con una metodología Design Thinking.

Challenge Brief

El cliente, cadena hotelera y apartamentos de 4 y 5 estrellas, requiere diseñar una interfaz usable y accesible teniendo en cuenta el público objetivo al que se dirigen (familias, grupos y parejas), las diferentes experiencias que ofrecen y sus destinos incluyendo formulario de búsqueda, entre otros.

El proceso de diseño comenzó estableciendo los pasos que íbamos a seguir y los puntos que íbamos a incluir en nuestro diseño. Utilizamos una metodología de Design Thinking con un timing de 48 horas.

Comenzamos por un research (desk research y benchmarking), después ideamos el branding (colores, su accesibilidad y tipografía), la arquitectura de la información y sitemaps, y por último, el prototipado y wireframes.

Research

En el research, incluimos todo lo que pudiéramos obtener como forma de inspiración y propuesta de valor hacia el cliente final teniendo en cuenta las características del cliente y sus necesidades.

Desk research

Para nuestro desk research comenzamos investigando sobre las localizaciones del cliente, las rutas, gastronomía, escapadas y paisajes que pudiéramos incluir en nuestros diseños.

Las localizaciones del cliente

Basamos nuestro research en las localizaciones de los apartamentos y hoteles del cliente, en este caso de Canarias, Baleares y Caribe para conocer y empatizar qué íbamos a diseñar, cómo queríamos transmitir la propuesta de valor con imágenes y contenido.

Excursiones

Investigamos sobre las escapadas y excursiones que se podían hacer a la Isla de Lanzarote, como ejemplo, para poder mostrarlo tanto en web como en móvil. Entre ellos encontramos gastronomía, rutas por el Parque Nacional del Timanfaya y zonas de costeras para hacer surf.​

Benchmarking

A través de un benchmarking, investigamos sobre cadenas hoteleras y apartamentos de 4 y 5 estrellas que daban servicio en Canarias, Baleares y Caribe para entender:

• Cómo se mueve la competencia en el mercado y el panorama actual en el que tenemos que posicionarnos.
• Entender cómo emplean el diseño y ofrecen sus servicios en sus páginas web.
• Encontrar consistencia y estándares que nos permitan diseñar una web usable, accesible y atractiva.

Destacamos Four Seasons, Meliá, Barceló Group y Hilton cuyos diseños destacan por estar formados por sistemas de búsqueda que suelen aparecer en el hero, imágenes que acompañan la imagen de marca, información sobre la cadena y los servicios que ofrecen.

Además del empleo de heurísticas como la libertad y el control del usuario dentro de la web, consistencia en el diseño y el empleo de imágenes como reconocimiento de los lugares.

Algunos de los insights del benchmarking que concluimos fueron:

• Hero representa la imagen de marca y la propuesta de valor.
• Header con el logo y el menú accesible al usuario.
• Secciones con recomendaciones de experiencias entorno al hotel y apartamentos.
• Diferentes tipos de hoteles y apartamentos dependiendo de la necesidad, si es un viaje exprés, entre amigos, en pareja o familia, siempre orientado al público objetivo.
• Imágenes que transmiten vivencias y experiencias haciendo que el usuario se sienta identificado.
• Estructuras de diseño similares a los competidores para que sea usable.

Insights

A partir de nuestro research en conjunto, nuestro objetivo fue crear un diseño consistente (que el usuario pueda reconocer que es una cadena hotelera y de apartamentos donde pueda reservar e informarse de experiencias, etc…) , estético y minimalista donde el usuario pueda reconocer qué cadena es, que propuesta de valor queremos transmitir y lo que se ofrece.

La fase de Style Guide consta de:

1. Colores
2. Accesibilidad de los colores
3. Tipografía
4. Imágenes

Logo

Antes de pasar a la siguiente sección, creamos un nombre ficticio para nuestro cliente y diseñamos un logo para la web.

logo

Öasis es una cadena de hoteles y apartamentos de 4 y 5 estrellas localizados en Canarias, Baleares y Caribe. Como su nombre indica, Öasis es “un paraje del desierto donde se puede encontrar vegetación.”

Color style

Elección colores

La gama de colores elegida fueron como colores primarios, tonalidades desde Blanco Hueso hasta Dark Blue principalmente elegido para glifos y fondos. La decisión de este color primario fue la búsqueda del minimalismo y la sencillez al estar acompañado por una tipografía elegante.

Los colores secundarios, al principio se decidió la gama de colores tierra, pero no cumplía los estándares de accesibilidad, por lo que se eligieron colores tintos que al realizar el test de accesibilidad sí lo cumplían. La decisión de este color secundario fue para acompañar también la tipografía y dar un estilo elegante sin abrumar al usuario con muchos colores.

Accesibilidad

La accesibilidad forma una parte esencial a la hora de decidir los colores que van a componer nuestra paleta. Durante nuestro proceso de diseño decidimos incluir el color tierra para hacer referencia a los “desiertos” pero al comprobar en Figma su accesibilidad pudimos ver lo siguiente:

Daban unos rangos “medio/altos” pero aún así se quedaba corto en accesibilidad, el equipo de diseño decidió probar con colores tintos:

Observando la primera imagen, el primer color da una accesibilidad alta por lo que podríamos usarlo para los botones siguiendo degradación.

Estilos de colores en Figma

El equipo de diseño realizó la gama de estilos en Figma para alinearnos con los demás equipos en colores cromáticos y paleta elegida:

Tipografía

El equipo de diseño decidió la tipografía Graphik mayoritariamente con un weight medium y regular tanto para mobile como para desktop. Esta tipografía nos transmite:

• Elegancia: la búsqueda de elegancia al ser un hotel de 4 y 5 estrellas tiene que representarse en tipografía, los colores, el diseño e imágenes.
• Neutralidad: el estilo de la tipografía Graphik es neutral, lo que nos permite comunicar de manera clara sin robar el protagonismo al diseño o imágenes.
• Modernidad: La tipografía Graphik se adapta al diseño y al valor de la marca.
• Legibilidad: el usuario no tiene que forzar la vista a la hora de visualizar la página web.
• Coherencia: el propósito es transmitir una percepción de calidad y atención al detalle en la cadena hotelera y de apartamentos, por lo que la tipografía Graphik nos permite crear una coherencia visual con la elegancia.

Estilos en Figma

Una vez que el equipo de diseño tenía elegido la tipografía, creamos estilos en Figma:

Para desktop planteamos tamaños desde 24px para descripciones y body hasta 36px para títulos siempre con una harmonía con el diseño y la propuesta de valor. Para mobile planteamos tamaños desde 12px hasta 24px.

Arquitectura de la información

La arquitectura de la información de nuestra página web está formada por:

• Destinos: Esta sección ofrece a los usuarios, la oportunidad de explorar los hoteles y apartamentos organizados por ubicación y tipo de estancia (apartamentos u hotel).
• Descubrir: En esta sección, el usuario tiene la posibilidad de sumergirse en las experiencias ofrecidas en las diferentes ubicaciones desde lugares hasta la planificación del viaje.
• Experiencias: Los usuarios tienen la posibilidad de buscar su próximo viaje a partir de experiencias que Öasis ofrece en su web, desde excursiones hasta Spa y Wellness.
• Sobre nosotros: Es importante mostrar la propuesta de valor con la cultura, valores, misión y visión, por lo que reservamos un espacio para que los usuarios descubran quiénes forman Öasis.
• Acceder: Los usuarios pueden registrarse o acceder como miembro y entrar en exclusivas recompensas para aprovechar al máximo los beneficios de ser miembro.

Wireframe

Una vez que teníamos la guía del estilo y la arquitectura de la información, realizamos distintos wireframes para establecer la estructura del diseño de la web de Öasis con un responsive web para mobile y desktop. Ambos diseños, estuvieron supeditados a la inspiración del research, la elección de tipografía, color e imágenes.

La propuesta de valor era transmitir quién es Öasis y qué se quiere ofrecer. Para ello, empleamos estructuras similares a las que los competidores de 4 y 5 estrellas emplean con el objetivo de que que el usuario se sienta cómodo a la hora de navegar.

Desktop

Mobile

Prototipo Desktop

prototipos

Desktop

Realizamos un prototipado basándonos en toda la investigación, el brief del cliente y la selección de los colores, tipografía e imágenes que queremos transmitir al usuario y público objetivo.

• Header: En esta sección, se mostrará el menú con las diferentes secciones y el logo.

• Hero: En esta sección aparecerán imágenes que transmitan la propuesta de valor y su público objetivo. Además, aparecerá el buscador de hoteles y apartamentos con la selección de fecha de entrada y salida, número de personas y habitaciones, y por último, el Call to Action.

hero

• Quiénes somos: En esta sección, se incluye la misión y su cultura, quién es Öasis y su propuesta de valor. Es importante incluir esta sección para dar seguridad al usuario y crear una relación de confianza.

• Descubre nuestros destinos: Remarcamos el valor de marca con destinos exclusivos y experiencias inolvidables con una sección para descubrir los destinos y las experiencias más exclusivas de cada uno de ellos.

• Por categorías: En esta sección, recomendamos al usuario para que pueda ver lo que necesite por categorías a través de cards añadiendo las experiencias que se ofrecen dependiendo del público objetivo.

• Registrarse: En esta sección añadimos un call to action para registrarse y que el usuario pueda recibir un 10% en su próxima reserva. Esto implicaría una recompensa por hacerse miembro.

• Footer: Añadimos el contacto, correo electrónico y otras secciones de interés para el usuario.

Conclusiones

Como conclusiones, vamos a destacar la experiencia que ofrece el cliente para su público objetivo, así como, lo plasmamos en la web a través de experiencias personalizadas y recomendaciones en base a experiencias.

La inspiración del diseño se basa exclusivamente en el research realizado de los destinos que se ofertan, transportando a los usuarios hacia ese viaje inolvidable a través de imágenes que evocan las excursiones, playas, personas jugando en la playa y la serenidad de los lugares.

La facilidad de reserva hace que el usuario no pueda tener problema a la hora de reservar dado que se incluye la búsqueda y el CTA. Además de añadir el botón de “registrarse” y obtener una recompensa con un 10%, esta técnica es empleada en el behavioural design.

La calidad del diseño transmite la elegancia y la exclusividad, al ser una cadena de hoteles de apartamentos de 4 y 5 estrellas.

Una vez que hemos realizado el proceso de diseño, los siguientes pasos serían reunirnos con el cliente para presentar el diseño e ir iterando en torno a sus necesidades.