Rediseño de app de rastreo vehicular.
Auditoría UX, sistema de diseño y rediseño completo de una app móvil de rastreo satelital para propietarios de vehículos.
Estudio:
Herramientas:
Auditoría UX, sistema de diseño y rediseño completo de una app móvil de rastreo satelital para propietarios de vehículos.
Estudio:
Herramientas:
Guardian es una app de rastreo satelital (iOS/Android) que le da control total del vehículo al usuario: ubicación en tiempo real, alerta de encendido y apagado remoto en caso de robo, con cobertura en todo Uruguay, Mercosur, Perú y Bolivia, e instalación en 40 minutos.
Cronograma del proyecto
1
Análisis de la competencia
Una app funcional, pero difícil de usar
Guardian es una app de rastreo vehicular que ya tenía usuarios activos, pero arrastraba problemas acumulados de usabilidad, inconsistencias visuales y decisiones de producto sin resolver. El cliente necesitaba entender exactamente qué estaba fallando antes de seguir construyendo.
2
El proceso
Auditoría UX: antes de diseñar, entender.
El primer paso fue una auditoría UX exhaustiva de la app existente. Documentamos 50 hallazgos organizados por categoría: problemas de interacción, bugs de implementación, inconsistencias visuales y decisiones de producto que requerían validación del cliente.
Guardian hoy
50
Hallazgos UX documentados.
6 categorías - 18 críticos.
2
Plataformas nativas cubiertas. iOS - Android - Modo claro y oscuro.
6
Flujos rediseñados.
Wireframes y prototipo interactivo.
Nuestro proceso
19
Departamentos cubiertos. Todo Uruguay.
5
Categorías de cobertura: Autos, motos, camiones, mascotas y personas
6
Países con cobertura internacional: Mercosur, Chile, Bolivia y Perú.
3
App Map
El esqueleto después de la experiencia.
Reducimos la navegación a lo esencial: en vez de organizar por funciones, organizamos por lo que el usuario necesita resolver en cada momento.
4
Sistema de diseño
Tokens, antes que pantallas.
Antes de diseñar pantallas individuales, establecimos las bases del sistema: tokens de color, tipografía y componentes. Esto garantiza coherencia en la implementación y escala bien a medida que la app crece.
Escala de espaciado
Aa
Tipografía: Space Grotesk
Paleta de colores
Modos de presentación
Frame base & Grid
5
Diseño de pantallas
Rediseño, pantalla por pantalla.
Con la auditoría resuelta y el sistema de diseño definido, cada pantalla fue rediseñada desde los hallazgos: se corrigieron los flujos rotos, se agregaron estados faltantes, se clarificó la jerarquía visual y se aseguró que las acciones críticas tuvieran el peso y la protección correcta.
Crítico:
Interfaz de comandos insegura: el botón de corte de motor estaba mezclado con acciones cotidianas, sin confirmación previa.
Importante:
El mapa usa colores para estados del vehículo (verde, amarillo, rojo,) sin ninguna leyenda explicativa.
Mejora:
Pantallas vacías sin estados de "empty state", la app no comunicaba nada cuando no había datos.
Antes
A mejorar:
- Estado en código técnico ("ACK"), ilegible fuera del backend.
- Dirección completa sin jerarquía: barrio, ciudad, departamento y CP al mismo peso
- Estadísticas sin unidades ni contexto ("Distancia 46276.37")
- Sin registro de eventos: no se sabe qué pasó ni cuándo
- "Enviar comando SMS/GPRS" como acción principal, expuesta sin protección.
Después
Resultados:
- El vehículo se identifica por modelo
- Estado en lenguaje natural, con velocidad actual
- Ubicación resumida a lo relevante, con acceso al historial
- Estadísticas con unidades e íconos, legibles de un vistazo
- Eventos recientes visibles, con acceso al listado completo
- Acciones agrupadas detrás de un único punto de entrada, separadas de la lectura de datos
Antes
A mejorar:
- Pantalla técnica orientada a protocolo (elegir GPRS/SMS), no a la necesidad del usuario.
- Sin distinción clara entre acciones de emergencia y acciones de rutina.
- Sin acceso directo a asistencia humana o llamada de emergencia.
- Espacio vacío sin aprovechar, poca jerarquía visual.
Después
Resultados:
- Acciones agrupadas por objetivo del usuario (bloquear/desbloquear motor).
- Sección de emergencia diferenciada visualmente (color rojo, jerarquía propia) para casos de robo.
- Acceso directo a Llamada al 911 y Asistencia Guardián 24 hs.
- Selector de vehículo visible arriba, mismas acciones aplicables a cualquier auto sin volver atrás.
Antes
A mejorar:
- Vista de flota saturada, todos los vehículos visibles sin agrupar ni priorizar..
- Lista inferior reducida a un checkbox ("MI VEHÍCULO") sin info de estado.
- Sin identidad de marca visible en la pantalla.
- Sin navegación global.
Después
Resultados:
- Vehículos identificados por marca/modelo real con estado y velocidad visibles en el mapa.
- Buscador de vehículo + filtros de acceso rápido para manejar flotas grandes.
- Lista de vehículos con estado en vivo ("En movimiento · 45 km/h") y última actividad ("Hace 5 min").
- Header con marca Guardian, notificaciones y mensajes.
- Navegación global con tab bar persistente.
6
Identidad en movimiento
El primer segundo, importa.
El splash screen es el primer contacto del usuario con la app.
Diseñamos una entrada limpia y directa: el logo centrado, fondo oscuro, y una transición suave hacia el login.
Sin distracciones, la identidad de Guardian habla sola.
7
Entrega
Handoff pensado para el desarrollador.
Todo el trabajo vive en Figma: wireframes, design tokens, UI Kit, moodboard y pantallas finales organizados en páginas separadas.
Cada entrega al desarrollador incluye especificaciones visuales y código Flutter de referencia cuando es relevante.
8
Los resultados
Guardian está actualmente en desarrollo.
Los hallazgos de la auditoría están siendo implementados de forma progresiva junto con el rediseño visual.
Este case study se actualizará con resultados y métricas una vez que la versión rediseñada esté en producción.
