Proceso
El proceso partió de un gap real en Google Maps, una funcionalidad que debería existir y no existe. El diseño cubrió todos los estados de la app desde el inicio: conexión, vacío, carga, error, proximidad. No hay pantalla sin su estado correspondiente.
- Gap de producto real
- Estados completos
- Empty states
- Loading states
- Flujo de vinculación
- Configuración de usuario
El usuario de NearBy es alguien que ya usa Google Maps activamente para guardar sitios, restaurantes, tiendas, lugares de interés, y que se ha encontrado más de una vez en una zona sin recordar que tenía un sitio guardado cerca. No necesita que le expliquen qué es la geolocalización ni las notificaciones, ya las usa a diario. Lo que necesita es que la app sea transparente: que funcione en segundo plano sin interrumpir, que avise en el momento justo y que la configuración sea simple y no requiera atención constante.
Cuatro flujos definieron las prioridades del diseño. El primero: la vinculación con Google Maps, el usuario tiene que conectar su cuenta antes de poder usar la app, y ese flujo tiene que ser claro, con sus estados de carga y error bien resueltos. El segundo: Mis sitios, la pantalla principal con filtro por categoría, skeleton loading, empty state y swipe para eliminar. El tercero: la pantalla de sitio, el indicador circular de distancia con su lectura inmediata en verde o rosa según la proximidad. El cuarto: Settings, configuración de notificaciones, unidad de medida y distancia de notificación con opción personalizada.
La pantalla de sitio fue la que más exploración requirió. La primera idea fue una UI tipo semáforo, rojo, amarillo, verde, para indicar la proximidad. Se descartó porque el semáforo tiene una connotación de alerta o peligro que no encajaba con el tono de la app. La segunda exploración fue un indicador de progreso lineal. Se descartó porque no transmitía la idea de distancia física de forma intuitiva. La solución final fue un indicador circular con el valor numérico en el centro, verde cuando estás dentro de la distancia de notificación configurada, rosa cuando estás lejos. El círculo evoca radar, proximidad, área, conceptos más afines al caso de uso que un semáforo o una barra de progreso.
La app se organiza en tres secciones accesibles desde una barra de navegación inferior: Sitios, Usuario y Ajustes. Sitios es la pantalla principal, lista de localizaciones guardadas con filtro por categoría y acceso al detalle de cada sitio. Usuario gestiona la vinculación con Google Maps, con sus tres estados: no vinculado, vinculando y vinculado. Ajustes centraliza la configuración global de la app, notificaciones, unidad de medida y distancia de notificación. La pantalla de añadir sitio y la pantalla de detalle de sitio son pantallas secundarias accesibles desde Sitios.
