Caso de Estudio - Mirage
Ecommerce de Aire Acondicionado + Plataforma para Instaladores
¿Quién es?
Mirage CDMX es la representación directa en Ciudad de México del fabricante nacional de aires acondicionados Mirage, marca líder en soluciones de climatización en México. Este sitio web fue desarrollado para potenciar su canal de ventas directas al público y consolidar una red de técnicos certificados.
Desafío
El sitio tenía dos objetivos fundamentales:
- E-commerce: Crear una tienda en línea moderna, clara y funcional que permitiera al público adquirir aires acondicionados directamente del fabricante.
- Reclutamiento de Técnicos Certificados: Diseñar una plataforma donde instaladores puedan registrarse como técnicos Mirage y acceder a beneficios como precios preferenciales, soporte y referidos de clientes.
Mi rol
Como UX/UI Designer y Web Developer, fui responsable de todas las etapas clave del diseño e implementación:
- Investigación de usuarios y definición de personas clave.
- Diseño de wireframes y flujos de navegación centrados en el usuario.
- Creación del Design System y prototipos de alta fidelidad.
- Desarrollo completo del sitio en WordPress con Elementor Pro.
Herramientas
- Figma – Wireframes, UI kits y prototipos interactivos.
- Adobe Photoshop – Edición de imágenes e interfaz gráfica
- Adobe Illustrator – Iconografía e ilustraciones vectoriales.
- WordPress + Elementor Pro – CMS base para la gestión del contenido y constructor base para personalización avanzada.
Metodología UX: Enfoque de Design Thinking
¿Qué es Design Thinking?
Es una metodología centrada en el usuario que guía la resolución de problemas mediante cinco etapas iterativas: empatizar, definir, idear, prototipar y testear. Me permite diseñar soluciones digitales funcionales, empáticas y alineadas con objetivos de negocio.foque modular y responsive.
Empatizar
Entrevistas con instaladores, compradores finales y responsables de mantenimiento en empresas permitieron entender sus motivaciones y puntos de dolor.
Definir
Se detectaron dos perfiles con necesidades específicas: consumidores residenciales que buscan seguridad al comprar directamente del fabricante, y técnicos que quieren formar parte de la red Mirage.
Idear
Diseñamos una experiencia dual: una tienda online amigable y una zona de reclutamiento técnico clara, con formularios eficientes y mensajes de valor.
Prototipar
Prototipos en Figma facilitaron validaciones rápidas con el equipo Mirage.
Testear
Se realizaron pruebas internas con usuarios simulando compras y registros de técnicos.
User persona
Francisco, 32 años
Técnico Independiente
- Objetivos: Expandir su red de clientes y obtener mejores precios como técnico certificado Mirage.
- Necesidades: Proceso de registro ágil, acceso rápido a descuentos y soporte técnico.
- Frustraciones: Proveedores que no ofrecen beneficios o no refieren clientes.
Ximena, 40 años
Compradora Residencial
- Objetivos: Comprar un minisplit confiable para su hogar.
- Necesidades: Información técnica, instalación incluida y atención directa del fabricante.
- Frustraciones: Páginas confusas, falta de soporte post-venta y poca transparencia.
Jorge, 48 años
Gerente de Mantenimiento de Hotel
- Objetivos: Renovar los sistemas de climatización de un hotel con una marca nacional confiable.
- Necesidades: Acceso a productos por volumen, contacto con técnicos certificados, garantía directa y atención personalizada.
- Frustraciones: Proveedores que tercerizan la atención y poca claridad en postventa o garantías.
Soluciones UX/UI Implementadas
- E-commerce funcional con filtros, fichas de producto completas, botón de compra fácil y estructura de carrito simplificada.
- Zona de Técnicos Certificados destacada, con beneficios claros, formulario rápido y enfoque en los referidos.
- Diseño responsive para una navegación perfecta desde móvil y escritorio.
- Jerarquía visual optimizada para destacar promociones, garantías y valor de marca.
- Formulario de contacto y llamada directa desde móvil para soporte ágil.
Proceso en Acción: Vistas del Proyecto
Este proyecto exigía una solución UX/UI que cubriera tanto la experiencia de compra directa como el reclutamiento técnico especializado. Estas vistas evidencian cómo un enfoque centrado en el usuario, combinado con un diseño funcional y visualmente fuerte, puede dar soporte tanto a las necesidades del negocio como a las expectativas de sus distintos públicos.
Las siguientes vistas documentan cada paso del proceso, desde el diseño estratégico hasta la validación funcional de la plataforma dual:
Mapa Mental de Navegación
Estructuré los contenidos del sitio diferenciando claramente las rutas del usuario final (comprador) y del técnico, facilitando el acceso rápido a productos o formularios de registro.
Customer Journey Map
Identifiqué los puntos clave de decisión de cada tipo de usuario (residencial, técnico, corporativo), permitiendo enfocar el diseño en confianza, beneficios y agilidad de acción.
Bocetos Iniciales a Mano
Boceté ideas rápidas de layout para homepage, tienda y sección de técnicos, explorando el balance entre conversión comercial y comunicación institucional.
Wireframes de Estructura (Figma)
Definí la estructura funcional del sitio, incluyendo filtros de producto, flujos de compra simplificados y llamadas a la acción estratégicas en páginas clave.
Design System (Figma)
Desarrollé un sistema visual con colores de marca, iconografía funcional y componentes UI reutilizables que aseguraron consistencia y escalabilidad.
Prototipo Interactivo (Figma)
Construí prototipos de alta fidelidad que permitieron testear la tienda y los formularios de registro técnico, garantizando claridad, accesibilidad y conversiones efectivas desde el primer scroll.
Resultados Estimados
(Benchmarks del sector B2B)
Aunque no se cuenta con métricas directas post-lanzamiento, se estiman los siguientes impactos con base en casos comparables de rediseño UX/UI:
Indicador UX
Estimación Post-Rediseño
Tiempo promedio en sitio
↑ +35%
Tasa de rebote
↓ -20%
Conversiones en tienda
↑ +30%
Registro de técnicos
↑ +50%
Satisfacción del usuario
↑ mejora significativa
Reflexión final
“Este proyecto demuestra cómo un enfoque centrado en el usuario, acompañado por herramientas visuales poderosas como Figma y Elementor Pro, puede llevar la experiencia digital de un fabricante al siguiente nivel. El sitio web de Mirage CDMX no solo mejora la experiencia de compra directa, sino que fortalece su ecosistema técnico a través de una red de instaladores certificados, consolidando así su liderazgo en el sector.”
Contacto
No busco solo un empleo, busco aportar.
Si necesitas una diseñadora con experiencia, criterio y energía para sumar al equipo.
