Hirehoot:
Design System & UX Foundation
UX Designer / Design Systems
2025, 2 Months
summary
Established the UX foundation and full design system for a UK-based hiring startup's new dashboard, then handed off a documented, developer-ready library to the UI designer and engineering team.
Core Skills
Design Systems · Wireframing · User Flows · Cross-Functional Handoff · Component Documentation
TOOLS
Figma · Storybook
The challenge
Hirehoot needed a new dashboard, but had no structural foundation to build it on — no defined flows, no component library, and no shared language between design and engineering. Visual work risked starting before the underlying logic was resolved.
The Approach
I owned the foundation layer. I mapped the initial flows, produced the wireframes, and surfaced the UX requirements the product needed to meet — then built the entire design system from scratch inside their Figma project so the UI work had a stable base to sit on.
The ımpact
Delivered a complete, documented system and a set of resolved core flows. The UI designer inherited a ready-to-apply library instead of a blank file, and engineering received components that mapped cleanly into Storybook.
01 / FOUNDATION
Wireframing the Flow
Before any visual direction was set, I mapped how the dashboard should actually work. I built the wireframes, defined the initial user flow, and flagged the UX requirements the product needed to satisfy — establishing what the screens had to do before deciding what they should look like.
02 / SYSTEM
Building the Design System from Scratch
I created the full design system inside Hirehoot's Figma project from zero: tokens, typography, and a structured component library. It was built for handoff — organised so another designer could pick it up and apply it across screens without needing me in the room.
03 / COLLABORATION
Bridging Design and Engineering
A system is only as good as its implementation. I worked directly with the development team to make sure every component translated correctly into Storybook, keeping the built library in parity with the design source and preventing the drift that usually appears between Figma and production.
04 / IDEATION & HANDOFF
Onboarding and Main Screen Concepts
I developed the onboarding and main screen ideations to set the product's direction, then handed the project over in full to the UI designer — with a documented system, resolved flows, and a clear rationale behind each decision.
Hirehoot:
Design System & UX Foundation
UX Designer / Design Systems
2025, 2 Months
summary
Established the UX foundation and full design system for a UK-based hiring startup's new dashboard, then handed off a documented, developer-ready library to the UI designer and engineering team.
Core Skills
Design Systems · Wireframing · User Flows · Cross-Functional Handoff · Component Documentation
TOOLS
Figma · Storybook
The challenge
Hirehoot needed a new dashboard, but had no structural foundation to build it on — no defined flows, no component library, and no shared language between design and engineering. Visual work risked starting before the underlying logic was resolved.
The Approach
I owned the foundation layer. I mapped the initial flows, produced the wireframes, and surfaced the UX requirements the product needed to meet — then built the entire design system from scratch inside their Figma project so the UI work had a stable base to sit on.
The ımpact
Delivered a complete, documented system and a set of resolved core flows. The UI designer inherited a ready-to-apply library instead of a blank file, and engineering received components that mapped cleanly into Storybook.
01 / FOUNDATION
Wireframing the Flow
Before any visual direction was set, I mapped how the dashboard should actually work. I built the wireframes, defined the initial user flow, and flagged the UX requirements the product needed to satisfy — establishing what the screens had to do before deciding what they should look like.
02 / SYSTEM
Building the Design System from Scratch
I created the full design system inside Hirehoot's Figma project from zero: tokens, typography, and a structured component library. It was built for handoff — organised so another designer could pick it up and apply it across screens without needing me in the room.
03 / COLLABORATION
Bridging Design and Engineering
A system is only as good as its implementation. I worked directly with the development team to make sure every component translated correctly into Storybook, keeping the built library in parity with the design source and preventing the drift that usually appears between Figma and production.
04 / IDEATION & HANDOFF
Onboarding and Main Screen Concepts
I developed the onboarding and main screen ideations to set the product's direction, then handed the project over in full to the UI designer — with a documented system, resolved flows, and a clear rationale behind each decision.
Hirehoot:
Design System & UX Foundation
UX Designer / Design Systems
2025, 2 Months
summary
Established the UX foundation and full design system for a UK-based hiring startup's new dashboard, then handed off a documented, developer-ready library to the UI designer and engineering team.
Core Skills
Design Systems · Wireframing · User Flows · Cross-Functional Handoff · Component Documentation
TOOLS
Figma · Storybook
The challenge
Hirehoot needed a new dashboard, but had no structural foundation to build it on — no defined flows, no component library, and no shared language between design and engineering. Visual work risked starting before the underlying logic was resolved.
The Approach
I owned the foundation layer. I mapped the initial flows, produced the wireframes, and surfaced the UX requirements the product needed to meet — then built the entire design system from scratch inside their Figma project so the UI work had a stable base to sit on.
The ımpact
Delivered a complete, documented system and a set of resolved core flows. The UI designer inherited a ready-to-apply library instead of a blank file, and engineering received components that mapped cleanly into Storybook.
01 / FOUNDATION
Wireframing the Flow
Before any visual direction was set, I mapped how the dashboard should actually work. I built the wireframes, defined the initial user flow, and flagged the UX requirements the product needed to satisfy — establishing what the screens had to do before deciding what they should look like.
02 / SYSTEM
Building the Design System from Scratch
I created the full design system inside Hirehoot's Figma project from zero: tokens, typography, and a structured component library. It was built for handoff — organised so another designer could pick it up and apply it across screens without needing me in the room.
03 / COLLABORATION
Bridging Design and Engineering
A system is only as good as its implementation. I worked directly with the development team to make sure every component translated correctly into Storybook, keeping the built library in parity with the design source and preventing the drift that usually appears between Figma and production.
04 / IDEATION & HANDOFF
Onboarding and Main Screen Concepts
I developed the onboarding and main screen ideations to set the product's direction, then handed the project over in full to the UI designer — with a documented system, resolved flows, and a clear rationale behind each decision.