Skills & Projects Matcher
Interactive Capability Visualization
Overview
Traditional portfolios list skills and projects separately, forcing reviewers to mentally infer how a designer actually works. This project intentionally collapses that gap.
Rather than telling what I can do, this interface shows how my skills are applied in practice. It allows viewers to explore depth without reading long case studies, making design capability legible through action.
The Challenge
"Reviewers need to quickly answer: What kind of designer is this? How consistently are these skills applied? Do they operate at execution, systems, or strategic level?"
The Industry Gap
Hiring managers, design leaders, and recruiters face recurring challenges:
- Skills are often presented as static claims, not demonstrated capabilities.
- Portfolios privilege outcomes over process, hiding how decisions were made.
- Cross-disciplinary designers struggle to show range without appearing unfocused.
Core Insight
Reviewers spend seconds, not minutes, on a first pass. Lists are ignored; patterns are noticed. Visual evidence of thinking is more persuasive than explanation.
Strategic Approach
This project treats skills as a system, not a list. Value emerges in the connections, not the nodes.
Inputs & Outputs
Skills are treated as inputs, while projects are outcomes. This framing helps clarify the relationship between capability and result.
Non-Linear Exploration
Users can move from Skills → Projects (capability-led) or from Projects → Skills (outcome-led), mirroring how strategic designers navigate between tools and impact.
Systemic View
By visualizing the connections, the tool positions me not just as a designer of interfaces, but as a designer of understanding and systems.
UX & Interaction Design
Interaction Goals
The goal was to reduce cognitive load while increasing perceived depth. The interface encourages exploration without instruction—making complexity feel controlled, not overwhelming.
Key Decisions
- Split Layout Clear separation between Skills (left) and Projects (right) establishes the mental model immediately.
- Click-based Reveal Maintains focus by only showing relevant connections on demand, preventing information overload.
- Subtle Visual Flows Thin connecting lines imply flow and relationship without dominating the visual hierarchy.
Visual Language
The interface is intentionally quiet. Minimal color keeps focus on relationships, while consistent typography reduces hierarchy confusion. A visually loud interface would compete with the content; a restrained UI allows the viewer to project meaning onto the system, increasing trust and credibility.
Value & Outcomes
For Reviewers
Faster assessment of strengths, clear evidence of applied skills, and confidence in the depth and consistency of my work.
For Me
A reusable framework for evolving work, a narrative that scales as projects grow, and a strategic artifact that proves I think in systems.