Live · University Spring 2026

CraftRole

AI-powered career discovery platform that translates real-world experience into careers students never knew existed.

Year
2025–Present
Role
Lead UX Designer & Architect
Type
Product · Systems · AI
Team
Cross-disciplinary · 4 contributors
End-to-end UX Strategy 82-Component Design System 5-Step Assessment Flow AI Interaction Design WCAG AA Accessibility Prompt-Based Engineering
Introduction

The question no career tool actually answers

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 1
Live Product
CraftRole
AI-Powered Career Discovery Platform
Year
2025–Present
Role
Lead UX Designer & Architect
Stack
Next.js · React · Claude AI
Contributions
End-to-end UX Strategy 5-Step Assessment Design 82-Component Design System AI Interaction Design WCAG AA Accessibility
Project overview — CraftRole, Lead UX Designer & Product Architect
The Team

Meet the people behind CraftRole

CraftRole was built by a small cross-disciplinary team combining systems engineering, UX design, art direction, and audio-visual production.

Frank Mellana
Frank Mellana III
Senior UX Designer

Specializes in end-to-end product experience — from zero-to-one UX strategy and information architecture through design systems, interaction design, and AI-integrated workflows. Led all research, wireframing, prototyping, and user validation for CraftRole.

Mike Sweatt
Mike Sweatt
Senior Systems Engineer

Architected the technical foundation powering CraftRole's assessment engine, system infrastructure, and data pipelines. Brought deep systems engineering expertise to ensure the platform could scale from demo to a fully deployed institutional product.

Sahil Patel
Sahil Patel
Senior Art Director

Guided visual direction and design strategy across every product surface, bringing senior creative leadership to CraftRole's brand identity, typography, and visual language. Ensured the product communicated credibility and warmth to a student audience navigating high-stakes career decisions.

Henry Stankiewicz
Henry Stankiewicz
Senior Creative Technologist

Shaped CraftRole's product narrative, drove the assessment analytics framework, and defined the business metrics that measure real student outcomes. His academic background kept the platform grounded in the lived reality of students navigating an uncertain job market.

The Team

Directing across three disciplines

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.

⚙️
Mike
Senior Propulsion Engineer
Systems & Architecture Feasibility

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.

My Integration

Used Mike's systems thinking to pressure-test the 5-step flow against failure states before a single screen was built.

🎨
Sahil
Senior Art Director & Professor
Visual Design Review & Critique

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.

My Integration

Translated Sahil's critiques into token decisions — building a shared visual language before critiques began so feedback could be specific, not subjective.

📊
Henry
AV Professor & MBA
Business Strategy & Matching Engine

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.

My Integration

Translated Henry's MBA-level question architecture into a UX flow that felt like a conversation, not a form.

Information Architecture

Mapping the full product structure

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.

Site Map

CraftRole — Product Architecture

craftrole.com (marketing) (assessment) (app) 🔒 /feedback Landing Page Value Props Email Capture Step 1 Context Step 2 Skills Step 3 Needs Step 4 Priority Step 5 Persona Reveal Dash board Careers Grid Career Detail Skills Trans. User Feedback
Root / Entry
Marketing (public)
Assessment (public)
App (auth required 🔒)
Coming soon
The Problem

Every existing tool fails Jordan

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.

💼
LinkedIn
Volume over fit

5,000 applicants per posting. No signal for fit. Rewards those who already know what they want — and punishes those who don't.

🏫
Career Services
Stuck in 2005

Polish your resume. Attend the fair. Apply and hope. The advice loop hasn't changed in decades — and the outcomes confirm it.

🧠
Personality Tests
Labels with no path

"You're an INFJ — now what?" A label disconnected from any actual career path. Resonant in the moment. Useless on Monday morning.

📊
Job Boards / BLS
Data without insight

867 occupations listed. None of them answer "where do I belong?" Data without context isn't discovery — it's noise.

