Colaboración con empresa
Colaboración con empresa
MOALI
EXPLORE
MOALI
EXPLORE
MOALI
EXPLORE
Compañia
Compañia
Compañia
Moali
Explore
Moali
Explore
Función
Función
Diseñador
UX/UI
Diseñador
UX/UI
Herramientas
Herramientas
Figma
Chat GPT
Adobe Creative
Figma
Chat GPT
Adobe Creative
Figma
Chat GPT
Adobe Creative
Descripción
Descripción
En este rediseño, el objetivo fue transformar una plataforma con alta deuda técnica y visual en un producto digital competitivo.
Problema: La marca carecía de una estructura visual clara, lo que dificultaba la navegación y diluía el impacto de su propuesta de valor.
Solución: Reestructuré la arquitectura de información y la jerarquía visual para guiar al usuario de forma intuitiva, priorizando la legibilidad diseñando un sistema visual equilibrado que elimina el ruido innecesario, permitiendo que el contenido respire.
En este rediseño, el objetivo fue transformar una plataforma con alta deuda técnica y visual en un producto digital competitivo.
Problema: La marca carecía de una estructura visual clara, lo que dificultaba la navegación y diluía el impacto de su propuesta de valor.
Solución: Reestructuré la arquitectura de información y la jerarquía visual para guiar al usuario de forma intuitiva, priorizando la legibilidad diseñando un sistema visual equilibrado que elimina el ruido innecesario, permitiendo que el contenido respire.
En este rediseño, el objetivo fue transformar una plataforma con alta deuda técnica y visual en un producto digital competitivo.
Problema: La marca carecía de una estructura visual clara, lo que dificultaba la navegación y diluía el impacto de su propuesta de valor.
Solución: Reestructuré la arquitectura de información y la jerarquía visual para guiar al usuario de forma intuitiva, priorizando la legibilidad y la conversión a través de componentes dinámicos.
Antes
Antes
Enfoque UX: Implementé una navegación dinámica con una sticky nav que transiciona de un estado expandido a uno compacto al hacer scroll, optimizando el espacio sin perder el control. Para reducir la carga cognitiva, apliqué la regla de los 7 enlaces máximos y simplifiqué el selector de idiomas. Además, integré elementos Fixed estratégicos, como el botón "Add to Cart" y accesos directos a WhatsApp (ofreciendo varias versiones), asegurando que las acciones de conversión estén siempre disponibles. En móvil, reforcé el contraste del menú de hamburguesa y añadí el carrito para una experiencia de compra fluida.
Enfoque UI: Desarrollé una estética de minimalismo funcional con una paleta cromática limpia que refuerza la confianza de la marca. El núcleo visual se basa en un sistema de componentes dinámicos creados con Auto-layout, garantizando que botones y menús mantengan una jerarquía perfecta y una legibilidad total en cualquier dispositivo, cuidando detalles técnicos como el espaciado y el interlineado para evitar cortes visuales en la tipografía.
Enfoque UX (Navegación y Funcionalidad) Implementé una navegación dinámica con una sticky nav que transiciona de un estado expandido a uno compacto al hacer scroll, optimizando el espacio sin perder el control. Para reducir la carga cognitiva, apliqué la regla de los 7 enlaces máximos y simplifiqué el selector de idiomas. Además, integré elementos Fixed estratégicos, como el botón "Add to Cart" y accesos directos a WhatsApp, asegurando que las acciones de conversión estén siempre disponibles. En móvil, reforcé el contraste del menú de hamburguesa y añadí el carrito para una experiencia de compra fluida.
Enfoque UI (Estética y Sistemas) Desarrollé una estética de minimalismo funcional con una paleta cromática limpia que refuerza la confianza de la marca. El núcleo visual se basa en un sistema de componentes dinámicos creados con Auto-layout, garantizando que botones y menús mantengan una jerarquía perfecta y una legibilidad total en cualquier dispositivo, cuidando detalles técnicos como el espaciado y el interlineado para evitar cortes visuales en la tipografía.
Despues
Despues
Versión web
Versión web
El diseño de escritorio se centró en la creación de un sistema robusto que soporte grandes volúmenes de contenido sin saturar al usuario, permitiendo una transición fluida entre la inspiración y la compra.
Enfoque UX: Implementé una jerarquía de contenidos basada en patrones de escaneo (F-pattern), eliminando elementos secundarios para centrar la atención en los destinos principales. Reestructuré la información crítica del viaje para hacerla altamente escaneable, permitiendo que el usuario diferencie instantáneamente entre lo que está incluido y lo que no. Además, optimicé la visualización del calendario de fechas y el acceso al carrito de compra, asegurando que el proceso de reserva sea intuitivo y esté siempre localizado.
Enfoque UI: Utilicé un manejo preciso del whitespace para separar visualmente las diferentes categorías de información. Las tarjetas de destino actúan como componentes atómicos, facilitando una lectura clara y una interacción predecible mediante hover states refinados. El diseño visual del calendario y las tablas de servicios se simplificó para reducir el ruido, logrando que la comparación de opciones sea rápida y visualmente armónica.
Enfoque UX (Navegación y Funcionalidad) Implementé una navegación dinámica con una sticky nav que transiciona de un estado expandido a uno compacto al hacer scroll, optimizando el espacio sin perder el control. Para reducir la carga cognitiva, apliqué la regla de los 7 enlaces máximos y simplifiqué el selector de idiomas. Además, integré elementos Fixed estratégicos, como el botón "Add to Cart" y accesos directos a WhatsApp, asegurando que las acciones de conversión estén siempre disponibles. En móvil, reforcé el contraste del menú de hamburguesa y añadí el carrito para una experiencia de compra fluida.
Enfoque UI (Estética y Sistemas) Desarrollé una estética de minimalismo funcional con una paleta cromática limpia que refuerza la confianza de la marca. El núcleo visual se basa en un sistema de componentes dinámicos creados con Auto-layout, garantizando que botones y menús mantengan una jerarquía perfecta y una legibilidad total en cualquier dispositivo, cuidando detalles técnicos como el espaciado y el interlineado para evitar cortes visuales en la tipografía.
Antes
Despues
Antes
Despues
Versión movil
Versión movil
La transición a dispositivos móviles no fue una simple adaptación, sino una optimización de la experiencia táctil.
Estrategia UX: Prioricé la usabilidad con una sola mano optimizando la "zona natural" de interacción. Ajusté los touch targets a un mínimo de 44x44px y simplifiqué la navegación en un menú de hamburguesa más intuitivo que incluye el acceso directo al carrito. Para potenciar la conversión, implementé botones persistentes (Fixed) en la parte inferior para acciones críticas como el contacto por WhatsApp y el "Add to Cart", permitiendo que el usuario avance en su decisión de viaje sin tener que hacer scroll hacia arriba.
Estrategia UI: Adapté la tipografía y los elementos visuales reforzando el contraste en los componentes de navegación para garantizar la legibilidad en exteriores. El diseño es 100% responsive y mantiene la consistencia mediante el uso de componentes dinámicos que se reajustan automáticamente. El sistema visual de los botones fijos y los iconos de redes sociales se diseñó para destacar sin obstruir el contenido, manteniendo la estética minimalista y limpia de la marca en pantallas reducidas.
La transición a dispositivos móviles no fue una simple adaptación, sino una optimización de la experiencia táctil.
Estrategia UX: Prioricé la usabilidad con una sola mano optimizando la "zona natural" de interacción. Ajusté los touch targets a un mínimo de 44x44px y simplifiqué la navegación en un menú de hamburguesa más intuitivo que incluye el acceso directo al carrito. Para potenciar la conversión, implementé botones persistentes (Fixed) en la parte inferior para acciones críticas como el contacto por WhatsApp y el "Add to Cart", permitiendo que el usuario avance en su decisión de viaje sin tener que hacer scroll hacia arriba.
Estrategia UI: Adapté la tipografía y los elementos visuales reforzando el contraste en los componentes de navegación para garantizar la legibilidad en exteriores. El diseño es 100% responsive y mantiene la consistencia mediante el uso de componentes dinámicos que se reajustan automáticamente. El sistema visual de los botones fijos y los iconos de redes sociales se diseñó para destacar sin obstruir el contenido, manteniendo la estética minimalista y limpia de la marca en pantallas reducidas.
La transición a dispositivos móviles no fue una simple adaptación, sino una optimización de la experiencia táctil.
Estrategia UX: Prioricé la usabilidad con una sola mano optimizando la "zona natural" de interacción. Ajusté los touch targets a un mínimo de 44x44px y simplifiqué la navegación en un menú de hamburguesa más intuitivo que incluye el acceso directo al carrito. Para potenciar la conversión, implementé botones persistentes (Fixed) en la parte inferior para acciones críticas como el contacto por WhatsApp y el "Add to Cart", permitiendo que el usuario avance en su decisión de viaje sin tener que hacer scroll hacia arriba.
Estrategia UI: Adapté la tipografía y los elementos visuales reforzando el contraste en los componentes de navegación para garantizar la legibilidad en exteriores. El diseño es 100% responsive y mantiene la consistencia mediante el uso de componentes dinámicos que se reajustan automáticamente. El sistema visual de los botones fijos y los iconos de redes sociales se diseñó para destacar sin obstruir el contenido, manteniendo la estética minimalista y limpia de la marca en pantallas reducidas.
Antes
Antes
Despues
Despues
Mockups
Mockups
La fase final de visualización permite observar cómo el sistema de diseño se integra en la vida del usuario.
Estrategia UX: Validación de la consistencia del User Flow a través de diferentes dispositivos, asegurando que el paso de web a móvil sea transparente para el usuario.
Estrategia UI: Aplicación de la interfaz en dispositivos de alta resolución para verificar el contraste, la saturación de las imágenes y la fidelidad de los componentes del Design System creado específicamente para este proyecto.
La fase final de visualización permite observar cómo el sistema de diseño se integra en la vida del usuario.
Estrategia UX: Validación de la consistencia del User Flow a través de diferentes dispositivos, asegurando que el paso de web a móvil sea transparente para el usuario.
Estrategia UI: Aplicación de la interfaz en dispositivos de alta resolución para verificar el contraste, la saturación de las imágenes y la fidelidad de los componentes del Design System creado específicamente para este proyecto.
La fase final de visualización permite observar cómo el sistema de diseño se integra en la vida del usuario.
Estrategia UX: Validación de la consistencia del User Flow a través de diferentes dispositivos, asegurando que el paso de web a móvil sea transparente para el usuario.
Estrategia UI: Aplicación de la interfaz en dispositivos de alta resolución para verificar el contraste, la saturación de las imágenes y la fidelidad de los componentes del Design System creado específicamente para este proyecto.
ANTES
DESPUES
Rotterdam, Holanda
+34 646 850 504
albertobll97@gmail.com
2026
Alberto Benito
ANTES
DESPUES