Designing Recruit by Zariya AI.
One brand across the website and the product.
Recruit by Zariya AI is a conversational hiring product: AI interviews candidates over video and phone, then gives recruiters a ranked shortlist. I designed its landing page, visual language and first components, and built the landing page in code with Claude Code. My first direction looked nothing like the product, so I threw it out and rebuilt it from the product's black-and-white palette and type, adding beige as an accent and a dot system that suggests voice and signal. The landing page and the product now read as one brand.
Recruit's product is black and white, as it is still early. My first landing page was warm gradients and a serif headline. Someone going from the site into the product would have thought they'd landed on a different company.
My first direction looked good and matched the references I'd collected, but it did nothing for Recruit; it could have belonged to any product. Instead of polishing it, I dropped it and rebuilt from the product itself: its black-and-white palette and type, plus beige and a dot system I added. The team liked Version 2, and the dots kept it from looking like every other SaaS site.
My first landing direction used warm gradients and a serif headline. It looked polished and fit the references, but it was nothing like the product, so I rebuilt it from the product's palette and type.
The accordion is built from the Recruit dashboard itself: the same cream cards, numbered rows and type, so the page previews how the product is organised.
The main assets for the landing experience, each modelled on the product UI.
The first wireframe was dense, with text explaining every feature. Recruit is a conversational product, so I cut the explanations and showed it instead. The accordion follows the dashboard, the roles section looks like the product UI, and the cards use dots to suggest voice. The copy now only names things.
Claude gave me a fast base, but its defaults were generic: italic serif headlines that looked nothing like the product. The direction was mine. I studied the product, which was black and white, and used beige as the one accent. I built the visual language up from the three cards I designed (AI Interviews, Call Screening and Everything Around It) and the dotted abstract imagery. Figma-to-code through MCP worked poorly and used a lot of tokens, so I moved to Paper, where code-to-canvas is easier.
The product was black and white, so I kept charcoal and cream as the base, added beige as the only accent, and used dots for texture.
The dot system: halftone-style dots that scale and fade to suggest voice, reach and signal. It is the shared texture across the cards.
My internship ended before the website shipped, so nothing was tested. This is what I'd check first.
Can a recruiter say what Recruit does within five seconds of landing? Which accordion rows do they open first, and does that match the order I set? Where do visitors drop on the way to the pilot application? And do the dots help or distract on the cards, compared with a plain version? A five-person test with HR or recruiting people would answer the first two.
I owned the visual language, the landing page design and the first components, working from the product's requirements and dashboard. I built the landing page and its interactions in code with Claude Code, so there was no developer handoff. The website was built but not shipped before my internship ended, so nothing here is measured.