CraftRole fills this gap — by starting with what students already have and showing them what it's actually worth.

User Journey Map — Current State

Jordan's experience before CraftRole

Mapping the emotional arc of a student navigating a broken system.

Emotional State
Hopeful
Defeated
→ Time
🎓
Graduation
Pressure

"6 months left. What do I do?"

Anxious
🔍
Searches
LinkedIn

"5,000 applicants. I don't stand a chance."

Overwhelmed
👩‍💼
Sees
Advisor

"You should try social work."

Frustrated
🧠
Takes
MBTI

"You're an INFJ — now what?"

Confused
💻
Job Board
Search

"867 jobs listed. Which one fits me?"

Defeated
😶
Gives
Up

"I don't know where I belong."

Lost
Design Opportunity

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.

Research Synthesis

Key insight clusters

Four themes emerged consistently across research, each driving a specific design decision.

👁
Vocational Blindness

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

📉
Experience Devaluation

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

💸
Practical Needs First

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)

🏛
Institutional Distribution

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

Research

The numbers behind the problem

6–8
careers the average college graduate can name
62%
of high school graduates attend college
7.7%
of U.S. jobs that legally require a college degree
$40K
average student debt for a 4-year degree
Source: Degree Free / Hannah Maryama research · Bureau of Labor Statistics
User Research — University Spring 2026

Validated with real students

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.

4.6
/ 5 Usability
Navigation & layout clarity
4.6
/ 5 Tone
Approachable, non-intimidating language
4.3
/ 5 Relevance
Career match fit to student goals
14
students surveyed
Jan–Feb 2026 · University

"It helps bridge the gaps between me and jobs I didn't know would be good for me, which opens up so many options."

University student · graduating within 6 months

"This program was quick, easy to navigate, and asked very important questions I had not been asked before!"

University student · previously used 30-question assessments

"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."

University student · graduating within 1 year

"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."

University student · graduating within 1 year
!
Key Finding — Design Iteration Triggered

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.

Target Audience

Designing for one audience well

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.

👩

Jordan

22 · College Senior · Psychology

Student Debt$40,000
Work History3 years bartending
Advisor's advice"Try social work"

"I don't know what comes next. I only know what doesn't fit."

What Jordan Needs

Validation that her unconventional experience has real professional value

Careers she's never considered but would actually want

Realistic filters for salary, location, and schedule — not just passion

A path forward — not just a list of roles

What She Doesn't Have
Career clarity Belief her experience matters Awareness of UX research Knowledge of org. development Professional network Salary benchmarks Internship in her field Framework for evaluating fit
~6 mo
until graduation — no plan
< 8
careers she can name
0
informational interviews
Design Process

Architecture before screens

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.

User Flow

End-to-End — Landing to Career Match

How Jordan moves through the full product, with decision points and system responses mapped.

Landing Page Step 1 Context Step 2 Skills Step 3 Needs Sign Up / Auth Archetype Reveal ✶ Step 5 Personality Step 4 Priorities Dashboard Careers Grid Career Detail Saved Path CTA click valid → 3+ skills → ← ranked ← 10 Qs ← save ↓ in explore → select → save →
Entry / Exit points
Assessment steps (public)
App surfaces (authenticated)
User action / transition
AI Matching Logic

How "Bartender" becomes "UX Researcher (92%)"

Every career recommendation is the output of a 4-step weighted logic system — not a keyword search.

The question architecture wasn't designed by intuition — it was reverse-engineered from the career classification output Henry and Frank defined together. Henry asked: "What does a recruiter actually need to know to place someone correctly?" That question shaped which data points the assessment had to surface. Taking that business logic and turning it into a 5-step experience that doesn't feel like a screener — one that validates, grounds, and reveals rather than interrogates — was the core UX challenge. The sequencing decision (needs before personality, context before skill depth) came directly from translating Henry's MBA-level framework into emotional architecture.

