InStore - UX/UI Case Study

1

Overview

Un ecosistema digital para optimizar el proceso de retiro en tienda física

Inicio de diseños
2 Sprints

Mi Rol
Lead UX/UI Designer

Equipo
PO, 2 Devs, 1 QA

Plataformas
Web + Android App

Herramientas de diseño
Figma, Miro

Cliente
Intercorp Retail

InStore es una solución diseñada para la industria retail de gran formato que buscan optimizar su servicio de retiro en tienda. El sistema conecta la gestión administrativa (web) con la operación en piso de venta (móvil) para reducir tiempos de espera y mejorar la satisfacción del cliente final.

El desafío principal fue crear dos experiencias distintas pero integradas: una plataforma web robusta para análisis y control gerencial, y una app móvil ágil para el personal operativo que trabaja bajo presión y en movimiento constante.

2

¿Por qué empezamos el proyecto?

El contexto de pandemia que impulsó la creación de InStore

📈 Contexto del Mercado

Crecimiento del e-commerce en Perú en pandemia
Tendencia del "click & collect" en auge
Retailers invirtiendo en experiencia omnicanal
Competencia entre tiendas por departamento

🎯 Oportunidad Identificada

Los retailers peruanos enfrentaban un cuello de botella crítico: mientras las compras online crecían 300%, los sistemas de retiro en tienda seguían siendo manuales, causando colas de hasta 45 minutos y pérdida de clientes.

⚠️ Problema del Negocio

Procesos manuales de registro y búsqueda
Falta de visibilidad en tiempo real
Personal sin herramientas digitales eficientes
Imposibilidad de medir KPIs de servicio

🎯 Objetivos del Proyecto

Reducir tiempo de retiro de 35 a 10 minutos
Aumentar capacidad de 20 a 50 clientes/hora
Implementar dashboard de KPIs en tiempo real
Reducir errores de entrega en 90%

3

Entendiendo el Problema

Definición clara del problema y alcance del proyecto

Problem Statement - Back Office

"Los gerentes de tienda necesitan una herramienta centralizada de monitoreo y análisis porque actualmente no tienen visibilidad en tiempo real del proceso de retiro, lo que impide tomar decisiones operativas ágiles y medir el desempeño de su equipo."

Problem Statement - App Picking

"El personal de picking necesita una aplicación móvil intuitiva y rápida porque actualmente pierden tiempo consultando sistemas desktop, papeles impresos o radios, generando demoras y errores que frustran al cliente final."

Dentro del Alcance

Sistema web responsive para back office
App Android nativa para picking
Módulo de notificaciones en tiempo real
Dashboard de KPIs y reportes
Integración con API de inventario
Panel de configuración por tienda

Fase 2 (Fuera del Alcance)

App iOS
Sistema de impresión de etiquetas
Sistema de forecast para picking
Integración con sistema de pagos
Reportes avanzados de BI

4

User Research

Metodología de investigación y hallazgos clave

Shadowing

7 días en 5 tiendas observando a clientes y colaboradores en su trabajo diario

Entrevistas

15 entrevistas en profundidad con picking boys, gerentes y supervisores de módulo

Encuestas

35 colaboradores de 5 tiendas respondieron encuesta de validación de pain points

Sin notificaciones

"No me entero que hay pedido hasta que el cliente viene a reclamar que lleva esperando 20 minutos"

Productos perdidos

Sistema de ubicación basado en memorización genera búsquedas de 15+ minutos

Doble desplazamiento

Personal debe volver al módulo para registrar cada entrega, perdiendo tiempo valioso

Sin métricas

Gerentes no pueden medir tiempo de servicio ni identificar colaboradores eficientes

Colapso en pico

Sin sistema de priorización ni redistribución de carga entre personal disponible

Dispositivos compartidos

1 pc para 4 personas genera cuellos de botella y pérdida de productividad

💬 Lo que nos dijeron los usuarios

"Dame una herramienta que me avise cuando hay pedido y me diga dónde está, yo corro y lo traigo rápido. Pero si no sé ni que tengo que buscar, ¿cómo voy a ser rápido?"

— Picking Boy, 2 años de experiencia

"Necesito ver en un dashboard si estamos en verde o en rojo HOY, no esperar a que IT me genere un reporte la próxima semana."

— Gerente de Tienda PROMART

