PROYECTO 01

Cliente

www.tuscasasrurales.com

 
 

Servicios

Creación delUI kit

 
 

Mi rol

Diseñadora UX/UI

 

Link al proyecto

En desarrollo
 
 

Contexto del proyecto

Este proyecto comenzó en 2023 cuando inicialmente se me asignó realizar el diseño de las pantallas del nuevo flujo de reserva online (en desarrollo). En ese momento también se vió conveniente por parte del CEO y compañeros de otros departamentos, hacer un rediseño completo de toda la plataforma de alojamientos rurales para mejorar la estética, la usabilidad, y sobre todo, optimizar el uso en móvil.

Objetivos

Creación de los fundamentos de diseño (colores, tipografía, grillas)

La plataforma carecía de una guía de estilo por lo que establecí la paleta de colores, la escala tipográfica y las grillas para diferentes resoluciones.

 

Los colores utilizados en el portal hasta el momento, eran inconsistentes y carecían de variaciones para las distintas necesidades. Partiendo de los colores del logo, asigné dos verdes (principal y secundario), más el amarillo como acento (fue suavizado ya que hasta entonces se utilizaba el amarillo puro), y la paleta de los colores neutros.

Inicialmente utilicé para los títulos la misma tipografía del logo pero con el tiempo pude descubrir que es una tipografía no adecuada para título (solo contiene dos pesos, entre otros incovenientes) así que propuse Fira Sans que contiene una amplia variedad de fuentes, es amigable y humanista.

Por otro lado, establecí un sistema de grillas que fue modificada y ampliada  (junto a los maquetadores) a lo largo del proceso de rediseño, según las necesidades de distintos contenido en diferentes resoluciones (buscadores flotantes o bajo en el header, por ejemplo).

Creación de componentes (átomos, moléculas y organismos).

La creación de componentes fue imprescindible ya que la idea es dar consistencia a todos los elementos del diseño y agilizar el desarrollo de las presentes y futuras funcionalidades.

Cards de los alojamientos

La creación de los componentes de las cards fue un trabajo laborioso ya que la información más relevante de la plataforma, se encuentra en los contenidos de las cards de los alojamientos. La información sobre el alojamiento debe ser lo más completa posible a la vez que fácilmente digerible por el usuario.

Creación de Secciones (plantillas)

Estas secciones son replicables en diferentes páginas, como la sección de alojamientos con ofertas, sección de alojamientos recomendados o sección de alojamientos en la provincia. Es contenido dinámico que aparece según las necesidades específicas del usuario y para mejorar el posicionamiento en buscadores.

Pantallas finales

Estas son alguna de las pantallas de los flujos principales.

Aprendizajes:

En este proyecto sigo trabajando a día de hoy desde comienzos del 2023. Es la mayor fuente de aprendizaje como diseñadora, tanto en la colaboración con mis compañeros (programadores front and back, stakeholder, y otros compañeros de marketing y seo), como en la investigación y el uso de la herramienta de Figma.

  • Debido a la inexperiencia en diseño por parte de la empresa no se accedió a hacer investigación con usuarios: ni test de usabilidad del diseño actual ni análisis de mapas de calor, por ejemplo. 
  • Hemos basado muchas decisiones en los flujos de la competencia, directa e indirecta, y en lo aceptado o no por programación dentro del framework anterior. Al final, se trataba de optimizar los flujos ya existentes con los recursos de siempre, NO partíamos de cero.
  • He comenzado erróneamente a diseñar elementos de la UI al detalle y de manera definitiva, sin una idea clara y aprobada (por parte de los stakeholders), por lo que he rehecho demasiadas veces muchos elementos. 
  • El proyecto cuyo objetivo ha ido cambiando con el tiempo (al comienzo sólo el flujo de reserva online, después mejora de estética en la home, después la mejora en las cards de los alojamientos, después mejora en la ficha del alojamiento, etc) no se ha abordado de una manera global desde el inicio, lo que ha supuesto trabajar de manera poco efectiva.