① Assessment Inputs
Step 1 — Background
Psychology Major
Communication Sciences
Step 2 — Experience
🍽 Bartending 📚 Tutoring 🎮 Gaming
Step 3 — Skills
Problem Solving
Empathy & Listening
Pattern Recognition
Step 4 — Needs
💰$80k salary floor
🌎Remote-friendly
Step 5 — Values
"I want to help people, not manage them. I care about the why."
② Matching Engine
① Skills Extraction
Bartending → professional skill vector
Extracted vector
comm: 0.91 empathy: 0.87 analysis: 0.74
② Archetype Detection
Values + skills → personality-career classification
🔬
Builder
72%
🤝
Connector
68%
③ Constraint Filter
Salary ≥ $80k✓ pass
Remote available✓ pass
No management✓ pass
④ Weighted Scoring
Skills match
×0.40
Archetype fit
×0.35
Constraints
×0.25
③ Career Matches
Top Match
UX Researcher
92%
Tech Builder $94k avg
Why this matches Jordan
Conflict resolution under pressure maps to usability research. Empathy-first + pattern recognition = researcher DNA.
Org Development
Organizational
Development
87%
Connector archetype + psychology = people systems designer.
Human Factors
Human Factors
Engineering
84%
Pattern recognition under load transfers to safety-critical design.
Design decision
Every match surfaces a one-line reason — not a score alone. The "why" is the feature. Without it, 92% means nothing to Jordan.
AI matching logic — Assessment inputs → Engine → Career output, designed before any UI was built
State Diagrams

Component states — Experience Selector

Every interactive component was designed across all possible states before a single line of code was written.

Experience chip — 4 states
State 1 — Default
🍽 Food Service

Unselected. Gray background. Awaiting interaction.

State 2 — Hover
🍽 Food Service

Blue tint on hover. Signals interactivity without commitment.

State 3 — Selected
🍽 Food Service

Solid blue, checkmark appears. Clear confirmation of selection.

State 4 — + Translation
🍽 Food Service
✦ Skills revealed
High-Pressure Comm.
Conflict Resolution
Pattern Recognition
Skill selection counter — 3 validation states
0 selected — Blocked
Select at least 3 skills 0 / 3
Continue →
2 selected — In progress
Select 1 more to continue 2 / 3
Continue →
3+ selected — Unlocked
Looking great! Keep going. 5 / 8
Continue →
Assessment Architecture

5-Step Flow — Emotional Architecture

Every step is designed with a specific intent that earns the next one.

STEP 1
🧑
Context
Identity & Experience
Validate
STEP 2
Skills
What you're good at
Affirm
STEP 3
🎚
Needs
Salary · Location
Ground
STEP 4
Priorities
Drag to rank
Empower
STEP 5
🧭
Personality
20 Qs · 4 archetypes
Reveal
Match
Your careers
Outcome
Key UX Pattern

The Micro-Translation

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.

Fires on selection — no extra action needed
Uses professional language, not generic summaries
Sets emotional tone for the entire assessment
Step 1 of 5 — Context

Your Experiences

Select all that apply.

🍽 Food Service
🛍 Retail
🎮 Gaming
🤝 Volunteer
✦ What this actually means
High-Pressure Communication
Conflict Resolution Under Pressure
Emotional Regulation in Stress
Rapid Pattern Recognition
Feature Deep-Dive

82-Component Design System

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.

Color Tokens
Primary Scale
600
Semantic
Success
Warning
Error
Archetype Themes
Builder
Analyst
Pioneer
Connect
Components & Type
DisplayAa48px/900
H1Heading36px/800
BodyBody text copy16px/400
CaptionLABEL12px/700
98% Match Tech Industry Builder Problem Solving
Feature Deep-Dive

Career Discovery & Dashboard

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.

