AI-powered career discovery platform that translates real-world experience into careers students never knew existed.
Most college students graduate knowing fewer than eight career paths. Not because they lack ability — because the infrastructure around them was never built to show them more. LinkedIn rewards volume over fit. Career services recycles the same five safe roles it recommended a decade ago. Personality tests hand out a four-letter label and a shrug. The gap between what a student can do and what they know they can do isn't a motivation problem. It's an information problem.
CraftRole answers the question none of those tools address: given your actual skills, your real experience, and your actual constraints — where do you belong? It's an AI-powered assessment platform that translates experience — including the jobs students are told to leave off their resumes — into transferable skills, then maps them to careers that fit. Not the nearest available job. The right direction.
This project started with a leadership problem before it was a design problem. Directing a cross-disciplinary team across three domains — systems engineering, business strategy, and art direction — with no shared design vocabulary meant that my first job wasn't to open Figma. It was to build a translation layer between people who reasoned in completely different languages. The product is the output. The leadership is the story.
"Your major doesn't define you. We ask this to understand your starting point, not to limit the unconventional paths we might suggest later."
— CraftRole assessment copy, Step 1CraftRole was built by a small cross-disciplinary team combining systems engineering, UX design, art direction, and audio-visual production.
My job wasn't to design in isolation. It was to direct — extract usable input from people who don't speak design, translate it into decisions, and own the outcome. Three contributors shaped this product in ways that are visible in the final system.
Contribution: Stress-tested the matching engine logic for edge cases; flagged where the assessment flow made structural assumptions — around location, salary, and remote options — that wouldn't hold at scale.
Used Mike's systems thinking to pressure-test the 5-step flow against failure states before a single screen was built.
Contribution: Critiqued design direction against established visual language principles; held the system to a craft-level standard — type rhythm, spatial tension, and visual hierarchy — that Frank could measure against.
Translated Sahil's critiques into token decisions — building a shared visual language before critiques began so feedback could be specific, not subjective.
Contribution: Architected the question logic behind the 5-step assessment from a business strategy lens; defined what the matching engine needed to know to produce defensible career recommendations.
Translated Henry's MBA-level question architecture into a UX flow that felt like a conversation, not a form.
Before designing a single screen, I mapped the complete information architecture across four major surfaces — marketing, assessment, core app, and feedback. This gave every design decision a structural home and prevented scope from expanding without intention.
Students aren't struggling because of effort or lack of resources. They're struggling because the infrastructure around career discovery was built for a different era. Each tool fails in a distinct way — but the result is the same: she still doesn't know where she belongs.
CraftRole fills this gap — by starting with what students already have and showing them what it's actually worth.
Mapping the emotional arc of a student navigating a broken system.
"6 months left. What do I do?"
"5,000 applicants. I don't stand a chance."
"You should try social work."
"You're an INFJ — now what?"
"867 jobs listed. Which one fits me?"
"I don't know where I belong."
Intervene at step 1 — before Jordan reaches the advisor. Give her a system that reframes her experience as an asset and surfaces careers she'd never consider otherwise.
Four themes emerged consistently across research, each driving a specific design decision.
Students can name 6–8 careers maximum. The problem isn't access to information — it's a systemic inability to imagine what's possible.
→ Design response: Career discovery grid with unexplored role recommendations
Students are actively coached to hide unconventional work. Bartending, retail, gaming — devalued by every system they've encountered.
→ Design response: Micro-translation pattern fires on first interaction
Students under financial pressure can't lead with passion. $40K debt makes salary, location, and schedule the first filter — not the last.
→ Design response: Needs assessment (Step 3) comes before personality (Step 5)
Universities already budget for career infrastructure that isn't working. They're the buyer — Jordan is the user. This solves distribution cleanly.
→ Design response: Institutional license model, namespaced routes per university
14 graduating design students from Graphic Design, Architecture, Industrial Design, and Interior Design programs completed CraftRole during the Spring 2026 demo and provided structured feedback across usability, tone, clarity, and relevance. Their responses gave directional validation — not proof of scale, but signal that the design was oriented correctly. A staff-level research program would look different — longitudinal tracking across cohorts, controlled comparison with matched peers at other institutions, and data-sharing agreements at the university level. The 14-student survey was a signal, not a proof. It told us we were in the right direction — not that we'd arrived.
"It helps bridge the gaps between me and jobs I didn't know would be good for me, which opens up so many options."
"This program was quick, easy to navigate, and asked very important questions I had not been asked before!"
"It helps clear the fog regarding what jobs are actually out there and what career paths I could look into pursuing once I finish my degree."
"Including salary and work-life balance was a great addition to the usual job/personality tests. I also like that the recommended jobs aren't huge umbrella roles."
Multiple students noted the 4-archetype system felt constraining — "like being boxed into only 4 ways of thinking." This directly drove a roadmap priority to expand archetype granularity and add an explicit "what I don't want to do" exclusion filter in the next assessment revision. Real feedback. Real product decision.
CraftRole serves three possible audiences — high school students, college students, and mid-career adults. The first strategic decision I made was to design for exactly one. College students approaching graduation face the most urgent cliff. They've already made the investment, they're on a deadline, and the gap between what they know and what they need to know is widest right now.
The first design decision was a sequencing decision: build the design system before building any screens. With 82 components planned across five product surfaces, designing without a token foundation first would create compounding inconsistency that compounds with every new screen. The investment came first — and paid back within two weeks.
How Jordan moves through the full product, with decision points and system responses mapped.
Every interactive component was designed across all possible states before a single line of code was written.
Every step is designed with a specific intent that earns the next one.
The moment a student selects an experience, the platform immediately reframes it as professional competencies — before they can dismiss it themselves.
A psychology major who's been bartending is told to bury that experience. CraftRole surfaces the professional skills embedded in it — immediately, visibly, and specifically.
Built on a full token architecture before a single screen was designed. The system absorbed scope changes without rework — when industry tags were added mid-build, the color tokens already had the slots.
The 82-component system wasn't just built for Frank to use — it was built so Sahil could critique against a shared visual language and Mike could understand component boundaries without a design background. Token naming conventions follow a semantic-not-descriptive rule (color-primary-600 not blue-600) so any team member could reason about changes without needing Figma access. Component boundaries were documented with the explicit assumption that someone without a design background would need to extend them — because they would.
After five steps of assessment, the product delivers on its promise. Match scores, alignment reasoning, strength-first gap analysis, and a dashboard that grows with the user.
Strength-first framing — skills you have before skills to develop
Every screen started as a structural problem before it became a visual one. The progression below shows how four key surfaces evolved from lo-fi sketches through mid-fidelity layouts to the final UI — each stage driven by a specific design question that needed answering before moving forward.
Design Q: Does the 3-column value prop section communicate enough before the CTA?
Learning: "Find your path forward" was too generic. Tested two variants — students responded to specificity over inspiration.
Final decision: Lead with specificity — "fit into work" tests better than "path forward" because it names the actual student anxiety.
Design Q: How do we make selecting "Food Service" feel meaningful, not just a checkbox?
Learning: Plain text translation felt clinical. Needed to feel like a reveal — something earned, not just displayed.
Final decision: Translation styled as a reveal with blue accent box — feels earned, not administrative. Fires on chip selection, not on page load.
Design Q: Does a list or a grid better communicate that these are distinct career paths, not just job listings?
Learning: Cards tested better than list. But a number alone (98%) meant nothing without "why." Added alignment reasoning in next pass.
Final decision: Every match shows industry tag, archetype alignment, and a one-line reason. The number alone never ships without the "why."
Design Q: What should Jordan see first — her profile, her next action, or her recommendations?
Learning: Two-column grid for profile + goal worked. But career recs needed to lead — that's the primary reason Jordan returns to the dashboard.
Final decision: Dark profile card anchors identity. Career recs are the primary content above the fold. Goal card adds return motivation.
Every surface went through multiple rounds of iteration. The product evolved from functional scaffolding to a polished, emotionally resonant experience — driven by three core principles: reframe experience as an asset, lead with needs before passion, and make every interaction feel earned.
Why this changed: Users in V1 selected an experience and got no feedback. They had no idea what it meant to the system — and it confirmed their belief that bartending wasn't relevant. The micro-translation fires immediately on selection, before the user can dismiss their own experience.
Why this changed: "Minimum 3 required" names a rule. "Select 1 more" names an action — and pairs it with a progress counter that shows momentum. The amber tone signals guidance, not failure. One word change, meaningfully different experience.
Why this changed: V1 was a directory. V2 is a match system. Every card now answers: "Why this career for me?" The match percentage, archetype tag, and alignment reasoning are all calculated from the user's actual assessment data — not generic copy.
Why this changed: Copy is design. V1 headers described the action. V2 headers carry the emotional intent of each step — validating, grounding, empowering. The tone shifts with the user's state across the flow, and that shifting is as deliberate as the color choices.
82 production components across 5 surfaces. Zero dedicated engineers. The constraint forced a decision: treat AI-assisted development as a design tool, not a shortcut — using prompt-based coding to compress delivery from weeks to days while keeping design judgment, not velocity, as the rate limiter.
Career tools fail in two directions: emotionally resonant but impractical (personality tests), or practically useful but emotionally cold (job boards). CraftRole had to do both — specific enough to trust, human enough to complete. Copy became a first-class design material, not a final-pass fill-in.
The assessment flow, archetype reveal, and dashboard had to carry the product's promise before the matching algorithm behind them was fully built. The design challenge wasn't polish — it was sequencing: building the surfaces that made the system feel credible before every decision they implied had been made.
Leadership isn't visible in a Figma file. It shows up in the moments where outside input changed a decision — and where the designer had to make the call. These three moments are the ones that shaped CraftRole most visibly.
Frank had designed a 3-step assessment (context, skills, match) — shorter, faster, lower dropout.
Mike flagged that without a needs/constraints step, the matching engine would produce high-scoring matches Jordan couldn't actually take — wrong location, wrong salary, no remote option.
Frank added Steps 3 and 4 — extending the assessment by 40% — because a fast assessment with wrong output is worse than a slower one that's right.
The needs/constraints layer became a core differentiator vs. personality tests, and is cited by students as the reason CraftRole felt different.
Frank had designed the archetype reveal as a simple card with a color and label.
Sahil's critique: "There's no visual hierarchy — every archetype looks equally important. The reveal should feel earned."
Frank added a full-screen reveal moment with an animated header, a 3-sentence archetype description, and a match confidence indicator — treating the reveal as a product moment, not a step output.
The archetype reveal became the most-mentioned feature in student feedback: "I didn't expect it to feel so personal."
Frank's original framing of the matching engine was skills-to-career: collect skills, find matching jobs.
Henry surfaced a different question: "The problem isn't matching skills to jobs. It's that students don't know which skills they have. The assessment has to excavate, not just collect."
Frank reframed the entire assessment from a data-collection flow to an excavation flow — the Micro-Translation pattern (immediate skill reframe on selection) came directly from this insight.
The micro-translation became the most distinctive UX feature in the product — the specific moment that shifts a student's self-perception before they've finished Step 1.
Every product is a series of bets. These are the four that shaped CraftRole most directly — each one a real fork in the road, not a foregone conclusion.
Added a needs/constraints step after Mike flagged that without it, the matching engine would surface high-scoring roles the user couldn't actually take — wrong location, wrong salary, no remote option.
A shorter, faster flow. The 5-step path is 40% longer than the original design. Completion rate risk was real — shorter assessments have higher finish rates.
A fast assessment with wrong output is worse than a slower one that's right. The needs layer became a core product differentiator — the specific thing students said made CraftRole feel different from every test they'd taken before.
Sahil's critique of the original card: "There's no visual hierarchy — the reveal should feel earned." Redesigned into a full-screen reveal with an animated header, archetype description, and match confidence indicator.
Simplicity. The original card was one component. The reveal became a full page with animation logic. More surface area to maintain, more complexity in the state machine.
The archetype reveal became the most-mentioned feature in student feedback. "I didn't expect it to feel so personal." That reaction is the product working — it only happens if the reveal is treated as a moment, not a data output.
Henry reframed the core problem: "Students don't know which skills they have. The assessment has to excavate, not just collect." Redesigned the entire flow from a data-collection form to an excavation experience.
Speed of development. The micro-translation pattern — immediate skill reframe on each experience selection — required a new component, new copy, and new logic for every category. It nearly didn't ship.
The micro-translation is the most distinctive UX feature in the product — the specific moment that shifts a student's self-perception before they've finished Step 1. It only exists because Henry asked a better question than the one I started with.
Instead of selling to students directly ($20/mo competing with Netflix), CraftRole targets career services budgets at the institutional level — a $20K/yr university license that reaches an entire graduating cohort at once.
Direct user relationships and faster iteration feedback. Institutional sales cycles are long. There's no viral growth loop when the buyer isn't the user.
Design program career services already have the budget, the mandate, and the graduating cohort. The institutional model reaches more students, faster, with less friction than convincing individuals to pay for another app. It also aligns incentives: the university wants outcomes for graduates, not just logins.
14 graduating design students completed the full 5-step assessment at Kean University's Spring 2026 curriculum showcase. The headline number — 4.6/5 usability — understates what actually happened: students described discovering career paths they'd earned but never named. That's the outcome the product was built for. The implementation stats below are proof of craft, not proof of impact.
"I didn't expect it to feel so personal. It named something I'd been doing for three years but didn't have a word for."
— Kean University graduating design student, Spring 2026
The 4.6/5 usability score measures whether students could complete the flow. It doesn't capture the moment in Step 1 when a student sees their barista job translated into "customer-empathy and constraint navigation" — and realizes that's a real skill. That's the product working.
The token architecture paid back every hour invested within two weeks. More importantly, it let Sahil critique against a shared visual language and Mike understand component boundaries without a design background. Shared vocabulary before shared work — that's what made cross-disciplinary critique actually useful.
Using Claude to translate design intent into production code changed what's possible solo. The constraint became design judgment — exactly where a senior designer's time should go.
"Your major doesn't define you. We ask this to understand your starting point, not to limit where we might send you." That's a UX decision — one that changed how students entered the assessment. Writing copy last would have made the product feel like a form. Writing it first made it feel like a conversation.
Spending time building shared vocabulary with Mike, Sahil, and Henry before opening Figma paid off in the quality of their input. Cross-disciplinary critique only works if everyone has something concrete to react to — and that means establishing constraints before asking for feedback.
The university survey (14 students, 4.6/5 usability) confirmed students found value — but a moderated session would have uncovered how they used it. The 4-archetype constraint only surfaced in open-ended text; task-based testing would have caught it earlier.
The matching algorithm is the product's core value. Building the dashboard before completing the engine meant the most impressive surface existed before the system behind it was real.
What does success look like for Jordan — completion rate, jobs applied to, return visits? Defining those metrics at kickoff and instrumenting them from day one would make the case study more defensible. Without them, the survey becomes the only signal — and a 14-student sample can confirm direction but not scale.
Dynamic Claude-powered skill extraction replaces static micro-translations for any experience input
6-dimension scoring algorithm weighted by user priority ranking replaces placeholder results
Supabase persistence, assessment data across sessions, career library expands to 100+ roles
Persistent platform tracking career progression, financial milestones, skill development over time
Architecture. Graphic Design. Industrial Design. Interior Design. Four programs, one shared problem: graduating into a fragmented market with no tool built for how designers actually think about their work.
Spatial reasoning, systems thinking, project coordination — skills that transfer far beyond built structures.
Visual communication, brand identity, typography systems — a degree that maps to more career paths than any job board suggests.
Human-centered product thinking, materials knowledge, manufacturing constraints — a foundation for roles that don't even have "designer" in the title.
Client negotiation, spatial experience, environmental psychology — skills that cross into healthcare, hospitality, UX, and beyond.
60 students complete a 5-step assessment built around the work they've already done — not the job titles they're hoping to land. CraftRole surfaces career paths they've earned but never named.
Design graduates don't need another personality test. They need a tool that speaks the language of craft — one that understands what studio work, client critiques, and thesis projects actually taught them.
This demo is proof of concept for a $20K/yr institutional license model — deploying to design programs that already have the budget, the mandate, and the graduating cohort that needs this most.
Final QA pass on the 6-dimension scoring algorithm. Edge-case testing for design-specific career paths — roles that don't appear in generic job board taxonomies.
University namespace provisioned. Student cohort data configured. Assessment tailored to design program context — not generic college student defaults.
Structured feedback collection begins same day. Post-launch synthesis feeds directly into the next institutional pitch — a second university by Fall 2026.
"Your major doesn't define you. We ask this to understand your starting point, not to limit the unconventional paths we might suggest later."