🏠 Miinmobiliaria: Caso de estudio UX/UI
Plataforma de inversión inmobiliaria premium en la Costa Blanca
01. Descripción del Proyecto
Miinmobiliaria es un proyecto diseñado para cerrar la brecha entre el mercado inmobiliario de lujo y el comprador digital. El objetivo principal fue crear una experiencia de búsqueda que transmitiera la exclusividad y la calma del Mediterráneo, sin sacrificar la eficiencia técnica que requiere una transacción de este tipo.
- Rol: Lead UX/UI Designer.
- Duración: 6 semanas (2 semanas de Research + 4 semanas de UI Design).
- Herramientas: Figma, Jira, Trello, Adobe Suite.
02. El Desafío (The Challenge)
El sector inmobiliario en la Costa Blanca está saturado de portales genéricos y visualmente sobrecargados. El reto fue:
- Generar confianza inmediata en inversores internacionales.
- Simplificar la carga cognitiva al mostrar datos técnicos de las viviendas.
- Optimizar la conversión en dispositivos móviles, donde se inicia el 70% de las búsquedas.
03. Proceso UX: Estrategia y Descubrimiento
Durante las primeras dos semanas, apliqué el framework de Doble Diamante para asegurar que cada decisión de diseño respondiera a una necesidad real del usuario.
Metodología: Flor de Loto (Lotus Blossom)
Ubicación Real
Integración de mapas dinámicos
Claridad
Iconografía propia para características
Filtros
Buscador predictivo en la Hero Section
Social
Sección de testimonios de clientes reales
Visual
Galería de imágenes de alta resolución
Contacto
Botones de consulta siempre accesibles
Filtros
Información clara sobre precios y estado
Social
Narrativa visual sobre el estilo de vida
04. Proceso UI: Diseño Visual y Sistemas
En la fase de un mes de diseño visual, el foco estuvo en la precisión y la escalabilidad mediante Atomic Design.
Principios UI Aplicados:
- Design System & Atomic Design: Creación de componentes desde átomos (iconos y botones) hasta organismos complejos (cards de propiedades), asegurando una consistencia total en toda la web.
- Jerarquía Visual y Tipográfica: Combinación de una fuente Serif elegante para titulares (autoridad) y una Sans-serif geométrica para datos (legibilidad).
- Psicología del Color: Uso del Mediterranean Teal para acciones principales (frescura y mar) y Deep Navy para la estructura (seriedad y lujo), garantizando el cumplimiento de accesibilidad WCAG.
- Gestión del Espacio (Negative Space): El uso generoso de márgenes permite que las fotografías de las propiedades sean las protagonistas, reduciendo la fatiga visual.
- Affordance: Cada botón y filtro tiene estados de interacción (hover, activo) claros para guiar al usuario sin dudas.
Wireframes
05. Enfoque Mobile-First
La versión móvil no es una adaptación, es una optimización. Diseñé específicamente pensando en la ergonomía de pantallas grandes como la del iPhone 16 Pro Max:
- Zonas de Pulgar: Los CTAs críticos (Hacer una consulta, Llamar) están situados en la zona de fácil alcance.
- Galería Adaptada: Visualización tipo stack de imágenes para facilitar el scroll vertical.
- Micro-interacciones: Transiciones suaves que mejoran la percepción de calidad de la app.
