Microjob

Pequeños trabajos pagados, cerca de casa

Microjob conecta a personas sin empleo con trabajos en su propio municipio. La alcaldía las verifica, las capacita y les paga desde un panel.

Rol: Diseño UX e interfaz
Servicio: App móvil y panel web
Equipo: Samuel Urbina
Plataforma: Móvil y web

El problema

Hay trabajo en cada barrio. Lo difícil es encontrarlo.

Armar un mueble, una mudanza pequeña, limpiar un parque: trabajos menores que nadie sabe a quién preguntar.

Un hombre armando un estante en casa, revisando la app de Microjob en su teléfono

Proceso

Cómo se hizo, paso a paso.

Cinco fases y dos validaciones antes del diseño final.

Investigación
Las reglas del programa y quién lo va a usar.
Arquitectura
Un mapa con cada sección de las dos apps. ${T.validado}
Wireframes
Cada pantalla en gris, antes de cualquier color. ${T.validado}
Diseño visual
Marca, color y pantallas finales.
Handoff
Pantallas y componentes listos para construir.

Arquitectura

Dos productos, un solo mapa.

Microjob son dos productos que comparten el mismo mapa de trabajos. La app para trabajadores le muestra a cada persona lo que hay cerca y cuánto paga; el panel municipal le muestra a la alcaldía todo el municipio: trabajos abiertos, actividad por zona e incidencias. Antes de dibujar nada, se anotó cada sección de ambos.

El mapa en la app de Microjob para trabajadores: trabajos cercanos con su pago y su urgencia

El mismo mapa en el panel municipal de Microjob: actividad por zona, total de trabajos y usuarios activos

Quién lo ve

La persona que busca trabajo

Qué ve

Trabajos cerca de ella, con el pago en el pin
Urgencia y distancia de un vistazo
Aplica desde el mapa o la lista

Secciones

Registro e inicio de sesión
Inicio
Explorar trabajos
Mis trabajos
Chat
Capacitación
Perfil

Quién lo ve

La alcaldía

Qué ve

Actividad agrupada por zona del municipio
Total de trabajos, en curso, buscando trabajadores
Incidencias abiertas y usuarios activos

Secciones

Resumen
Usuarios
Ofertas de trabajo
Capacitación
Pagos
Reportes
Ajustes e incidencias

Wireframes

Primero, en gris.

Wireframes de la app y del panel. Se revisaron y aprobaron antes de añadir cualquier color.

Wireframe de la pantalla de inicio — Inicio

Wireframe de la pantalla de explorar — Explorar

Wireframe del detalle del trabajo — Detalle del trabajo

Wireframe de mis trabajos — Mis trabajos

Wireframe del resumen del panel — Panel · resumen

Wireframe de la tabla de usuarios del panel — Panel · usuarios

Del gris al color: la misma estructura, ahora con la marca, el mapa y el estado de cada trabajo.

Pantalla de inicio, wireframe — InicioWireframe → Diseño final

Pantalla de inicio, diseño final — InicioWireframe → Diseño final

Detalle del trabajo, wireframe — Detalle del trabajoWireframe → Diseño final

Detalle del trabajo, diseño final — Detalle del trabajoWireframe → Diseño final

Mis trabajos, wireframe — Mis trabajosWireframe → Diseño final

Mis trabajos, diseño final — Mis trabajosWireframe → Diseño final

La app

Todo lo que necesita quien busca trabajo.

El mapa de Microjob en un iPhone sobre una mesa de madera, junto a unas llaves y un café — El mapa muestra lo que hay cerca y cuánto paga.

Pantalla de inicio de Microjob — **Inicio**Tu progreso del mes y la capacitación que aún te falta, justo arriba.

Pantalla de explorar con trabajos cercanos — **Explorar**Trabajos cerca de ti, con el pago y la distancia a la vista.

Pantalla de mis trabajos con el estado de cada uno — **Mis trabajos**Cada trabajo con su estado: activo, pendiente o terminado.

Detalle del trabajo con pago y descripción

Perfil del trabajador con valoraciones y habilidades

El panel

Usuarios, ofertas, capacitación y dinero, en un solo lugar.

Resumen del panel con KPIs, mapa de actividad y gráficos — Panel final

Tabla de capacitación con asistencia — Capacitación obligatoria y asistencia

Tabla de usuarios con valoraciones y estado — Usuarios verificados

Registro, paso 1 de 4: datos personales — Registro en cuatro pasos: la alcaldía inscribe a la persona…

Registro, paso 4 de 4: el código de activación — …y la app se activa con un código de un solo uso.

Marca

Un logo que se lee de lejos.

Un isotipo redondo y letras en minúscula: amable y fácil de leer incluso en una pantalla pequeña.

Verde#00B37CAcciones y estados
Petróleo#033744Marca
Menta#51EBC2Marca
Negro#171717Texto
Gris#5C5C5CTexto secundario
Rojo#FB3748Urgente

Inter, verde y mucho aire.

Titulares: Ayuda con mudanza pequeña
Texto: Publicado hace 2 h, a 0,8 km de ti
Botones y cifras: Aplicar · 35 €

Componentes

Las piezas que se repiten.

La tarjeta de trabajo, el aviso de capacitación obligatoria y el menú inferior aparecen en casi todas las pantallas, así que se diseñaron una sola vez como componentes.