AUJ BackOffice
Un backoffice para conectar desarrolladores junior con su primer trabajo real, presentado ante midudev y mouredev.
2024
Período
Product Designer
Rol
El Problema
A medida que Adopta un Junior escaló, los coordinadores gestionaban asignaciones entre decenas de empresas y cientos de juniors usando planillas y seguimiento manual. La carga operativa estaba frenando el programa: se necesitaba un backoffice específico, denso en datos pero rápido de usar.
El Desafío
El desafío central fue diseñar una herramienta de backoffice densa que los coordinadores pudieran usar rápidamente: cruzando juniors, empresas y proyectos abiertos sin perderse en los datos. Partir de un mapa del sitio completo me permitió definir la jerarquía de información antes de tocar cualquier UI. El resultado fue un sistema donde cada vista tiene un propósito claro y las acciones más frecuentes siempre están al alcance, sin simplificar en exceso el modelo de datos.
Objetivos
Centralizar la visibilidad de juniors
Construir una vista clara y escaneable de todos los juniors disponibles con sus perfiles, habilidades, estado de disponibilidad y criterios de matching, dándole a los coordinadores acceso inmediato a la información necesaria para tomar decisiones.
Gestionar la disponibilidad de proyectos
Hacer seguimiento de las vacantes disponibles en las empresas participantes, sus requisitos y el estado de cada oportunidad, para que los coordinadores siempre sepan dónde hay lugar para una nueva asignación.
Agilizar la asignación y el seguimiento
Diseñar un flujo eficiente para asignar juniors a proyectos y hacer seguimiento de su progreso, reduciendo la carga manual de gestionar colocaciones en múltiples empresas y cohortes.
Contexto
Adopta un Junior es una iniciativa española en crecimiento que ayuda a desarrolladores junior a conseguir su primer trabajo en IT conectándolos con empresas dispuestas a acompañarlos. A medida que el programa escaló, los coordinadores necesitaban una herramienta dedicada para gestionar el proceso de matching de forma eficiente, reemplazando el seguimiento manual por un backoffice específico. Fui responsable del diseño completo: desde la arquitectura de información y el mapa del sitio hasta los flujos de usuario, el sistema de componentes y el handoff final.
Mi Rol y Enfoque
Mi alcance cubrió el proceso de diseño completo, desde la arquitectura de información hasta el handoff. Empecé con un mapa del sitio completo antes de tocar ninguna UI, después definí todas las relaciones de entidades (juniors, empresas, proyectos, asignaciones) y diseñé todos los flujos del coordinador. Construí el sistema de componentes completo en Figma y presenté la plataforma ante los líderes del programa y la comunidad dev de habla hispana.
Proceso
01. Brief y discovery
Se mapeó la estructura del programa Adopta un Junior: la relación entre juniors, empresas y coordinadores, y el proceso manual que se iba a reemplazar. Entender los flujos de coordinación fue el prerequisito antes de cualquier decisión de diseño.
"Empezar con el mapa del sitio, no con la UI, era el diseño. La arquitectura de información tenía que estar bien antes de que cualquier pantalla tuviera sentido."
02. Mapa del sitio
Se definió la arquitectura de información completa antes de tocar ninguna UI. Se mapearon las entidades (juniors, empresas, proyectos, asignaciones) y sus relaciones para establecer una jerarquía clara: la base que hizo el resto del diseño sistemático.
"Cada entidad del sistema necesitaba su propia definición clara antes de que la UI pudiera reflejarla."
03. Diseño de flujos de usuario
Se diseñaron los flujos del coordinador: explorar juniors disponibles → revisar perfiles → encontrar un proyecto compatible → asignar → hacer seguimiento. Cada flujo se optimizó para velocidad y mínimos clicks en las tareas más frecuentes.
"Las tareas del coordinador son repetitivas: explorar → evaluar → emparejar → asignar. Cada flujo se optimizó para esa secuencia específica, no para la novedad."
04. Diseño de componentes y UI
Se construyó un sistema de backoffice denso y escaneable en Figma: tablas, tarjetas de perfil, indicadores de estado y modales de asignación, todo diseñado para que los coordinadores procesen múltiples juniors sin perder contexto.
"Un backoffice denso en datos que frena a los usuarios destruye su propio propósito. La escaneabilidad fue la restricción de diseño principal, no el pulido visual."
05. Handoff y presentación
Se preparó el archivo Figma completo para el desarrollo en React y se presentó la plataforma ante los líderes del programa y referentes de la comunidad de desarrolladores de habla hispana, incluyendo a midudev y mouredev.
"El handoff de Figma necesitaba anticipar la estructura de componentes en React: un archivo mal organizado es una oportunidad perdida para reducir las suposiciones del desarrollador."
Resultado
La plataforma se lanzó en 3 meses, y fue más allá: se presentó ante referentes de la comunidad de habla hispana, incluyendo a midudev y mouredev, dos de los creadores de contenido de tecnología más influyentes de España y América Latina. Su reconocimiento validó el enfoque de diseño y el impacto social de la iniciativa.
Herramientas
