Role: Senior Product Designer

Domain: B2B SaaS, HR Tech, Workforce Management

Stack: Figma, Claude

AETHRA Wire is a B2B matchmaking platform connecting outsourcing companies with partners for workforce management. Two distinct user roles with separate workflows: Provider (outsourcing company managing employees and clients) and Worker (individual employee managing their own schedule and absences).

I received the project as a set of UX Requirements documents — business requirements, user stories, and functional specs — and designed the full product from scratch: design system, information architecture, and all screens for both roles.

Frame 319.jpg


Starting point: ambiguous requirements

The brief wasn't a clean product spec. It was a collection of business requirements and user stories that described what the system should do, without prescribing how it should work. My job was to translate that into a product someone could actually use.

This meant making structural decisions that weren't in the documents: what the navigation hierarchy should be, which workflows needed dedicated screens vs. could be handled inline, how the two roles should relate to each other's data, and where the system needed to protect users from themselves (double-booking, expired certifications, missed document deadlines).

Before touching UI, I mapped out the full information architecture for both roles separately, then identified where they intersected.

image.png


Design system

The client wanted the codebase built on a Tailwind-compatible component framework. That decision shaped everything upstream: the design system in Figma had to mirror how Tailwind actually works, not just look consistent on screen.

This meant no arbitrary values, no one-off spacing decisions, no color that didn't map to a token. Every choice in Figma needed a direct equivalent in code. If something couldn't be expressed cleanly in Tailwind's utility system, it was a signal to rethink the design decision, not add an exception.

In practice: I defined the spacing scale, color palette, and typography to match Tailwind's default token structure, then extended it where the product needed it. Status colors for the employee matrix, density variants for table rows, component states. All of it documented as named tokens, not raw values.