"Quisiera saber en qué zona está el producto, porque hay veces que busco en un lado y está en el otro extremo de la tienda."

— Picking Boy, 6 meses de experiencia

"Si pudiera ver qué está haciendo cada uno de mis chicos en tiempo real, podría redistribuir mejor y evitar cuellos de botella."

— Supervisor de Módulo, 2 años de experiencia en tienda

5

User Personas

Los usuarios principales de InStore

👨‍🔧

Miguel

Colaborador de Picking - Módulo Retiro en Tienda

27 años Villa El Salvador 2 años en PROMART

Objetivos

🎯 Atender todos sus pedidos sin quejas
📈 Ser reconocido como eficiente
⏱️ Reducir tiempo buscando productos
💼 Ascender a supervisor

Frustraciones

😤 No se entera de pedidos nuevos a tiempo
🗺️ Pierde tiempo buscando productos
📱 Comparte 1 tablet con 3 compañeros
😰 En horas pico se siente abrumado

"Dame una herramienta que me avise cuando hay pedido y me diga dónde está, yo corro y lo traigo rápido."

👩‍💼

Carmen

Gerente de Tienda

35 años San Miguel 3 años como gerente

Objetivos

📊 Cumplir KPI de tiempo menor a 15 min
⭐ Mantener NPS sobre 70 puntos
💰 Optimizar staffing eficientemente
🏆 Posicionar tienda en top 3 regional

Frustraciones

📉 Sin visibilidad en tiempo real
📊 Reportes manuales en Excel
🔥 Se entera de problemas tarde
⏰ No puede predecir demanda

"Necesito ver en un dashboard si estamos en verde o en rojo HOY, no esperar a que IT me genere un reporte la próxima semana."

6

User Flow

El flujo principal del proceso de retiro

Flujo: Proceso de Retiro de Pedido (Picking Boy)

1

Login en la App

El picking boy ingresa a la aplicación con su documento de identidad al inicio de su turno.

2

Recibe Notificación

Sistema envía notificación push cuando hay un nuevo pedido de retiro asignado.

3

Revisa Detalle del Pedido

Ve información del cliente, producto, número de orden y ubicación en almacén.

4

Inicia Búsqueda

Presiona "Iniciar búsqueda" y el pedido cambia a estado "En proceso".

5

Localiza el Producto

Camina al almacén siguiendo indicaciones de ubicación en la app.

6

Escanea y Valida

Escanea código de barras del producto para validar que es el correcto.

7

Entrega al Cliente

Lleva producto al módulo, verifica identidad del cliente y realiza entrega.

8

Confirma Entrega

Marca "Entrega completada" y el sistema registra tiempo total de atención.

7

Wireframes

Exploración de baja fidelidad antes del diseño final

Durante la fase de ideación, creamos múltiples iteraciones de wireframes para validar la arquitectura de información y los flujos principales con usuarios reales antes de invertir en diseño visual.

📱 Wireframes - App Móvil

01. Login

Ingreso con documento de identidad del cliente

02. Lista de Pedidos

Pedidos pendientes de retiro con checkboxes

03. Detalle del Pedido

Información completa: productos, precios, ubicación

04. Estado de Carga

Indicador de procesamiento de solicitud

05. Confirmación

Mensaje de atención registrada exitosamente

06. No Existe

Indica al cliente que no existe pedido.

8

Diseño en Alta Fidelidad

Las pantallas finales de la aplicación InStore

📱 App Móvil - Punto de Venta / Picking Boy

01. Login - Punto de Venta

El cliente ingresa su documento de identidad para visualizar sus pedidos pendientes de retiro en la tienda Magdalena.

02. Elección de módulo

Se despliega el menú del módulo, para visualizar las distintas funcionalidades a las que puede acceder el encargado.

03. Nuevo cliente

Push notification que indica que hay un nuevo cliente llego por su(s) pedido(s).

04. Selección de Pedidos

Lista de pedidos disponibles para retiro con checkbox de selección múltiple. Usuario: Andrea en Tienda Salaverry.

05. Detalle de Pedido Expandido

Vista detallada del pedido seleccionado mostrando todos los productos, cantidad, autorizado y fecha de recojo.

06. Selección de Productos

Confirmación de productos a retirar con checkboxes para validar cada ítem antes de finalizar.

07. Confirmación para finalizar la atención del pedido

