Toda la jornada en una pantalla

Una plantilla repartida entre cuatro sistemas

GAME tiene dos poblaciones que trabajan de forma muy distinta y compartían las mismas herramientas: la gente de tienda, que ficha de pie y consulta cosas en treinta segundos entre cliente y cliente, y la gente de central, sentada delante de un monitor toda la jornada.

Lo que necesitaban saber estaba repartido: las horas en un sitio, las vacaciones en otro, los comunicados en el correo y el organigrama en un PDF que nadie encontraba. Y por encima, los coordinadores no tenían ninguna vista de equipo: para saber quién estaba de baja, quién teletrabajando y quién en tienda había que preguntar.

El encargo llegó de Dirección y Recursos Humanos, con Sistemas mirando desde el principio para acotar lo que se podía integrar.

Primero el sistema, y después las pantallas

Con 156 pantallas por delante y tres productos que tenían que parecer el mismo, lo primero no fue dibujar una pantalla: fue fijar los fundamentos. Color, tipografía, botones, iconos y componentes, cada uno con sus variantes y sus estados, antes de que ninguna vista se diera por buena.

La consecuencia práctica es que una pantalla nueva no era una decisión de diseño, era un ensamblaje. Y cuando llegó la maquetación, lo que había que traducir a código no eran 156 dibujos sino un puñado de piezas.

Un panel que se lee de un vistazo

La vista principal ordena la pantalla por urgencia, no por departamento: primero lo de hoy — la jornada en curso y el estado del equipo — y después lo del mes: tickets, vacaciones e incidencias.

Los bloques se separan con superficies blandas y sombras suaves en lugar de con líneas y cajas. En una pantalla tan llena de datos el contorno cansa, y el relieve deja que la vista salte de bloque a bloque sin tener que leerlos todos.

Fichar de pie, en treinta segundos

La app no es el panel encogido. La gente de tienda entra a hacer una cosa concreta y a salir, así que el fichaje sube a lo primero que se ve y lo demás se ordena en una lista debajo.

La pantalla de fichaje reparte la jornada en seis botones grandes — inicio y fin de jornada, entrada y salida de tienda, inicio y fin de comida — con la hora ya marcada debajo de cada uno. Y como hay quien cubre turnos en varias tiendas, elegir tienda es un paso del propio fichaje, no un ajuste escondido en el perfil.

Una red social que no sale de la empresa

Este apartado lo pidió Recursos Humanos y se diseñó entero desde cero: una plataforma de redes sociales que funciona dentro de la empresa, para que cualquier empleado pueda publicar sin pasar por un boletín ni por un correo de departamento.

Lo que la hace una herramienta de empresa y no una copia de Instagram es el alcance de cada publicación: se elige si va para todo GAME, sólo para GAME Central o sólo para GAME Tiendas. Es un único control, y es el que evita que una nota interna de central llegue como ruido a 230 tiendas.

Se pudo usar antes de existir

Lo que se ve en los dos vídeos no es la web maquetada: es el prototipo de Figma. Las pantallas están conectadas en el área de prototipo con sus interacciones montadas, de modo que al darle a play se navega el diseño como si fuera una aplicación funcionando.

Eso permitió dos cosas. La primera, testar con seis compañeros antes de escribir una línea de código: ver si el fichaje se entendía sin explicarlo, si la vista de equipo se encontraba, y corregir lo que no funcionaba mientras corregir todavía era mover una capa.

La segunda, enseñar. Grabé estos dos vídeos para presentar a Dirección, a Recursos Humanos y a parte del Departamento de Sistemas cómo tenía que comportarse GAME Staff — el empleado fichando, el coordinador revisando quién está de baja, quién teletrabaja y quién está en tienda, y las peticiones de vacaciones pasando por su aprobación.

Y después la maqueté yo

El proyecto no terminó en la entrega del Figma: hice también toda la maquetación frontend de la aplicación. Las 156 pantallas que había diseñado las llevé yo misma a código.

Diseñar y maquetar lo mismo cambia las dos mitades del trabajo. Por un lado desaparece el traspaso: no hay una entrega que interpretar, ni un ida y vuelta para averiguar cuánto mide ese hueco o de qué color va ese borde en hover, porque las dos decisiones las toma la misma persona.

Por otro, y esto importa más, el sistema deja de ser un documento y se convierte en la estructura del código. Los tres magentas, las dos escalas de neutro y los cuatro estados no se copiaron pantalla a pantalla: entraron una vez y de ahí salió todo lo demás. Es la razón de que el tablero de botones cubriera la matriz completa desde el principio — cuando quien va a maquetar sabe que va a ser ella, escribir el estado deshabilitado en oscuro deja de ser celo y pasa a ser previsión.

Mil personas, una sola aplicación

Lo usa la compañía entera: central — dirección y empleados —, logística, los coordinadores que rotan entre tiendas y el personal de unas 230 tiendas de dos o tres personas cada una. En total, unas mil personas de plantilla.

Antes de escribir una línea de código entrevisté a RRHH y a Dirección, y seis compañeros probaron el prototipo navegable; de lo que falló salieron cambios concretos. Y el fichaje, las vacaciones y las bajas dejaron de vivir en sistemas separados.