98%
UX RESEARCHER
User Experience Research
Tech Industry Problem Solving
Your conflict resolution and pattern recognition skills translate directly to research methodology.
92%
ORG DEVELOPMENT
Organizational Development
EdTech Leadership
Your emotional intelligence and communication skills are highly valued in people-centered roles.
85%
HUMAN FACTORS
Human Factors Engineering
Science Critical Thinking
Your rapid pattern recognition under pressure is a core skill in human factors research.
Skills You Already Have
Conflict resolution
Emotional intelligence
Pattern recognition
Skills to Develop
Research methodology
Data analysis tooling
Portfolio documentation

Strength-first framing — skills you have before skills to develop

Wireframe Progression

From rough to resolved

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.

Lo-fi Wireframe
Structure only. Layout, hierarchy, flow.
Mid-fi Wireframe
Components defined. Interactions clarified.
Hi-fi (Current)
Full design system. Production-ready.
SCREEN 01
Landing Page
— First impression and conversion
Lo-fi — Layout Question
[ CTA BUTTON ]
[ EMAIL CAPTURE SECTION ]

Design Q: Does the 3-column value prop section communicate enough before the CTA?

Mid-fi — Copy Exploration
CraftRole
Sign up
Find your path
forward.
Discover careers matched to your life, not just your resume.
Start My Assessment
Why CraftRole?
Beyond Major
Skills not degree
Life-First
Salary & location
Roadmap
Step by step
Join

Learning: "Find your path forward" was too generic. Tested two variants — students responded to specificity over inspiration.

Hi-fi — Current
Frank Mellana
Research
Process
Sign up
Live · University 2026
There's more
than one way to
fit into work.
Explore roles based on what you're good at — and what you're still becoming.
Start Shaping Possibilities
Redefine your career search
🧭
Beyond
the Major
🎚
Life-First
Filters
Actionable
Roadmap
Join waitlist

Final decision: Lead with specificity — "fit into work" tests better than "path forward" because it names the actual student anxiety.

SCREEN 02
Assessment — Step 1 (Context)
— First step of the 5-step assessment
Lo-fi — Structure
STEP 1 OF 5
Next →

Design Q: How do we make selecting "Food Service" feel meaningful, not just a checkbox?

Mid-fi — Chips + Feedback
STEP 1 OF 5
What you're working with
Your background as a starting point.
First Name
Major
Your experiences
Food Service ✓
Retail
Gaming
Tutoring
Food Service translates to:
Communication, pressure handling, service skills
Continue

Learning: Plain text translation felt clinical. Needed to feel like a reveal — something earned, not just displayed.

Hi-fi — Micro-Translation
Step 1 of 5 — Context
"What you're working with"
Your major doesn't define you.
A starting point, not a limit.
First Name
Major
Your Experiences
🍽 Food Service
🛍 Retail
🎮 Gaming
✦ What this actually means
High-Pressure Communication
Conflict Resolution Under Pressure
Rapid Pattern Recognition
Continue →

Final decision: Translation styled as a reveal with blue accent box — feels earned, not administrative. Fires on chip selection, not on page load.

SCREEN 03
Career Discovery Grid
— The product's core output surface
Lo-fi — List Structure
YOUR CAREER MATCHES
[ FILTERS ]

Design Q: Does a list or a grid better communicate that these are distinct career paths, not just job listings?

Mid-fi — Cards + Scores
All
Tech
Remote
98%
UX Researcher
92%
Org Development
88%
Human Factors
85%
Product Manager

Learning: Cards tested better than list. But a number alone (98%) meant nothing without "why." Added alignment reasoning in next pass.

Hi-fi — Match + Reasoning
All
Remote ×
+ Filter
98%
UX RESEARCHER
User Experience Research
TechBuilder
Your conflict resolution maps directly to research methodology.
92%
ORG DEVELOPMENT
Organizational Development
EdTechConnector
Emotional intelligence is core to people-centered roles.

Final decision: Every match shows industry tag, archetype alignment, and a one-line reason. The number alone never ships without the "why."