Mensaje: "¿Estás seguro que deseas finalizar la atención del retiro?"

08. Resumen de Pedidos Finalizdos

Pantalla donde se puede revisar todos los pedidos finalizados en el día.

9

Diseño de Prototipos

Pantallas del Back Office Web de InStore

💻 Aplicación Web - Back Office

01. Registro de tienda

Formulario de registro para tiendas con campos de nombres, apellidos, DNI, correo electrónico y contraseña. Soporte para perfiles de Central/Corporativo y Operación en Tienda.

02. Inicio de Sesión

Formulario para inicio de sesión, dónde el. usuario debe colocar: Usuario, Contraseña y seleccionar el botón ingresar.

02. Panel de Control - Indicadores

Tablero de control con métricas de rendimiento, tiempos de atención, número de retiros por tienda y canal de venta. Filtros para seleccionar rango de fechas y tiendas.

03. Análisis de Canales de Venta

Gráficos detallados sobre porcentaje de uso del módulo de autoatención, retiros por canal (Ecommerce, Venta retail, Venta empresa) y comparativo entre tiendas.

04. Generación de Reportes

Sección para crear reportes personalizados con filtros de tienda, canal de venta, rango de fechas y tiempos de atención. Opción de descargar reportes finalizados.

06. Configuración del Sistema

Personalización de parámetros generales, integraciones, notificaciones y preferencias del sistema.

05. Centro de Ayuda

Sección de preguntas frecuentes, tutoriales de módulos y guías de uso. Información sobre servicios post venta, gestión de usuarios y recomendaciones técnicas.

08. Generación de Código QR

Herramienta para generar, visualizar y descargar códigos QR específicos para cada tienda. Proceso simple de tres pasos: generar, visualizar y descargar.

9

Sistema de Diseño

Paleta de colores y elementos visuales

Colores Primarios

Primary #2E7D32

Primary Light #4CAF50

Primary Dark #1B5E20

Accent #5D7B6F

Colores Neutros

White #FFFFFF

Background #F1F8E9

Text Dark #1A1A2E

Text Gray #5A5A6E

Colores de Estado

Success #4CAF50

Warning #FF9800

Error #F44336

Info #2196F3

Tipografía

Poppins Bold

Poppins SemiBold

Poppins Medium

Poppins Regular

Poppins Light

10

Decisiones de Diseño

Cómo resolvimos los problemas identificados

Notificaciones en Tiempo Real

Implementamos notificaciones push que alertan inmediatamente al picking boy cuando hay un nuevo pedido, eliminando la necesidad de revisar constantemente el sistema.

Ubicación de Productos

Cada pedido incluye la ubicación exacta del producto (pasillo, estante, nivel), reduciendo drásticamente el tiempo de búsqueda en almacén.

WebApp Móvil Personal

Diseñamos una webapp que funciona en smartphones personales de gama media, eliminando la dependencia de tablets compartidas.

Registro en 3 Taps

Simplificamos el proceso de registro de entrega a solo 3 interacciones, permitiendo al personal completar desde cualquier lugar.

Dashboard Gerencial

Creamos un panel de control con KPIs en tiempo real que permite a gerentes monitorear el rendimiento sin esperar reportes manuales.

12

Lecciones Aprendidas

Lo que me llevé de este proyecto

Conocer al Usuario Real

El shadowing fue clave. Pasar días en tienda me permitió entender frustraciones que nunca hubieran surgido en entrevistas formales. El contexto lo es todo.

Diseño para Restricciones

Diseñar para dispositivos de gama baja y conectividad limitada me obligó a priorizar lo esencial. Las restricciones impulsan la creatividad.

Dos Usuarios, Un Sistema

Balancear las necesidades de usuarios con perfiles tan diferentes (operativo vs gerencial) requiere empatía y comunicación constante con ambos grupos.

Simplicidad Extrema

Para usuarios con bajo nivel digital, cada tap cuenta. Reducir el proceso a 3 interacciones fue un desafío que valió la pena por la adopción lograda.

Iterar con Data Real

Los primeros usuarios piloto nos dieron feedback invaluable. Lanzar una versión mínima y mejorar con datos reales es mejor que buscar la perfección inicial.

Impacto en Personas

Ver cómo Miguel (nuestro picking boy) pasó de frustrado a orgulloso de su trabajo fue el mayor logro. El diseño puede mejorar vidas laborales.