Structure before polishEstructura antes que acabado
Low-fidelity wireframesWireframes de baja fidelidad
The five connected mobile screens as grayscale structural layouts — the bridge between the initial sketches and the high-fidelity design. Colored tags map each screen to its stage; numbered notes tie decisions to the brief's three barriers.Las cinco pantallas moviles conectadas como diseños estructurales en gris — el puente entre los bocetos iniciales y el diseño de alta fidelidad. Las etiquetas de color asignan cada pantalla a su etapa; las notas numeradas ligan las decisiones a las tres barreras del brief.
1 Onboarding1 Bienvenida→
2 Skills2 Habilidades→
3 Recommendations3 Recomendaciones→
4 Pathway4 Ruta→
5 Dashboard5 Panel
Five connected screensCinco pantallas conectadas
Grayscale · annotatedGris · anotado
Why grayscale? Low-fi wireframes strip color and polish so review stays on structure, hierarchy, and flow. The colored tag on each frame marks which of the four stages — discover, learn, demonstrate, connect — that screen serves. Numbered notes tie each decision to the brief's three barriers: information, access, and trust.
Por que gris? Los wireframes de baja fidelidad quitan color y acabado para centrar la revision en estructura, jerarquia y flujo. La etiqueta de color en cada pantalla indica cual de las cuatro etapas — descubrir, aprender, demostrar, conectar — atiende. Las notas numeradas ligan cada decision a las tres barreras del brief: informacion, acceso y confianza.
DiscoverDescubrir1 · Onboarding1 · BienvenidaGoals, context & access needsMetas, contexto y accesibilidad
9:41▮▮▮ ◔ 87%
◇ Opportunity Bridge · low-data mode ●◇ Opportunity Bridge · modo bajos datos ●
Illustration: a bridge from "skills" to "work"Ilustracion: un puente de "habilidades" a "empleo"
Tell us a little about youCuentanos un poco de ti
Goal ▾ find a first jobMeta ▾ primer empleo
Location ▾ your cityUbicacion ▾ tu ciudad
Education ▾Educacion ▾
Language ▾Idioma ▾
☑ Accessibility needs (optional)☑ Accesibilidad (opcional)
Get startedComenzar
We only ask what we need. You control your data.Solo pedimos lo necesario. Tu controlas tus datos.
- Value promise + trust cue ("low-data mode") sit above the fold.Promesa de valor y confianza ("bajos datos") arriba del pliegue.
- Only 6 lightweight inputs; accessibility is opt-in, never a barrier (Access).Solo 6 campos ligeros; accesibilidad opcional, nunca una barrera (Acceso).
- Explicit, plain data-use note meets "minimal, explained data" (Trust).Nota clara de uso de datos cumple "datos minimos y explicados" (Confianza).
DiscoverDescubrir2 · Skills & interests2 · Habilidades e interesesPlain-language, no résuméLenguaje simple, sin CV
9:42▮▮▮ ◔ 87%
Which do you enjoy doing?Que disfrutas hacer?
Pick any that feel like youElige las que van contigo
✓ Helping peopleAyudar
Fixing thingsReparar
✓ BuildingConstruir
NumbersNumeros
ComputersComputadoras
OrganizingOrganizar
Illustration cue per question (visual, low text)Ilustracion por pregunta (visual, poco texto)
No résumé needed — answer in your own words.Sin CV — responde con tus palabras.
- Persistent "3/8" progress bar sets expectations and reduces drop-off.Barra "3/8" fija expectativas y reduce abandono.
- Multi-select chips = one-tap answers, friendly on small screens (Access).Chips multiseleccion = respuestas de un toque (Acceso).
- "No résumé needed" answers the low-experience audience insight directly."Sin CV" responde directo a la audiencia con poca experiencia.
DiscoverDescubrir3 · Career recommendations3 · RecomendacionesFit + local demandAfinidad + demanda local
9:44▮▮▮ ◔ 86%
Based on your skills and demand near youSegun tus habilidades y la demanda cerca de ti
◆ In demandDemanda◷ 2 mo
See pathway →Ver ruta →
◆ In demandDemanda◷ 3 mo
See pathway →Ver ruta →
◷ 6 wkRemote okRemoto
See pathway →Ver ruta →
Not sure? Retake the quick assessmentDudas? Repite la evaluacion
- Match % + "in demand" tag pair ability with real local opportunity (Information).% de afinidad + etiqueta "demanda" unen habilidad y oportunidad (Informacion).
- Time-to-job-ready on every card keeps expectations honest.Tiempo para estar listo en cada tarjeta mantiene expectativas honestas.
- A safe "retake" exit prevents dead-ends for undecided users.Salida "repetir" evita callejones sin salida.
LearnAprender4 · Career pathway4 · Ruta profesionalSkills · training · cost · jobsHabilidades · formacion · costo · empleos
9:46▮▮▮ ◔ 86%
✓ VerifiedVerificado◷ ~3 mo$ 0–120
⚠ Not a job guarantee — a realistic path⚠ No garantiza empleo — un camino realista
✓ Skills you already have✓ Habilidades que ya tienes
TeamworkTrabajo en equipoHands-onManual
◔ Skills to develop◔ Habilidades a desarrollar
FreeGratis2 wk✓ EligibleElegible
$403 wk✓ VerifiedVerificado
▤ Entry-level jobs after▤ Empleos de entrada
3 verified openings nearby3 vacantes verificadas cerca
Add to my planAgregar a mi plan
- Time / cost / eligibility exposed up top — the transparency reason-to-believe.Tiempo / costo / elegibilidad arriba — la transparencia como razon para creer.
- Honest "not a guarantee" line meets the constraint without killing momentum.Linea honesta "no garantiza" cumple la restriccion sin frenar el impulso.
- "Have / develop / jobs" split turns a complex system into three clear stages.Division "tienes / desarrollar / empleos" convierte el sistema en tres etapas.
DemonstrateDemostrar ConnectConectar5 · Opportunity dashboard5 · Panel de oportunidadesTrack · document · applySeguir · documentar · postular
9:50▮▮▮ ◔ 85%
Your progress to job-readyTu progreso
62% · 2 of 3 steps62% · 2 de 3 pasos
◔ Training in progress (Learn)◔ Formacion en curso (Aprender)
✓ Skills profile (Demonstrate)✓ Perfil de habilidades (Demostrar)
✓ SafetySeguridad✓ ServiceServicio
▤ Saved opportunities (Connect)▤ Oportunidades (Conectar)
- One progress bar makes the whole journey visible — the core value prop.Una barra hace visible todo el trayecto — la propuesta central.
- Completed skills form a skills-based profile for users without work history.Las habilidades completadas forman un perfil basado en habilidades.
- Saved verified openings link straight to application — the Connect stage.Vacantes verificadas guardadas enlazan a la postulacion — etapa Conectar.