Homecenter
Sodimac Corona
Descripción del proyecto
Homecenter Sodimac Corona es una de las cadenas de mejoramiento del hogar más grandes de Colombia, con millones de usuarios navegando su plataforma cada mes. Sin embargo, detrás de ese volumen había un problema silencioso: los usuarios llegaban al checkout y se iban. El proceso era largo, confuso y generaba desconfianza justo en el momento más crítico de la compra.
Este es un caso de estudio end-to-end donde investigué, diseñé y validé con usuarios reales un rediseño completo del flujo de compra y del servicio de instalación en el hogar desde las primeras encuestas hasta un prototipo de alta fidelidad probado con 13 participantes.
Problema
El 100% de los usuarios encuestados encontraba los costos de envío ocultos hasta el final. La disponibilidad del producto solo aparecía después de hacer clic en "Comprar". Y el servicio de instalación no explicaba ni cuándo ni cómo llegaría el técnico. El resultado: abandono del carrito, llamadas al servicio al cliente y pérdida de conversiones evitables.
Objetivo
Rediseñar el checkout y el servicio de instalación para que el usuario tenga visibilidad completa antes de comprometerse eliminando las sorpresas de último momento, reduciendo los pasos innecesarios y construyendo confianza desde el primer clic hasta la confirmación del pedido.
Mi rol
UX/UI Designer: proceso completo. Fui responsable de cada etapa del proyecto: diseñé y analicé encuestas con usuarios reales, construí la User Persona, conduje un análisis heurístico, restructuré la arquitectura de información, creé el sistema de diseño desde cero respetando la identidad de marca, y diseñé los wireframes de media y alta fidelidad. El diseño fue validado con test de usabilidad en Maze con 13 participantes, logrando una tasa de éxito del 84.6% y una puntuación de facilidad percibida de 9.3/10.
Responsabilidades
- Investigación con usuarios y entrevistas en profundidad
- Creación de personas y mapas de viaje del usuario
- Wireframes en papel y digitales
- Iteración de diseños basada en hallazgos de usabilidad
- Prototipo de alta fidelidad en Figma
- Pruebas de usabilidad con 13 participantes en UXtweak
Investigación de Usuarios
Antes de diseñar una sola pantalla, necesitaba entender por qué los usuarios abandonaban. Combiné métodos cuantitativos y cualitativos para construir una imagen completa: encuestas virtuales con 12 participantes reales, análisis heurístico de los dos flujos críticos, arquitectura de información con tree testing en UXTweak y un mapa de trayectoria del usuario. El objetivo era claro, no asumir, sino descubrir.
Pain Points
Navegación
Arquitectura confusa. Los filtros estaban desorganizados y la disponibilidad del producto solo aparecía después de hacer clic en "Comprar" cuando el usuario ya había tomado la decisión.
Velocidad
Flujos demasiado largos. El checkout exigía pasos innecesarios: inicio de sesión tardío, un modal que interrumpía el flujo para actualizar precios por ubicación, y datos del receptor pedidos en el momento de menos contexto.
Claridad
Costos que aparecen al final. El 100% de los encuestados consideró crítico no ver el costo de envío desde el inicio. La sorpresa de último momento era la razón principal de abandono del carrito.
User Persona
"Compro desde el computador después del trabajo, quiero que sea rápido y sin sorpresas."
Bio
Vive con su familia en Cali y compra artículos para el hogar varias veces al año. Su rutina es exigente, así que prefiere hacer sus compras en la noche desde el computador, procesos rápidos, sin fricciones. Valora la transparencia antes de comprometerse con cualquier compra.
Motivaciones
- Tener toda la información clara antes de pagar.
- Contratar instalaciones sin llamadas de seguimiento.
- Optimizar su tiempo sin sacrificar calidad ni seguridad en sus compras.
Frustraciones
- Costos de envío que aparecen al final.
- Stock agotado justo al momento de pagar.
- Agendar una instalación que requiere múltiples llamadas.
- Flujos largos que la hacen abandonar antes de terminar.
Habilidades tecnológicas
Compra desde la web. Se frustra cuando los procesos no son intuitivos.
Journey Map
Mapear el recorrido de Ana María reveló algo que los datos por sí solos no podían mostrar: el problema no era un paso aislado, era el flujo completo. Desde que busca el producto hasta que recibe confirmación de su instalación, cada etapa acumulaba pequeñas fricciones que en conjunto generaban desconfianza y abandono.
El journey map permitió identificar exactamente dónde caía la emoción del usuario y más importante, qué oportunidades de diseño existían en cada punto crítico.
Comenzando el Diseño
Con la investigación como base, el proceso de diseño arrancó desde la estructura antes de pensar en colores o componentes, había que resolver cómo el usuario navegaría y qué encontraría en cada paso.
Análisis HeurísticoDiagnóstico del sitio actual
Antes de proponer soluciones, analicé el sitio actual de Homecenter bajo las heurísticas de Nielsen. Documenté los errores de usabilidad en los dos flujos críticos , checkout y servicio de instalación , con capturas reales y descripciones del impacto en el usuario. Esto me permitió diseñar con evidencia, no con suposiciones.
Estructura y flujo
Levanté la arquitectura actual del sitio para entender cómo estaban organizados los contenidos y dónde se perdía el usuario. Luego validé la estructura con un Tree Testing en UXTweak con 10 usuarios y 2 tareas clave. El resultado confirmó que el flujo de compra era relativamente claro, pero el servicio de instalación tenía una baja tasa de éxito, los usuarios no sabían dónde encontrarlo. Con esos hallazgos, construí el Task Flow que define paso a paso el recorrido real de Ana María dentro del sitio.
Wireframes de media fidelidad
Explorando la estructura antes del detalle visual
Con el flujo definido, diseñé wireframes de media fidelidad para los dos flujos completos checkout y servicio de instalación, totalizando 9 pantallas por flujo. Esta etapa permitió validar la jerarquía visual, la estructura de cada pantalla y las decisiones de usabilidad antes de invertir tiempo en el diseño final. Cada pantalla fue pensada para eliminar los puntos de fricción identificados en la investigación.
Diseño Visual
Antes de pasar a alta fidelidad, construí el Design System del proyecto tomando como base los colores actuales de Homecenter y ajustándolos para cumplir criterios de accesibilidad WCAG 2.1. El sistema incluye paleta de color con roles definidos, escala tipográfica, grilla de 12 columnas, escala de espaciado, bordes, sombras y los componentes reutilizables: botones, inputs, cards de producto y cards de servicio de instalación. Esto garantizó coherencia visual en cada pantalla del prototipo.
Paleta de color
Colores de marca ajustados para cumplir WCAG 2.1. Cada color tiene un rol funcional: rojo para acciones, azul para confianza, verde para confirmación.
Tipografía
Buttons
Tres variantes con estados completos. El botón primario es full-width en los CTAs clave, aplicando la Ley de Fitts en el momento de decisión.
Cards
Pantallas de alta fidelidad
Cada pantalla fue diseñada con una razón específica detrás. Las anotaciones muestran cómo los principios de usabilidad , Ley de Fitts, Ley de Hick, Visibilidad del sistema, Prueba Social, entre otras. Se tradujeron en decisiones concretas que resuelven los problemas identificados en la investigación.
Flujo carrito de compra
Flujo Servicio de Instalación
Hallazgos del estudio de usabilidad
Realicé pruebas de usabilidad con 13 participantes en Maze, 10 no moderadas y 3 moderadas, usando el prototipo de alta fidelidad. Una sola tarea: comprar una lámpara colgante y contratar el servicio de instalación con fecha y hora específicas.
Los usuarios no sabían si el producto estaba disponible en su ciudad hasta después de hacer clic en "Comprar".
La disponibilidad por ciudad y el tipo de entrega se muestran directamente en la ficha del producto, antes de cualquier acción de compra.
El carrito no mostraba un resumen claro antes del pago, el usuario no sabía el total real hasta el último paso.
Se agregó un panel lateral "Resumen de tu selección" visible en todo momento con productos, descuento, envío y total estimado.
El servicio de instalación no explicaba cómo ni cuándo llegaría el técnico, generando llamadas al servicio al cliente.
Se diseñó un flujo de agendamiento con calendario en tiempo real, franjas horarias con disponibilidad y perfil del técnico asignado antes de confirmar.
Resultados cuantitativos
Resultados
Tras el estudio final de usabilidad y las iteraciones de diseño, el producto logró mejoras significativas en satisfacción de usuarios y completación de tareas.
Validación de Hipótesis
H1 · Checkout confuso
- · 100% sentimiento positivo sobre claridad del resumen
- · Usuarios confirman que muestra correctamente productos y servicios
- · Se resolvió el problema de confusión y desconfianza
El diseño comunica efectivamente el resumen antes del pago
H2 · Servicio de instalación poco claro
- · Descrito como "muy fácil e intuitivo" por todos los usuarios
- · Lograron agendar fecha y hora específica sin dificultad
- · Sin reportes de confusión sobre el proceso de agendamiento
El flujo de agendamiento es ahora visible y comprensible
Logros Alcanzados
Navegación: Categorías más claras y fáciles de encontrar para el usuario.
Servicio de Instalación: Accesible, visible y comprensible a lo largo de todo el flujo de compra.
Proceso de Compra: Pasos innecesarios eliminados, flujo enfocado en lo esencial.
Información de Producto: Contenido reorganizado, relevante y con jerarquía clara.
Diseño Visual (UI): Interfaz más coherente, agradable y profesional.
Aprendizajes del proceso
Escala y arquitectura de información: Trabajar con la magnitud de Homecenter me obligó a dominar sistemas de organización de contenido. Aprendí a estructurar grandes volúmenes de categorías de forma que tuvieran sentido real para los usuarios.
Balance en el diseño de flujos: Optimizar el checkout me enseñó a encontrar el equilibrio entre brevedad y claridad. Cada pantalla tiene un costo cognitivo: simplificar sin perder información relevante es un reto de diseño genuino.
Sistemas de diseño y UI visual: Profundicé en principios de tipografía, paletas de color, jerarquía visual y espaciado. Estudié sistemas de diseño y referentes para construir una interfaz coherente y profesional a lo largo del proyecto.
Priorización estratégica: Con tiempo limitado, aprendí a identificar qué mejoras generan mayor impacto. Priorizar por severidad y frecuencia de los problemas es una habilidad que ahora aplico conscientemente.
Para concluir...
"Diseñar no es solo hacer que las cosas se vean bonitas, sino realmente resolver problemas."
Este proyecto me permitió aplicar investigación con usuarios reales, justificar cada decisión con datos y entender por qué se diseña de una manera específica no por intuición, sino por evidencia.
¿Quieres leer el caso completo?
Explora la documentación técnica, los prototipos y el despliegue visual completo de este proyecto en mi Behance