SCREEN 04
Dashboard
— Personalized home after assessment
Lo-fi — Layout Priority
DASHBOARD
[ GOAL CARD ]
[ CAREER RECOMMENDATIONS ]
[ SAVED PATHS ]

Design Q: What should Jordan see first — her profile, her next action, or her recommendations?

Mid-fi — Grid Layout
Dashboard

Learning: Two-column grid for profile + goal worked. But career recs needed to lead — that's the primary reason Jordan returns to the dashboard.

Hi-fi — Personalized
CraftRole
👩
👩
Jordan
Psychology · Senior
Weekly Goal
Explore 3 new paths
2 of 3 complete
Unconventional Paths for You
98%
UX Research
Tech
92%
Org Dev
EdTech

Final decision: Dark profile card anchors identity. Career recs are the primary content above the fold. Goal card adds return motivation.

Iterations

How the UI improved over time

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.

Iteration 01 — Experience Input: Adding the Micro-Translation
V1 — Before
Original — No translation feedback

Select your experiences

Food Service ✓
Retail
Gaming

— No feedback after selection. User doesn't know what their choice means.

V2 — After
With micro-translation — immediate reframe

Your Experiences

🍽 Food Service
🛍 Retail
✦ What this actually means
High-Pressure Communication
Conflict Resolution Under Pressure
Rapid Pattern Recognition

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.

Iteration 02 — Validation Messaging: From Rules to Actions
V1 — Before
Rule-based error — creates friction

Select your skills

Problem Solving ✓ Leadership ✓ Creativity

⚠ Minimum 3 skills required

V2 — After
Action-based — counts down from the gap

Select your skills

Problem Solving ✓ Leadership ✓ Creativity

Select 1 more to continue

2 / 3

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.

Iteration 03 — Career Cards: From List to Match System
V1 — Before
Generic list — no personalization signal
UX Researcher
A career in user experience research and testing.
Product Manager
Lead product development from concept to launch.
V2 — After
Match score + reasoning + industry context
98%
UX Researcher
User Experience Research
Tech Industry Builder
Your conflict resolution and pattern recognition map directly to research methodology.

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.

Iteration 04 — Copy as Design: Assessment Step Headers
V1 — Functional
Generic, clinical headers
STEP 1
Enter your background
STEP 3
Work preferences
STEP 4
Rank your priorities
V2 — Emotionally Tuned
Copy designed for emotional state at each step
STEP 1 · VALIDATE
"What you're working with"
Your major doesn't define you.
STEP 3 · GROUND
"What do you actually need?"
Let's define your non-negotiables before passion.
STEP 4 · EMPOWER
"Right now, what matters?"
Drag to rank. We'll adjust everything around this.

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.

Challenges & Constraints

What made this hard

Execution Without an Engineering Team

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.

🎯

The Trap Between Feeling Good and Being Useful

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.

🎓

Shipping a Vision Before the Engine Was Real

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.

How I Solved Constraint #1

AI-Assisted Design-to-Code Workflow

🎨
Design Intent
Figma
Prompt Engineering
Claude AI
⌨️
Production Code
Next.js · React
🌐
Browser QA
Visual review
🔁
Refinement
Iterate
0
engineering team members
Weeks → Days
feature delivery compression
82
production components shipped
Design Leadership

Three moments that changed the product

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.

01
Mike's systems input changed a design decision
Situation

Frank had designed a 3-step assessment (context, skills, match) — shorter, faster, lower dropout.

Tension

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.

Decision

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.

Outcome

The needs/constraints layer became a core differentiator vs. personality tests, and is cited by students as the reason CraftRole felt different.

02
Sahil's critique led to a visible change
Situation

Frank had designed the archetype reveal as a simple card with a color and label.

Tension

Sahil's critique: "There's no visual hierarchy — every archetype looks equally important. The reveal should feel earned."

Decision

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.

Outcome

