← All work
01 · Video job platform · Capisoft · 2026

Hirely

A social feed for jobs, where job seekers and employers meet through video.

See it work
Role
UX and product designer
Team
CEO and lead on feedback, developers on the final UI
Timeline
4 months, June to September
Tools
Claude as the design partner, and Figma
Platforms
Mobile app and web app, dark and light
Status
In development

Design work by me, made at Capisoft. All rights belong to Capisoft.

Job seeker

Discover · dark mode

1 / 3
Light Dark
  1. Problem

    Job hunting is slow and text-heavy. 46% of job seekers have given up on an application that was too tedious.

  2. My part

    The information architecture, both user paths, the design system, dark and light mode. See how it was made ↓

  3. Key decision

    One app, two paths that meet at the match.

  4. Result

    Delivered the designs. The developers built on the design system.

The brief

Job hunting is slow and text-heavy. What if it felt like scrolling?

The idea came from Capisoft: a job platform that works like LinkedIn meets Instagram, with short videos and a feed for both sides of the market. The brief: make it a full app.

46%of job seekers have given up on an application because it was too tedious or took too long. Indeed, State of the Job Seeker survey · 2026 ↗

Read the full briefWhere it started and what was missing

Capisoft pitched the idea to the client as 5 concept screens, all for the job seeker. Only the splash survived. There was no employer side at all, so it was designed from zero, together with the flows, the structure and the design system. The CEO set the vision, my lead designer gave feedback, and the developers are now building it.

The concept splash: Welcome to Hirely over a grid of people
Core keptSplash

The people collage and the welcome line stayed. The buttons changed: Sign up and Log in became a choice between looking for work and hiring.

Concept: a job shown as a full-screen video
Replaced
Concept: job details in light mode
Replaced
Concept: a video interview question
Replaced
Concept: the match screen
Replaced
Swipe
See it work

Watch the happy path. Then try to break it.

Employer onboarding, from "I am hiring" to a verified account, in the web prototype. Want to see the full prototype? I'll show it in person.

Recorded from the working web prototype · no sound
Beyond the happy path

Most of the app is what happens off the happy path.

Error, loading and empty states, and every route in and out, on both sides. Pick a situation and try it in the web prototype. Stuck for a moment? A hint lights up.

Try itThe prototype
Your task01

You forgot your password. Get back in.

Your task02

You’re on a shared computer. Log out without being remembered, then log back in as a job seeker.

Your task03You are the employer

He’s not the right fit for this shift. Pass on him and tell him why.

How it was made

Claude drafted the first map. I fixed its logic.

The process: Claude made the map from the brief. Then Claude drafted screens, I checked them against the map and fixed the logic in Figma, round after round until both paths worked.Draft a screenCLAUDECheck the mapMEFix the logicME · FIGMAThe mapFROM THE BRIEFClaude drafts, I check and fix.Round after round, until both paths worked.
Claude:The map

The information architecture and first screens, drafted from the pitch deck and my notes. Once its logic was fixed, it became the reference for every screen.

Me:Fix the logic

Many screens had no connection to the next, and login states were missing. The gaps were filled with my own logic, then refined in Figma.

View the full processCEO feedback and who led each step
CEO:Feedback

He described his vision in a few words. Together we went through the scenarios, like how an employer uploads or records a video and how a job seeker swipes, and picked the best one. Some additions were his, like importing listings from other job platforms.

  1. 01ConceptCapisoft
  2. 02Mobile appMe
  3. 03New UIDevelopers
  4. 04Web appMe
Claude draftedI refined

Claude drafted the screen. I refined it in Figma.

Job seeker profile settings, before and after. Point at a number, or click it, to see what changed.Tap a number to see what changed.

BeforeClaude’s first screen
Claude’s first profile settings screen: an initial as avatar, three fields for name, headline and about, and a Save changes button, with a lot of empty space.
AfterMy refined version
The refined profile settings screen: a real photo, name and headline, About you with a character count, work days and times, start date, languages, an optional CV with tags picked from it, and Save at the top and bottom.
What changed

First screens generated with Claude. Photo placement, colour, text size and weight, layout, new fields and the light mode done by hand in Figma.

Key decision

One app, two user paths. They meet at the match.

After the splash, one choice: "I'm looking for work" or "I'm hiring". From there, each side sees only its own tools.

