Workscreen.io SaaS MVP
A hiring tool has two readers who never meet. Employers had to believe the screening was rigorous, and applicants had to believe the test was fair.
- Role
- UI/UX Design, Design Systems, End-to-End Product Design, Multi-Surface UX
- Year
- 2024
- Surfaces
- 4
Both readers arrive suspicious.
- Problem
- Employers want to screen hard; applicants give an hour with no job promised. The two only meet through the screens.
- Built
- Full four-surface MVP (a first shippable version) from zero as sole designer. 62 screens across about three months.
- Result
- Shipped and live; the screening flow designed here is now what the product leads with.
WorkScreen screens out low-effort and inauthentic applicants upfront. The brief was really just intent: a feature concept, reference sites, and Loom walkthroughs, with no flows, no information architecture, and no design system to inherit.
I was the sole designer across all four surfaces: a marketing site, an employer dashboard, a timed applicant evaluation flow, and an admin backend.
Employer and applicant only meet through the screen.
Screen hard without guessing.
Employers need to filter out low-effort and inauthentic applicants before interviews, then read evidence they can trust.
Spend the hour without feeling trapped.
Applicants give WorkScreen 60 minutes with no job promised, so the flow has to feel fair while the test stays serious.
So every screen carries a trust signal. The employer needs to see rigor, the applicant needs to see fairness, and one product language has to hold both.
62 screens before edge cases and assets.
Web only, brief to handoff across about three months. The design system had to hold four surfaces doing different jobs.
Marketing screens
The front-facing site: how it works, features, pricing, about, and get started.
Client screens
Campaign setup, job posts, applicant review, profile, billing, and settings.
Applicant screens
Job post, short application, timed evaluation, and completion states.
Admin screens
Client, evaluation, applicant, billing, and comparison tools for operations.
The front-facing site, client dashboard, applicant flow, and admin backend, all built on one design language.
Four choices kept the system from splitting.
- 01
Built the design system before the screens
I set the type, color, spacing, buttons, and component rules first. Without that, four surfaces would have drifted into four products sharing a logo.
- 02
Built one surface at a time, in build order
Build order ran: marketing site, client dashboard, applicant flow, admin backend, then one revision pass across all four.
The four surfaces in build order. Each one built on the last rather than starting fresh. - 03
Designed fairness into the flow itself
I had taken the applicant evaluation during hiring for this job, so I knew the pressure from the other side before drawing the flow.
- 04
Prioritized the heaviest client-side states first
Client-side flows carried the most state sprawl. The flows that mattered most came first, then the rest surfaced as the product got clearer.
Edge-case variants for one heavy client-side flow, laid out in one grid.
Four surfaces, shown by what each had to prove.
Sales path built for clarity over novelty, since people landing here have seen a hundred SaaS homepages.
Where employers run hiring: campaigns, job posts, applicants, profile, billing, and settings.
The applicant starts in familiar job-board territory before entering the evaluation.
The same data becomes an operations tool for clients, job posts, applicant states, billing, evaluations, and reports.
- 62 Screens designed, four surfaces
- 4 Surfaces, one design system
- ~2 mo Brief to handoff
- 1 Designer, full system built from zero
Shipped and live, selling on the flow designed here.
WorkScreen runs as a live product today. I designed all 62 screens across the four surfaces, and the part that stuck is the screening flow.
The rigor built for trust is part of how the product presents itself now. The evaluation, the effort filters, and the timed test are close to what it leads with.
The screening flow designed here is what the product now leads with.