The archetype reveal became the most-mentioned feature in student feedback: "I didn't expect it to feel so personal."

03
Henry reframed a UX problem
Situation

Frank's original framing of the matching engine was skills-to-career: collect skills, find matching jobs.

Tension

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."

Decision

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.

Outcome

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.

Key Decisions & Tradeoffs

The choices that defined the product

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.

The Decision
3-step vs. 5-step assessment

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.

What I Gave Up

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.

Why It Was Right

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.

The Decision
Archetype as reveal moment, not step output

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.

What I Gave Up

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.

Why It Was Right

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.

The Decision
Excavation over collection

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.

What I Gave Up

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.

Why It Was Right

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.

The Decision
Institutional license, not consumer subscription

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.

What I Gave Up

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.

Why It Was Right

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.

Results

What it did for students. What it proved as a product.

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.

Student Outcome

"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

What the Numbers Don't Show

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.

82
production components — every screen a student touches is fully built, not mocked or faked
4.5:1
color contrast across every surface — WCAG AA compliance was a constraint from day one, not an audit afterthought
Weeks

Days
delivery compression per feature — AI-assisted coding meant more time on judgment, less on implementation mechanics
Live
product running in active university coursework on April 30 — not a prototype, not a clickable Figma mockup
4.6/5
usability — students completed the full assessment without guidance or clarification requests
4.6/5
tone — students described the language as a conversation, not a screener; the copy decisions held under real conditions
14
students — open-ended responses identified the archetype reveal as the defining product moment; none were prompted to mention it
Organizational Impact

Designed to scale — not just to ship.

10+
universities deployable with zero code changes — namespaced routing means a new institution requires only a namespace record and institutional data configuration
$20K
institutional license model targets design program budgets, not student subscriptions — reaching more students than a per-seat model that competes with Netflix
50K
users/year per institution supportable by current architecture — standard mid-size design program enrollment, no redesign required
4
design disciplines served at launch — Architecture, Graphic Design, Industrial Design, Interior Design — all sharing one platform, one assessment, one matching engine
Lessons Learned

What worked. What I'd change.

What Worked
Design system first, always

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.

Prompt-based coding as a design superpower

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.

Copy is design

"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.

Directing before designing

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.

What I'd Do Differently
Structured usability testing alongside the survey

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.

AI layer before the dashboard

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.

Define success metrics at kickoff

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.

What's Next

What comes after the demo

Phase 1 — Now
AI Skills Translation

Dynamic Claude-powered skill extraction replaces static micro-translations for any experience input

Phase 2 — Month 1
Real Matching Engine

6-dimension scoring algorithm weighted by user priority ranking replaces placeholder results

🗄
Phase 3 — Month 2
Database & Library

Supabase persistence, assessment data across sessions, career library expands to 100+ roles

🚀
Future Vision
The Cockpit

Persistent platform tracking career progression, financial milestones, skill development over time

April 30, 2026 · Live Launch

CraftRole goes live
to 60 graduating designers.

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.

🏛
Architecture

Spatial reasoning, systems thinking, project coordination — skills that transfer far beyond built structures.

✏️
Graphic Design

Visual communication, brand identity, typography systems — a degree that maps to more career paths than any job board suggests.

⚙️
Industrial Design

Human-centered product thinking, materials knowledge, manufacturing constraints — a foundation for roles that don't even have "designer" in the title.

🪑
Interior Design

Client negotiation, spatial experience, environmental psychology — skills that cross into healthcare, hospitality, UX, and beyond.

The Moment

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.

The Product Bet

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.

The Institutional Play

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.

Countdown to April 30th
Now — April 15
Matching engine hardening

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.

April 15 — April 28
Institutional onboarding

University namespace provisioned. Student cohort data configured. Assessment tailored to design program context — not generic college student defaults.

April 30
Live with 60 students

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."

— CraftRole assessment copy, Step 1 · Launching April 30, 2026