Proyecto Académico
Proyecto Académico
MERGE
MERGE
MERGE
Compañia
Compañia
Compañia
Merge
Merge
Merge
Función
Función
Diseñador
UX/UI
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
MERGE es un marketplace especializado en moda de autor, diseñado para un target con alta cultura visual que busca alternativas al mercado masivo. La plataforma centraliza firmas emergentes y marcas de nicho que, por su escala, suelen ser poco accesibles para el gran público, conectando a diseñadores independientes con usuarios que valoran la exclusividad y la autenticidad por encima de las multinacionales.
MERGE es un marketplace especializado en moda de autor, diseñado para un target con alta cultura visual que busca alternativas al mercado masivo. La plataforma centraliza firmas emergentes y marcas de nicho que, por su escala, suelen ser poco accesibles para el gran público, conectando a diseñadores independientes con usuarios que valoran la exclusividad y la autenticidad por encima de las multinacionales.
Problema: La fragmentación de referentes visuales y noticias de moda obligaba a los usuarios a saltar entre múltiples plataformas, enfrentándose a interfaces estéticamente ricas pero funcionalmente confusas y poco escaneables.Problema: La fragmentación de referentes visuales y noticias de moda obligaba a los usuarios a saltar entre múltiples plataformas, enfrentándose a interfaces estéticamente ricas pero funcionalmente confusas y poco escaneables.
Solución: Centralicé la experiencia unificando secciones de "Outfits" y "Noticias" bajo una arquitectura de información que prioriza la legibilidad y el escaneo rápido de especificaciones y servicios incluidos. Implementé un botón de carrito persistente (Fixed) y una navegación ergonómica que garantiza una conversión fluida sin sacrificar la estética editorial de la marca.
Problema: La fragmentación de referentes visuales y noticias de moda obligaba a los usuarios a saltar entre múltiples plataformas, enfrentándose a interfaces estéticamente ricas pero funcionalmente confusas y poco escaneables.Problema: La fragmentación de referentes visuales y noticias de moda obligaba a los usuarios a saltar entre múltiples plataformas, enfrentándose a interfaces estéticamente ricas pero funcionalmente confusas y poco escaneables.
Solución: Centralicé la experiencia unificando secciones de "Outfits" y "Noticias" bajo una arquitectura de información que prioriza la legibilidad y el escaneo rápido de especificaciones y servicios incluidos. Implementé un botón de carrito persistente (Fixed) y una navegación ergonómica que garantiza una conversión fluida sin sacrificar la estética editorial de la marca.
Problema: La fragmentación de referentes visuales y noticias de moda obligaba a los usuarios a saltar entre múltiples plataformas, enfrentándose a interfaces estéticamente ricas pero funcionalmente confusas y poco escaneables.
Solución: Centralicé la experiencia unificando secciones de "Outfits" y "Noticias" bajo una arquitectura de información que prioriza la legibilidad y el escaneo rápido de especificaciones y servicios incluidos. Implementé un botón de carrito persistente (Fixed) y una navegación ergonómica que garantiza una conversión fluida sin sacrificar la estética editorial de la marca.
Entrevistas
Entrevistas
Para validar la propuesta, realicé una fase de investigación basada en entrevistas con usuarios que encajaban en nuestro perfil de "entusiastas de la moda". El objetivo era entender cómo descubrían nuevas marcas y qué barreras encontraban al comprar en sitios web pequeños o desconocidos.
Para validar la propuesta, realicé una fase de investigación basada en entrevistas con usuarios que encajaban en nuestro perfil de "entusiastas de la moda". El objetivo era entender cómo descubrían nuevas marcas y qué barreras encontraban al comprar en sitios web pequeños o desconocidos.
Los problemas fueron clave para el desarrollo del producto: los usuarios admitieron que la falta de referentes visuales reales (ver la ropa en otras personas) y la dispersión de las noticias de moda les obligaba a usar múltiples apps. Estas perspectivas justificaron la creación de las secciones de "Outfits" y "Noticias" dentro de MERGE, resolviendo la fragmentación de la experiencia en una sola plataforma.
Los problemas fueron clave para el desarrollo del producto: los usuarios admitieron que la falta de referentes visuales reales (ver la ropa en otras personas) y la dispersión de las noticias de moda les obligaba a usar múltiples apps. Estos insights justificaron la creación de las secciones de "Outfits" y "Noticias" dentro de MERGE, resolviendo la fragmentación de la experiencia en una sola plataforma.Netus magna diam posuere vitae posuere accumsan turpis. Tincidunt sed laoreet feugiat varius commodo.
Funcionalidades
Funcionalidades
La arquitectura de la aplicación se articula sobre un sistema modular que integra el comercio electrónico con la interacción social. Se han priorizado las siguientes funciones clave para optimizar el User Journey:
Buscador Inteligente: Implementación de filtros avanzados por marca, estética y valores para facilitar la localización de firmas de nicho.
Catálogo Ropa/Sneakers: Organización de productos mediante secciones dinámicas y filtrado técnico para una navegación eficiente.
La arquitectura de la aplicación se articula sobre un sistema modular que integra el comercio electrónico con la interacción social. Se han priorizado las siguientes funciones clave para optimizar el User Journey:
Buscador Inteligente: Implementación de filtros avanzados por marca, estética y valores para facilitar la localización de firmas de nicho.
Catálogo Ropa/Sneakers: Organización de productos mediante secciones dinámicas y filtrado técnico para una navegación eficiente.
Muro de Inspiración: Integración de un feed de noticias editorial y contenido generado por usuarios para fomentar el engagement diario.
Gestión de Perfil: Centro de control del usuario que incluye favoritos, histórico de compras, publicaciones propias y opciones de anunciante.
Directorio de Tiendas: Herramienta de geolocalización mediante mapa con sistemas de filtros y recomendaciones personalizadas.
Muro de Inspiración: Integración de un feed de noticias editorial y contenido generado por usuarios para fomentar el engagement diario.
Gestión de Perfil: Centro de control del usuario que incluye favoritos, histórico de compras, publicaciones propias y opciones de anunciante.
Directorio de Tiendas: Herramienta de geolocalización mediante mapa con sistemas de filtros y recomendaciones personalizadas.
Muro de Inspiración: Integración de un feed de noticias editorial y contenido generado por usuarios para fomentar el engagement diario.
Gestión de Perfil: Centro de control del usuario que incluye favoritos, histórico de compras, publicaciones propias y opciones de anunciante.
Directorio de Tiendas: Herramienta de geolocalización mediante mapa con sistemas de filtros y recomendaciones personalizadas.
Wireframe en baja
Wireframe en baja
El prototipado inicial se centró en la Arquitectura de Información (IA) para validar la fluidez del sistema antes de la fase visual:
Estructura Ósea: Definición de la jerarquía de contenidos y la ubicación de los elementos de control mediante un diseño modular.
User Flow: Optimización del recorrido del usuario desde el onboarding personalizado hasta el checkout final.
Usabilidad Táctica: Definición de la jerarquía de botones y puntos de interacción para minimizar la carga cognitiva del usuario.
El prototipado inicial se centró en la Arquitectura de Información (IA) para validar la fluidez del sistema antes de la fase visual:
Estructura Ósea: Definición de la jerarquía de contenidos y la ubicación de los elementos de control mediante un diseño modular.
User Flow: Optimización del recorrido del usuario desde el onboarding personalizado hasta el checkout final.
Usabilidad Táctica: Definición de la jerarquía de botones y puntos de interacción para minimizar la carga cognitiva del usuario.
Validación de Navegación: Testeo de la ubicación de los elementos de filtrado y acceso a secciones (Tienda, Muro, Perfil) para asegurar una navegación rápida.
Iteración Funcional: Eliminación de ruido visual para centrar la atención en los puntos críticos de decisión dentro de la interfaz.
Validación de Navegación: Testeo de la ubicación de los elementos de filtrado y acceso a secciones (Tienda, Muro, Perfil) para asegurar una navegación rápida.
Iteración Funcional: Eliminación de ruido visual para centrar la atención en los puntos críticos de decisión dentro de la interfaz.
Esquema de diseño
Esquema de diseño
Para garantizar la escalabilidad y la coherencia de MERGE, desarrollé un Design System que define el ADN visual del producto. El objetivo fue crear una interfaz sofisticada que no compita visualmente con el contenido de moda, siguiendo una metodología de Diseño Atómico.
Para garantizar la escalabilidad y la coherencia de MERGE, desarrollé un Design System que define el ADN visual del producto. El objetivo fue crear una interfaz sofisticada que no compita visualmente con el contenido de moda, siguiendo una metodología de Diseño Atómico.
Paleta Cromática: Selección de tonos tierra orgánicos y neutros (#22333B, #5E503F, #F2F4F3). Esta paleta busca transmitir exclusividad y calidez, permitiendo que la fotografía del producto sea el centro de atención.
Tipografía: Implementación de la familia Kanit en diversas escalas (desde Semibold 60pt para encabezados hasta Light 15pt para cuerpos de texto). Se priorizó una jerarquía tipográfica clara para facilitar la lectura y el escaneo rápido de información en dispositivos móviles.
Iconografía: Creación de un set de iconos. Estos elementos actúan como significadores claros, mejorando la navegación intuitiva y reforzando la identidad moderna y tecnológica de la plataforma.
Paleta Cromática: Selección de tonos tierra orgánicos y neutros (#22333B, #5E503F, #F2F4F3). Esta paleta busca transmitir exclusividad y calidez, permitiendo que la fotografía del producto sea el centro de atención.
Tipografía: Implementación de la familia Kanit en diversas escalas (desde Semibold 60pt para encabezados hasta Light 15pt para cuerpos de texto). Se priorizó una jerarquía tipográfica clara para facilitar la lectura y el escaneo rápido de información en dispositivos móviles.
Iconografía: Creación de un set de iconos. Estos elementos actúan como significadores claros, mejorando la navegación intuitiva y reforzando la identidad moderna y tecnológica de la plataforma.
Landing Page
Landing Page
El diseño de la landing page se concibió como una pieza estratégica fundamental para el lanzamiento de MERGE, funcionando no solo como una carta de presentación, sino como una herramienta de validación de mercado y captación de leads. La estructura visual sigue una narrativa que guía al usuario a través de la exclusividad de las marcas y la propuesta de valor editorial, utilizando el espacio negativo y una tipografía de gran formato para reducir el ruido visual y centrar la atención en el beneficio principal. Al alinear este sitio con el sistema de diseño de la app, se logra una transición de marca coherente que refuerza la confianza del usuario antes de iniciar el proceso de descarga.
El diseño de la landing page se concibió como una pieza estratégica fundamental para el lanzamiento de MERGE, funcionando no solo como una carta de presentación, sino como una herramienta de validación de mercado y captación de leads. La estructura visual sigue una narrativa que guía al usuario a través de la exclusividad de las marcas y la propuesta de valor editorial, utilizando el espacio negativo y una tipografía de gran formato para reducir el ruido visual y centrar la atención en el beneficio principal. Al alinear este sitio con el sistema de diseño de la app, se logra una transición de marca coherente que refuerza la confianza del usuario antes de iniciar el proceso de descarga.
Objetivos:
Atrae tráfico cualificado.
Comunica valor diferencial.
Convierte visitas en descargas.
Objetivos:
Atrae tráfico cualificado.
Comunica valor diferencial.
Convierte visitas en descargas.
Wireframe en alta
Wireframe en alta
La fase de Alta Fidelidad (Hi-Fi) representa la materialización técnica de la aplicación bajo criterios de pixel perfect. En esta etapa, integré el sistema de diseño definitivo sobre la estructura previamente validada, asegurando una jerarquía visual clara donde la fotografía de moda es la protagonista absoluta.
La fase de Alta Fidelidad (Hi-Fi) representa la materialización técnica de la aplicación bajo criterios de pixel perfect. En esta etapa, integré el sistema de diseño definitivo sobre la estructura previamente validada, asegurando una jerarquía visual clara donde la fotografía de moda es la protagonista absoluta.
Detalle Visual: Aplicación de contrastes, sombras suaves y espaciados modulares para elevar la percepción de calidad del producto.
Feedback Interactivo: Diseño de estados de botones, transiciones y microinteracciones que guían al usuario y confirman sus acciones.
Realismo UI: Uso de contenido real y tipografías finales para testear la legibilidad y el equilibrio compositivo en pantallas de alta densidad.
Detalle Visual: Aplicación de contrastes, sombras suaves y espaciados modulares para elevar la percepción de calidad del producto.
Feedback Interactivo: Diseño de estados de botones, transiciones y microinteracciones que guían al usuario y confirman sus acciones.
Realismo UI: Uso de contenido real y tipografías finales para testear la legibilidad y el equilibrio compositivo en pantallas de alta densidad.
Navegación
Navegación
La estructura de navegación se ha diseñado bajo una metodología Mobile-First, garantizando que las funciones críticas sean accesibles con una sola mano mediante una barra de navegación inferior intuitiva. El flujo se ha planteado de forma circular para permitir una transición orgánica entre el descubrimiento de tendencias en el "Muro", la localización de puntos de venta en "Tiendas" y la compra final en el catálogo. Al optimizar la ubicación de los elementos interactivos dentro de la zona de alcance natural del pulgar, se reduce la fatiga del usuario y se simplifica el User Flow, logrando una experiencia de uso fluida que fomenta la retención y optimiza la conversión.
La estructura de navegación se ha diseñado bajo una metodología Mobile-First, garantizando que las funciones críticas sean accesibles con una sola mano mediante una barra de navegación inferior intuitiva. El flujo se ha planteado de forma circular para permitir una transición orgánica entre el descubrimiento de tendencias en el "Muro", la localización de puntos de venta en "Tiendas" y la compra final en el catálogo. Al optimizar la ubicación de los elementos interactivos dentro de la zona de alcance natural del pulgar, se reduce la fatiga del usuario y se simplifica el User Flow, logrando una experiencia de uso fluida que fomenta la retención y optimiza la conversión.
Rotterdam, Holanda
+34 646 850 504
albertobll97@gmail.com
2026
Alberto Benito