Redesign of a vehicle tracking app.
UX audit, design and complete redesign of a mobile satellite tracking app for vehicle owners.
Study:
Tools:
UX audit, design and complete redesign of a mobile satellite tracking app for vehicle owners.
Study:
Tools:
Guardian is a satellite tracking app (iOS/Android) that gives users full control over their vehicle: real-time location tracking, remote engine start and stop alerts in the event of theft, with coverage across Uruguay, Mercosur, Peru and Bolivia, and installation in 40 minutes.
Project timetable
1
The process:
A functional app, but one that’s difficult to use
Guardian is a vehicle tracking app that already had active users, but was plagued by long-standing usability issues, visual inconsistencies and unresolved product decisions. The client needed to understand exactly what was going wrong before continuing to develop the app.
2
El proceso
UX audit: understand before you design.
The first step was a comprehensive UX audit of the existing app. We documented 50 findings organised by category: interaction issues, implementation bugs, visual inconsistencies and product decisions requiring client validation.
Guardian hoy
50
Documented UX findings. 6 categories – 18 critical issues.
6 categorías - 18 críticos.
2
Native platforms supported: iOS, Android, light and dark modes.
6
Redesigned workflows. Wireframes and interactive prototype.
Wireframes y prototipo interactivo.
Nuestro proceso
19
Departments covered: All of Uruguay,
5
Coverage categories: Cars, motorbikes, lorries, pets and people
6
Countries with international coverage: Mercosur, Chile, Bolivia and Peru.
3
App Map
The skeleton after the experiment.
We’ve stripped navigation down to the essentials: rather than organising by function, we organise by what the user needs to do at any given moment.
4
Sistema de diseño
Tokens, rather than screens.
Before designing individual screens, we laid the foundations for the system: colour tokens, typography and components. This ensures consistency in implementation and scales well as the app grows.
Escala de espaciado
Aa
Typography: Space Grotesk
Colour palette
Presentation formats
Frame base & Grid
5
Diseño de pantallas
Redesign, screen by screen.
With the audit completed and the design system defined, each screen was redesigned based on the findings: broken workflows were corrected, missing states were added, the visual hierarchy was clarified, and it was ensured that critical actions were given the correct prominence and protection.
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
That first second matters.
The splash screen is the user’s first interaction with the app. We’ve designed a clean, straightforward opening: the logo is centred, the background is dark, and there’s a smooth transition to the login screen. With no distractions, Guardian’s brand identity speaks for itself.
7
Entrega
Handoff pensado para el desarrollador.
All the work is housed in Figma: wireframes, design tokens, the UI kit, mood boards and final screens, organised into separate pages.
Each handover to the developer includes visual specifications and reference Flutter code where relevant.
8
Los resultados
Guardian is currently under development. The findings of the audit are being implemented gradually alongside the visual redesign. This case study will be updated with results and metrics once the redesigned version goes live.
