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
Solo — AI-assisted build
End-to-end UX Strategy 82-Component Design System 5-Step Assessment Flow AI Interaction Design Prompt-Based Engineering WCAG AA Accessibility
Introduction

The question no career tool actually answers

Most college students can name fewer than eight careers. After years of education and tens of thousands of dollars in debt, they graduate without a clear sense of where they belong — not because they lack ability, but because no tool was ever built to help them see the full picture. LinkedIn rewards volume over fit. Career services offices point toward the same five roles they always have. Personality tests hand out four-letter labels with no path forward.

CraftRole was built to answer the question none of those tools actually address: "Given my skills, my experience, and my reality — where do I belong?" It's an AI-powered career discovery platform that translates real-world experience — including the jobs students are told to hide — into transferable skills, and maps them to careers they never knew existed.

I conceived, designed, and shipped this platform end-to-end — from brand strategy through production code — using AI-assisted development workflows to compress what would typically require a cross-functional team into a single authorship model.

"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
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 University students completed CraftRole during the Spring 2026 demo and provided structured feedback across usability, tone, clarity, and relevance. Their responses confirmed core design decisions — and surfaced clear signals for what to build next.

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
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
CTA click
Step 1
Context
valid →
Step 2
Skills
3+ skills →
Step 3
Needs
Step 4
Priorities
← ranked
Step 5
Personality
← 10 Qs
Archetype
Reveal ✦
Dashboard
explore →
Careers
Grid
select →
Career
Detail
save →
Saved Path
✓
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.

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

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

⚡

Solo Full-Stack Execution

Designing and engineering 82 components without a dedicated engineering team required rethinking the entire workflow. Used Claude AI as a development collaborator — compressing full-stack delivery from weeks to days using prompt-based coding.

🎯

Emotional + Practical Balance

Career tools fail in two directions: emotionally resonant but impractical (personality tests), or practically useful but emotionally cold (job boards). CraftRole needed to do both — resolved by treating copy as a first-class design surface.

🎓

Demo That Felt Complete

The university deployment needed to demonstrate a vision the product hadn't fully realized. The assessment flow, archetype reveal, and dashboard carried enough personalization weight that the partially-complete matching layer felt plausible.

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
Results

What shipped. What it achieved.

CraftRole launched as a live institutional demo for University's Spring 2026 UX curriculum — a functioning product used in active coursework, not a prototype.

82
components shipped across 5 product surfaces with full token coverage
4.5:1
color contrast — WCAG AA compliant across every component
Weeks
→
Days
full-stack feature delivery using AI-assisted workflows
Live
deployed at University Spring 2026 UX curriculum showcase
4.6/5
usability score from University students — Spring 2026 demo
4.6/5
tone score — approachable language validated by real users
14
students provided structured usability feedback across all product surfaces
Lessons Learned

What I'd do differently

Three things worked well and three things I'd change.

What Worked
Design system first, always

The token architecture paid back every hour invested within two weeks. When scope expanded — it always does — the system absorbed the change.

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" is a design decision. Treating copy as a first-class material rather than fill-in-later made the product feel human.

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 and instrumenting those metrics from day one would make the case study more defensible.

What's Next

The path from demo to product

✦
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

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
Lead 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
Professor · 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
Professor · Audio & Visual Professional

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.