Estrategia técnica continua, precio fijo.
Conoce másERP empresarial, listo en semanas.
Productos SaaS
Cumplimiento Indecopi.
SaaSControl de acceso.
Servicios
Producto digital de cero, UX incluida.
Agentes, modelos y automatizaciones.
Migración e infraestructura cloud-native.
Squads como extensión de tu equipo.
Diagnóstico técnico del stack y seguridad.
Experiencia de usuario y conversión.
Cómo Altimea rediseñó el flujo de compra del ecommerce de Tottus con consultoría UX integral, ventanas diferenciadas de envío para food y non-food, validación con usuarios reales y maquetación HTML responsive entregada para desktop y mobile.
del nuevo checkout (vs nueve pasos del flujo anterior).
de research, rediseño y maquetación end-to-end.
PM, UX Designer, UI Designer, Frontend Dev y QA.
research, ideation, creation, prototype, testing y design.
Tottus es uno de los supermercados más grandes del Perú, parte del grupo Falabella, con red nacional de hipermercados, supermercados y operación ecommerce a través de tottus.com.pe. Su mix combina food — frescos, abarrotes, panadería, carnes — con non-food — electrohogar, textil, hogar, juguetería, perfumería — bajo una sola marca.
El ecommerce no es un canal anexo: es la extensión digital del supermercado físico. Y como cualquier supermercado online, el checkout es el cuello de botella: ahí es donde el carrito armado se convierte en venta o se abandona. Cuando ese flujo se vuelve largo, opaco o quiebra entre líneas de producto, la conversión cae sin que el front de la tienda lo registre.
La pregunta era directa: ¿cómo unificamos un único checkout para food y non-food, lo simplificamos a una sola página y lo dejamos maquetado en HTML para que el equipo de desarrollo del cliente lo aterrice sin reescribir?
Un checkout largo en un ecommerce de supermercado no es un problema de UX cosmético: es la diferencia entre un carrito que se cierra y uno que se abandona.
El flujo previo de tottus.com tenía nueve pasos y combinaba tres líneas de producto distintas — fresco, electro y otros — cada una con reglas operativas y almacenes diferentes. La consecuencia era previsible: el usuario que armaba un carrito mixto (un pollo + una licuadora + un detergente) tenía que avanzar por un wizard largo, lleno de transiciones entre páginas y de validaciones que el flujo no terminaba de explicar bien. La conversión y la experiencia se veían afectadas.
El reto no era "acortar" el checkout cosméticamente. Era rediseñar el flujo desde el usuario — entender qué frustra, qué falta, qué es información crítica — y resolver al mismo tiempo el problema operativo: un solo checkout para food y non-food que respete las ventanas diferenciadas de envío que cada línea exige por almacén. Y entregar el rediseño maquetado en HTML responsive para que el equipo de desarrollo del cliente lo aterrice sin reescribir la propuesta.
Análisis del flujo de nueve pasos vivo en tottus.com, mapeo de las tres líneas de producto (fresco, electro y otros) con sus reglas operativas y entrevistas con usuarios reales del checkout — qué los frena, dónde se confunden, dónde abandonan. User Journey Mapping sobre el flujo legado antes de proponer rediseño.
Replanteo del checkout en una sola página: agrupación de pasos, jerarquía visual, manejo de las ventanas diferenciadas de envío para food y non-food. Decisiones de arquitectura validadas contra los hallazgos del research, no contra la opinión del equipo creativo.
Diseño de wireframes y prototipos navegables en Figma para desktop y mobile. Cada iteración entró a testing con usuarios reales del público objetivo — no a comité interno — y los hallazgos cerraron cada ciclo antes de avanzar al siguiente.
Entrega del nuevo flujo maquetado en HTML, CSS y JavaScript responsive, validado en desktop y mobile, con análisis de factibilidad tecnológica previo al cierre — el equipo de desarrollo de Tottus recibió un entregable que pudo aterrizar sin reescribir.
La solución no fue un wireframe bonito en Figma. Fue un rediseño UX completo del flujo de compra de tottus.com — research, prototipado, testing y maquetación HTML responsive — entregado en una sola página con un único checkout para food y non-food, validado con usuarios reales y dimensionado para que el equipo de desarrollo del cliente lo aterrice sin reabrir el diseño. Cuatro pilares lo sostienen.
El nuevo flujo unifica las tres líneas de producto (fresco, electro y otros) en un único checkout one-page. Cero rebote entre wizards distintos para tipos de producto, cero confusión sobre dónde se calcula qué. La complejidad operativa no desaparece — queda absorbida por el diseño.
El rediseño respeta la regla operativa real: productos food y non-food tienen ventanas de despacho distintas porque salen de almacenes distintos. El nuevo checkout las expone con claridad sin obligar al usuario a entender la lógica de almacenes — el front muestra opciones, el back resuelve la coordinación.
Cada decisión de jerarquía, copy, navegación y micro-interacción se ancló en research previo y se validó con usuarios reales en cada iteración. Cero diseño desde la opinión del equipo: la simplificación de nueve a cinco pasos sale de hallazgos, no de preferencias estéticas.
El entregable final no se queda en Figma: incluye maquetación HTML, CSS y JavaScript responsive para desktop y mobile, validada técnicamente para que el equipo de desarrollo de Tottus la aterrice sin reescribir. Factibilidad técnica revisada antes del cierre.
Lo importante no fue rediseñar un checkout más bonito. Fue rediseñar uno probado con sus propios usuarios, unificado para las tres líneas de producto sin perder las reglas operativas y entregado maquetado en HTML para que el equipo de desarrollo del cliente lo lleve a producción sin reabrir el diseño. Dos meses de research, rediseño y maquetación, un único entregable validado.
reducción del flujo de compra de nueve a cinco pasos en una sola página.
con usuarios reales del público objetivo en cada iteración del prototipo, no con stakeholders internos.
un solo flujo unificado para food y non-food, con ventanas de envío diferenciadas.
One-page responsive desktop + mobile — el rediseño cierra todo el flujo en una sola página, validada en desktop y mobile, con maquetación HTML lista para producción.
Ventanas de envío diferenciadas sin romper la unicidad — el checkout respeta las reglas operativas de food y non-food sin obligar al usuario a entender la lógica de almacenes.
Handoff técnico sin sorpresas — análisis de factibilidad tecnológica antes del cierre. El equipo de desarrollo del cliente recibió HTML/CSS/JS, no sólo mockups.
Seis fases UX completas — research, ideation, creation, prototype, testing y design ejecutadas en orden estricto. La simplificación de nueve a cinco pasos sale del proceso, no de un capricho.
Dos meses end-to-end, de research a entrega final. El proyecto cubrió las seis fases del método UX de Altimea: research del checkout actual, ideación del nuevo flujo, creation, prototipado en Figma, testing iterativo con usuarios reales y design final. El alcance incluyó análisis de factibilidad tecnológica y maquetación HTML, CSS y JavaScript responsive para desktop y mobile, no sólo mockups. La duración refleja un squad dedicado durante esos dos meses, no horas dispersas en bolsas externas.
Cinco perfiles dedicados durante los dos meses: un PM como interfaz única con Tottus, un UX Designer responsable de research, prototipado y testing con usuarios, un UI Designer para aterrizar la nueva identidad del flujo, un desarrollador FE para la maquetación HTML responsive y un QA que cubrió la consistencia del entregable. Una sola mesa para diseño y desarrollo del frontend — sin handoffs entre proveedores y con contexto acumulado del primer al último día.
Figma como herramienta principal de diseño y prototipado para desktop y mobile. User Journey Mapping y entrevistas con usuarios reales del checkout actual antes de tocar wireframes. Testing iterativo con público objetivo del ecommerce en cada iteración del prototipo. Para la maquetación final: HTML, CSS y JavaScript responsive validados en desktop y mobile, con análisis de factibilidad tecnológica previo al cierre. Cuatro grupos de stack: UX research, diseño, frontend y validación.
Tres resultados concretos. Primero, el flujo de compra pasó de nueve a cinco pasos en una sola página — simplificación validada con usuarios reales, no opinión interna. Segundo, un único checkout unificado para food y non-food con ventanas de envío diferenciadas, resolviendo el problema operativo sin trasladarlo al usuario. Tercero, el equipo de desarrollo de Tottus recibió un entregable con maquetación HTML responsive lista para producción — análisis de factibilidad tecnológica revisado antes del cierre.
Research-first. Antes de proponer un rediseño se hizo User Journey Mapping del checkout vivo de tottus.com y entrevistas con usuarios reales — qué los frena, dónde se confunden, dónde abandonan. Recién después se replanteó la arquitectura en una sola página con ventanas de envío diferenciadas para food y non-food. Cada iteración de prototipo entró a testing con usuarios reales del público objetivo, no a comité interno. El entregable cerró con maquetación HTML/CSS/JavaScript responsive lista para producción, validada técnicamente.
Empresas con un ecommerce que tiene un checkout largo, fragmentado o con múltiples líneas de producto que operan con reglas distintas — supermercados, retailers multi-categoría, marketplaces de consumo masivo, tiendas con food y non-food. El patrón aplica especialmente cuando la conversión cae en el último tramo del funnel y el equipo necesita un rediseño UX validado con usuarios + maquetación HTML lista para producción. Servicio principal: Consultoría UX/CX. Idealmente cuando hay equipo de desarrollo interno o un proveedor para la implementación posterior.
El servicio principal fue Consultoría UX/CX, que cubrió de research a testing con usuarios reales. Como el alcance incluyó maquetación HTML responsive y análisis de factibilidad tecnológica, también se apoyó en Desarrollo a medida y Auditoría Tech.
Agenda 30 minutos con nuestro equipo. En esa consulta dimensionamos alcance del research, complejidad del rediseño y la composición del squad UX + frontend. Si no somos los correctos para el proyecto, te lo decimos con la misma honestidad.
Agenda tu diagnóstico gratisTe respondemos en menos de 24 horas hábiles.
Garantizan el funcionamiento del sitio (sesión, preferencias técnicas, seguridad). No se pueden desactivar.
Nos ayudan a entender cómo se usa el sitio (páginas más visitadas, recorrido, tiempos) para mejorarlo. Ej: Google Analytics, Microsoft Clarity.
Permiten medir y mostrar anuncios relevantes en otras plataformas. Ej: Meta (Facebook/Instagram), LinkedIn.