Guías impresas → Aplicación Mobile Offline para 20.000 empleados
Transformación de 72 guías operativas impresas en una experiencia mobile offline-first usada diariamente en una organización global. Diseñadora única, responsabilidad end-to-end, entregado en 8 meses.
Transformar guías operativas impresas en una experiencia mobile
Una gran organización global dependía de 72 guías operativas impresas con procedimientos técnicos usados diariamente por trabajadores operativos y líderes en entornos exigentes. Las guías eran difíciles de navegar, costosas de mantener e impracticables para llevar y usar en campo.
El objetivo era transformar esta documentación en una aplicación mobile offline-first. El análisis de las 72 guías reveló una estructura consistente de 14 secciones en todas las áreas operativas, que se convirtió en la base de la arquitectura de información de la app (una decisión deliberada para preservar la familiaridad y minimizar la curva de aprendizaje en usuarios con experiencia digital limitada).
Diseñadora de producto única, responsable del diseño end-to-end. Colaboré con el Product Owner, Project Manager, equipo de ingeniería, arquitecto de sistemas y stakeholders operativos, alineando estos grupos en torno a un alcance de MVP técnicamente viable que al mismo tiempo satisfacía las necesidades de los usuarios. Esto requirió negociar compromisos, defender las necesidades de los usuarios frente a restricciones técnicas y de tiempo, y definir qué se entregaría en el primer release versus en iteraciones posteriores.
Colaboré con una investigadora en las pruebas de usabilidad. Construí el prototipo de baja fidelidad usado en las sesiones y participé directamente en los testeos, traduciendo los hallazgos en decisiones de diseño. Tres de esos hallazgos cambiaron el diseño directamente y están documentados en la sección de Decisiones clave de diseño.
El mapeo de las 72 guías operativas reveló una estructura consistente de 14 secciones en todas las áreas. Esto se convirtió en la columna vertebral de la IA y el modelo de navegación principal, preservando el modelo mental que los usuarios ya tenían de la versión impresa.
Sesiones quincenales con el PM, ingenieros y líderes operativos dieron forma a las prioridades del MVP y pusieron en evidencia restricciones técnicas tempranamente, permitiendo que las decisiones de diseño contemplaran las limitaciones del sistema antes de que se convirtieran en bloqueos.
Colaboré con una investigadora para testear prototipos de baja fidelidad con empleados operativos reales. Construí el prototipo y participé en las sesiones. Los testeos validaron el modelo de navegación y pusieron en evidencia tres hallazgos que cambiaron el diseño final directamente.
Navegación que espeja la estructura de las guías impresas
Vista de empleado, 14 secciones que espejean la estructura de la guía impresa. La navegación por acordeones permite escanear el mapa completo de contenido sin tener que desplazarse por los procedimientos.
Misma estructura, adaptada para mayor volumen de contenido
Vista de líder, misma estructura de 14 secciones con títulos de sección que agrupan los acordeones donde el volumen de contenido requería anclajes visuales adicionales. Agregado después del usability testing con usuarios líderes.
Un sistema de contenido diseñado para densidad y escaneo rápido
Cada guía soporta múltiples formatos de contenido dentro de la misma pantalla: texto introductorio, callouts destacados, listas con bullets, referencias ilustradas y secciones de detalle expandibles. La divulgación progresiva mantiene visible el panorama general mientras permite a los usuarios expandir solo lo relevante para su tarea actual.
Panorama de la guía, todas las secciones colapsadas, dando a los usuarios un mapa completo del procedimiento antes de expandir cualquier detalle.
Detalle de guía, una sección expandida mostrando el sistema de contenido completo: texto introductorio, callout destacado, lista con bullets y subcategorías, y referencia ilustrada. Las demás secciones permanecen colapsadas.
Selección de idioma en la primera pantalla. Búsqueda diseñada para post-MVP.
Selección de idioma en el splash screen, posicionada antes de que se cargue cualquier contenido para que los usuarios puedan acceder a la app en su idioma desde la primera interacción, evitando fricción en dispositivos configurados en un idioma diferente por defecto.
Búsqueda, diseñada en paralelo al MVP y planificada para el siguiente release. Incluye estado vacío, sugerencias, búsquedas recientes, resultados con etiquetas de sección de origen y corrección de errores tipográficos.
Decisiones que dieron forma al producto
72 guías, contenido denso. Los acordeones permiten a los usuarios escanear la estructura completa primero y expandir solo lo necesario. Validado en testing: búsqueda de procedimientos más rápida que navegando por niveles de pantalla.
Esto también orientó tres decisiones de interacción específicas:
- Botón de cierre al final de cada acordeón expandido, para que los usuarios no tengan que desplazarse hacia arriba para colapsarlo.
- Link de regreso en la parte superior e inferior de cada guía, volviendo a la sección abierta previamente y preservando el estado de navegación.
- Imágenes expandibles a pantalla completa para inspección de detalle en condiciones operativas.
Construida sobre la estructura que los usuarios ya conocían de las guías impresas, minimizando la curva de aprendizaje. También operativamente flexible: las guías pueden agregarse o eliminarse sin cambios estructurales en la app.
Los íconos de navegación siempre están acompañados de etiquetas de texto por la misma razón: los usuarios con experiencia mobile limitada no pueden depender únicamente del reconocimiento de íconos.
Sin ella, la app hubiera sido inaccesible para una porción significativa de usuarios desde el primer día. No era una mejora post-lanzamiento, sino un requisito central que defendí desde el inicio.
Las limitaciones del sistema descartaron la búsqueda en el primer release. La navegación de 14 secciones fue diseñada específicamente para permitir la búsqueda de procedimientos sin ella. La búsqueda completa fue diseñada en paralelo para el siguiente release.
- Los wireframes iniciales usaban una barra de tabs inferior. Los trabajadores operativos encontraron más intuitiva la ubicación superior.
- La vista de líder incorporó títulos de sección como capa de agrupación después de que el testing reveló que el volumen de procedimientos era difícil de escanear.
- Se agregó una sección de Learning & Onboarding después de que el testing evidenció usuarios que necesitaban orientación antes de acceder a los procedimientos.
Imágenes optimizadas para la confiabilidad offline, incluidas solo donde agregan valor de comprensión que el texto solo no puede proveer.
Las sombras y efectos de elevación también fueron evitados: en condiciones al aire libre con luz solar directa, se vuelven invisibles y agregan ruido visual sin valor funcional.
Pantallas anotadas — decisiones y accesibilidad
Decisiones de diseño — búsqueda y navegación anotadas. Dos pantallas anotadas con el fundamento de las decisiones UX. Campo de búsqueda anclado en el header porque los trabajadores en campo bajo presión de tiempo necesitan acceso inmediato sin navegar primero. La corrección ortográfica muestra resultados para "Equipment" cuando el usuario escribe "Rquipment", crítico para trabajadores que usan guantes o que operan en condiciones de baja visibilidad. La corrección es transparente y reversible: el sistema ayuda sin anular la intención del usuario. Los resultados muestran sección y etiqueta de rol para que los trabajadores vean de inmediato qué contenido aplica a su rol sin abrir cada resultado.
Anotaciones de accesibilidad — roles ARIA, estados y contraste. Documentación de accesibilidad para la pantalla Home Lead. El estado activo del toggle se comunica mediante relleno de color y peso tipográfico, no solo por color. Los encabezados de sección cumplen el ratio de contraste WCAG AA (4.5:1). Los estados de acordeón documentados con etiquetas ARIA para colapsado y expandido, cada fila dimensionada con un mínimo de 48x48dp para targets táctiles. El ícono decorativo del chevron está oculto para lectores de pantalla para evitar anuncios redundantes. Los links de sub-ítems anotados con rol, acción, texto de anuncio y comportamiento de gestión del foco para la navegación de regreso desde pantallas de detalle.
Entregado a tiempo. Usado todos los días.
La aplicación fue entregada en ocho meses por una sola diseñadora y desplegada a aproximadamente 20.000 empleados, convirtiéndose en la herramienta de referencia operativa estándar en toda la organización.
Las pruebas de usabilidad mostraron una reducción estimada del 15% en el tiempo para localizar procedimientos, basada en el feedback reportado por los usuarios durante las primeras interacciones con el formato digital, una mejora significativa en entornos donde la velocidad y la precisión impactan directamente en los resultados operativos. Reemplazar los manuales impresos también eliminó un costo operativo recurrente considerable para la organización.