How a match happens
How a match happens: the employer posts a listing, the job seeker finds it and interviews, the employer reviews. After a proposal and a reply, it is a match and a chat opens in both inboxes.EMPLOYERJOB SEEKER1Posts a listingjob description withrecorded videos2Finds the jobscrolls the feed,opens the post3Interviewsrecords or writesanswers, sends them4Reviewswatches answers,shortlists & matchesMatcha proposal is sent,the job seeker repliesChat opensin both inboxes,where they connect How a match happens: the employer posts a listing, the job seeker finds it and interviews, the employer reviews. After a proposal and a reply, it is a match and a chat opens in both inboxes.EMPLOYERJOB SEEKER1Posts a listingjob description withrecorded videos2Finds the jobscrolls the feed,opens the post3Interviewsrecords or writesanswers, sends them4Reviewswatches answers,shortlists & matchesMatcha proposal is sent,the job seeker repliesChat opensin both inboxes,where they connect
  1. 01

    The employer path carries the load

    A listing, an intro video and interview questions, then reviewing candidate videos, messages and matching. Plus the subscription and inviting colleagues.

    Why

    Employers range from Gen Z to older people. The design stays modern but familiar, with guides at every hard step.

Two more decisionsRecord, upload or write. Left out, for now
  1. 02

    Record, upload or write

    First version: recording only, an introduction and then 3–5 interview questions. The team suggested uploading too. Job seekers who don't want to record can write their answers instead.

    Why

    Not everyone is comfortable on camera. Video stays the strongest choice, but never the only one.

    Trade-off

    A written answer is easier, but shows less of the person, and that is what employers come for. Uploads meant one video format had to work in the web app too.

  2. 03
    Left out, for now

    A separate admin flow

    Colleagues join the employer's account through an invite link, with limited actions. Accepted by the team.

    Trade-off

    Full role management, or a simpler product first. Simpler won. Roles can come later.

The system

The UI keeps changing. The main structure stays.

The developers are reworking the mobile UI. The main structure has remained. Between my mobile app and my web app, some pieces stayed exactly the same and a few changed.

StayedMobile and web

AaRegularMediumSemiboldBold
Plus Jakarta SansOne family, hierarchy from weight.
Ground#060914Brand blue#3B61D0Success#35C48DMatch#C8563F
Core coloursSame values on both platforms.
The system rulesFour rules every screen follows

RulesFrom the system

  1. Say helloThe match is the only warm moment.

    A white button with a coral label, on the match screen only. Everywhere else stays cool and blue.

  2. 3 digits to goA disabled button says what's missing.

    Not a grey "Continue". The label counts down until the code is complete.

  3. Every video is 9:16.

    The webcam records 16:9. A fixed guide shows what will be kept.

  4. MatchedUnder reviewDeclinedMatchedUnder reviewDeclinedLight mode isn't inverted.

    Dark is the default. Light is there for those who prefer it. Blue stays the same, and the status colours got darker versions that stay readable on white.

Show what changedMobile → web: button, navigation, selected tab

ChangedMobile → web

Primary button
Primary
Interview

Blue, rounded corners → cream pill. On web, blue moved to the details: links, focus and your own chat bubble.

Navigation
DiscoverActivityInboxProfile
DiscoverActivityInbox1

Bottom tab bar → sidebar. The employer's centre "+" became a "New listing" button.

Selected tab
Applied 6Liked 2
Applied 6Liked 2

Blue fill → cream fill. Counts stay as small pills on both.

Outcome

Delivered the designs. Now being built.

4 months
From a pitch deck to a full app
236
Mobile screens, each one checked by hand
2 modes
Dark and light, on mobile and web
Handed over
Figma files and a working web app
Who did what
Stayed mine

The structure, both user paths and most flows. The design system: elements, icons, font and main colour. For the web app: 10 Figma screens per side for the developers to reference, and the full design system in the working build.

Changed by the developers

Gradients, colours and a few flows in the mobile UI. The web app mixes my system with their new UI.

“Multiple developers asked me: who made the designs of Hirely? They were impressed by how good and clean the flows were. Super clear for them as well. Great work.”
CEO, Capisoft, message after the handover
Looking back
Went well

The structure held

The developers reworked the UI. The flows and the information architecture stayed.

Hard part

Starting from a deck

No flows or structure to start from. Every path mapped from scratch.

Next

Measure it at launch

Test both sides, then track time to a first interview and matches that turn into a chat. Also, let people hide a CV tag the AI got wrong.

BTS moment

You thought AI always gets it right?

Only a few screenshots were saved. The fixes were many more.

01 Panels sliding over each other Employer review: the candidate panel sliding over the list
02 Text breaking on smaller screens Prototype hint: Open the link from the email, squeezed to one word per line
03 Rounded heart Match notification: the heart icon cut off at the top
04 See-through button over the text behind it Following button with a heavy double outline