Date:
junio 2, 2018
Investigación y Descubrimiento
Objetivo del proyecto:
El objetivo principal fue rediseñar la aplicación móvil de Biocheck con un enfoque visual más atractivo y moderno. Se buscaba una interfaz limpia y profesional, sin alterar la estructura de navegación existente. Además, debía asegurar una óptima sincronización entre los relojes checadores biométricos, la app y la plataforma administrativa para PC.
Background del Cliente
BioCheck (biocheck.net) es una empresa mexicana dedicada a ofrecer soluciones de control de asistencia y gestión de recursos humanos mediante tecnología biométrica. Cuenta con una plataforma digital y dispositivos físicos como relojes checadores con reconocimiento facial y de huella digital. Su sistema permite controlar turnos, generar reportes y administrar personal de forma centralizada para múltiples sucursales.
¿Qué hace su plataforma?
- Registro de Asistencia en Tiempo Real (huella, rostro, o app móvil)
- Gestión de Turnos y Jornadas (flexibles, rotativos, nocturnos)
- Vacaciones y Permisos (autorizaciones, faltas justificadas)
- Reportes Personalizables (Excel/PDF, con alertas automáticas)
- Integración con Relojes Biométricos (Series A, C, E)
- Soporte Multisucursal y Multiusuario
- Cumplimiento Legal (con Ley Federal del Trabajo de México)
Audiencia objetivo:
Los usuarios finales son los empleados de las empresas que adquieren el sistema Biocheck. Utilizan la app para registrar su asistencia, principalmente en campo o rutas comerciales, mediante reconocimiento facial y geolocalización. La app permite validar que un trabajador estuvo presente en la ubicación programada en tiempo y forma, mediante chequeos de entrada y salida durante su ruta asignada.
Métodos de investigación usados:
- Análisis de la competencia
- Estudio del comportamiento del usuario final
- Evaluación de condiciones técnicas para enrolamiento facial
Hallazgos clave:
- Problema principal: El registro facial requería cinco fotografías en condiciones específicas (buena luz, fondo limpio), lo cual complicaba el enrolamiento inicial.
- Oportunidad destacada: Ser pioneros en el registro de asistencia biométrica por app en el contexto laboral mexicano.
- Insight clave: Los usuarios están cada vez más familiarizados con plataformas móviles seguras, lo que facilita la adopción de soluciones tecnológicas para control de asistencia.
Arquitectura & Estrategia
Estructura de contenidos y flujos de usuario
La navegación se mantuvo simple y directa. La app se compone de tres secciones accesibles desde un menú inferior:
- Check: Registro de entrada/salida con datos biométricos.
- Rutas: Listado de lugares asignados para visitar, con accesos directos a Google Maps.
- Historial: Visualización cronológica de registros anteriores (app o reloj).
Wireframes y planteamiento inicial
Desde el inicio se plantearon wireframes con flujo lineal, eliminando la necesidad de menús desplegables. Cada acción principal tiene su vista dedicada. Estos bocetos permitieron trabajar de la mano con los programadores desde etapas tempranas.
Posteriormente se entregaron los mockups finales con diseño visual, paleta, iconografía, y todos los assets necesarios para implementación.
Razonamiento detrás de decisiones clave
- Menú inferior: Elegido por su rapidez y claridad, evitando pasos innecesarios para llegar a las funciones principales.
- Flujo intuitivo: Se respetó una lógica direccional (derecha: avanzar, izquierda: retroceder) para mantener coherencia visual y usabilidad.
- Enrolamiento biométrico: Se diseñó un wizard que guía al usuario en la toma correcta de sus 5 fotos para generar el mapa facial.
Detalles funcionales por sección
- CHECK: Permite al usuario hacer check-in o check-out, siempre y cuando haya realizado previamente el enrolamiento facial (5 fotografías).
- RUTAS: Lista de visitas asignadas con ícono para abrir la dirección en apps de mapas.
- HISTORIAL: Muestra registros ordenados por fecha, hora, tipo de dispositivo y tipo de check.
Jerarquía de información
- Títulos y subtítulos centrados para facilitar la lectura.
- El cuerpo del contenido también centrado, jerarquía visual clara con tamaños definidos.
- Botones y elementos bien espaciados para evitar sobrecarga visual.
Rediseño UX/UI
Una experiencia más ágil, clara y centrada en el usuario
El proyecto UX/UI de BioCheck se centró en transformar una herramienta técnica en una plataforma accesible, visualmente intuitiva y alineada con los objetivos corporativos de bienestar. Se optimizó la navegación, se jerarquizó la información clave para tomadores de decisiones y se diseñaron visualizaciones de datos claras y comprensibles. El resultado: una interfaz moderna y funcional que mejora la interpretación de resultados, facilita el seguimiento de indicadores de salud organizacional y refuerza la credibilidad del servicio frente a directivos y áreas de talento humano.
Diseño Visual & Prototipo
Moodboard y dirección visual
Paleta de colores:
- Azul corporativo, blanco y negro como base
- Verde turquesa brillante como acento.
- Amarillo y rojo para alertas y estados.
Tipografía:
- Titillium Web (400, 600 y 800) por su legibilidad y estética, sugerida como estándar para la app.
Estilo visual general:
- Visual moderno, atractivo y limpio.
- Se evitó el uso de cards para mantener la interfaz ligera y directa.
- Iconografía renovada, con foco en funcionalidad clara.
Componentes UI principales
- Uso de React Native y su sistema de componentes integrados.
- Se definieron paletas de colores primarios y secundarios para uniformidad visual.
- Inputs de ancho completo con diseño de línea inferior, ideales para el login.
- Listas específicas para Rutas y para Historial:
- Rutas: Ícono de mapa + nombre y dirección del lugar.
- Historial: Íconos de tipo de registro + hora + fecha + dispositivo usado + geolocalización (si aplica).
Prototipo interactivo
El prototipo se desarrolló en Adobe XD, aprovechando una librería existente basada en React Native. Se trazaron las interacciones entre pantallas y se compartió un enlace funcional con el equipo de Megacable para pruebas internas.
Pruebas e Iteración
Pruebas realizadas
- Pruebas funcionales con usuarios internos del cliente.
- Test de enrolamiento facial bajo distintas condiciones de luz.
- Pruebas de sincronización con el sistema de administración y dispositivos físicos.
Feedback y mejoras aplicadas
- Se ajustó el onboarding visual para mejorar el proceso de toma de fotos en el enrolamiento.
- Se hicieron mejoras visuales en el historial para destacar la diferencia entre registros por reloj y por app.
- Se ajustaron los colores para asegurar suficiente contraste en exteriores o con poca luz.
Resultados y Conclusiones
El rediseño de la app Biocheck mejoró notablemente la percepción visual y experiencia de usuario, facilitando el uso para trabajadores en campo. La app mantiene una lógica funcional simple, al mismo tiempo que transmite confianza tecnológica. Su adopción aumentó, destacando especialmente entre empresas con personal rotativo o distribuido en distintas sedes.
Además, se sentaron las bases visuales y estructurales para futuras versiones, con un sistema escalable que podrá adaptarse conforme evolucionen las funcionalidades de Biocheck.
Paso extra: Sistema administrativo
Durante el diseño del sistema administrativo y la app, se desarrollaron en conjunto herramientas específicas para centralizar el control de asistencia, vacaciones, turnos y reportes, todo pensando en facilitar al administrador el manejo de su personal. Cada módulo fue creado a medida: desde la interfaz para asignar jornadas, hasta la lógica para gestionar incidencias por sucursal.
Todo fue concebido como un ecosistema modular y escalable, que conecta de forma natural con los dispositivos biométricos y permite operar múltiples sedes desde un solo panel. Incluso la gestión de permisos, alertas automáticas y reportes descargables se integraron con foco en claridad, velocidad y cumplimiento normativo.información o promociones segmentadas por sucursales, esto ayudo en que mostrar y que no por regiones.
