AETHRA Wire: I designed an HR platform from scratch
I received a simple brief about the product as a set of requirements, without a clear spec, and designed the product from scratch.
AETHRA Wire is a B2B matchmaking platform connecting outsourcing companies with partners for workforce management.
I developed the business requirements, user stories and functional specs. I designed the information architecture, the design system and every screen for both roles: the Provider managing employees across clients, and the Worker managing their own schedule.
Figma Claude Code
Built the product from a short description: information architecture, JTBD per role, every screen, through iterations with the client
Figma components map to classes one-to-one — handoff without friction.
Engineering ran in parallel with design on a shared component library, so the team shipped a working product in three weeks.
Ambiguous requirements
The brief described the idea of what the product should do, without clear requirements or a technical spec
So before the first screen I mapped the information architecture for both roles separately, found where they intersect, and wrote jobs-to-be-done tables for every core workflow.
The structural decisions were not in the documents: the navigation hierarchy, which workflows deserved dedicated screens, how the two roles relate to each other's data, and where the system must protect users from themselves, meaning double-booking, expired certifications and missed document deadlines.
Worker
- DashboardQuick Actions · Upcoming Shifts · Announcements · Doc Reminders
- ShiftsPersonal Calendar · Shift Detail · Training Events
- Absence ManagementReport Form · Doc Upload · Extension Form · History
- CertificationsActive Certs · Expiry Reminders
- DocumentsDocument List · Upload
- ProfilePersonal Info · Contacts · Notifications
Provider
- DashboardAlerts · Stats · Activity
- Employee MatrixMonthly View · Client Groups · Cell Detail · Navigation
- Employee DetailsProfile · Calendar · Certifications · Documents
- Shift AssignmentCalendar by Client · Assignment Panel · Filters
- Training ManagementCatalog · Create Training · Worker Assignment · Status
- Absence ConsoleOverview · Approve/Deny · Doc Status · Reporting
- SettingsOrg · Notifications · Doc Rules
Design system
I agreed the design system with the developers before I drew a single screen, so development ran in parallel with design instead of waiting for it.
The client wanted the codebase on a Tailwind-compatible framework, so the Figma design system had to mirror how Tailwind actually works, and TailGrids gave both sides the same blocks.
That means no arbitrary values, no one-off spacing and no color that does not map to a token. Developers read a Figma screen and knew which classes to reach for, so handoff stopped being a translation from mockup to components.
Provider role
A manager with 50+ employees across 5 clients has to see problems right away, without switching between workers
The central screen became the employee matrix: every employee grouped by client, with a color-coded status for each day of the month.
The hardest logic sat in shift assignment: qualification matching, double-booking protection, and visibility into why a specific employee cannot be assigned. Getting it wrong creates real compliance problems, so the interface had to make the right action obvious and the wrong action hard.
Worker role
The Worker needs to know today's schedule and to report when something goes wrong.
The most process-heavy part is absence reporting, and it carries real compliance consequences.
A 48-hour countdown to upload medical documents stays visible and persistent so it cannot be missed, urgent without being anxiety-inducing. The rest of the needs are narrower: see the schedule, manage documents, keep the profile in order.
What the project required
Working with uncertainty means making product decisions, not just design decisions.
The deliverable was not a set of pretty screens; it was a complete, internally consistent design an engineering team could build from.
