Role: Frontend Developer, product UIFull interview loop
Four rounds for a frontend developer on a product team: a search box that races, a filter slow on phones, a shared dialog, and comments strangers write.
4 rounds · 4 h
The hire this loop is looking for builds customer-facing features in the browser from end to end: the component, the data it waits on, how it behaves on a phone, and what it does with text other people wrote. It is written for a product team rather than a platform team, and two assumptions sit underneath it — the team works in a component framework (the plans use React, as most teams do, and each says what changes if yours does not), and there is a design system the hire uses and sometimes contributes to without owning.
Two of the rounds put something already broken in front of the candidate: a search box whose results race the input, fixed and tested in code, and a category page that scores 98 in the lab and responds slowly on phones, read from field data and a trace. The other two ask for judgment on something not yet merged or built: a pull request adding a dialog to the design system, and a draft design for comments that strangers write on product pages. All four are set in the same online shop, so interviewers comparing notes are talking about one product.
Nearly every candidate can list semantic HTML, ARIA and keyboard support; far fewer have decided where focus should land once the element it came from has been deleted. That distance between a fluent answer and an interface that works is why accessibility gets three reads, more than anything else, and each comes at it differently: a widget built to work by keyboard and screen reader, a large performance win weighed against what it hides from assistive technology, and focus designed into an API that other teams will call. Async UI state and web performance get two reads each, one in something already broken and one in the design that is not yet built.
Component API design and browser security are nice-to-haves, and each costs something. A candidate who is strong on the must-haves but has never designed a component for other teams can get through; for a design-system or platform hire that is a mistake, and the fix is to make Component API design a must with a second read — asking for round one's search box as a reusable component is the obvious place for it. Browser security gets one read because frameworks escape text by default, which leaves the risk at a few seams — HTML from markdown or a CMS, URLs, third-party scripts — and round four checks whether the candidate knows where they are. A product that renders a lot of user-written content should make it a must.
There is no competency called coding. Every round has the candidate reading or writing browser code, and a score for the code apart from what it does to the people using it would mostly be a score for style. Nothing here reads visual craft or how the candidate works with designers either; if the job is mainly turning design files into interfaces, add a round for that rather than stretching these four.
Rounds
Round 1 · 60 min
Coding TestScores Async UI state, Accessibility
Round 2 · 60 min
Core Web Vitals review — fast in the lab, slow on phonesScores Web performance, Accessibility
Round 3 · 60 min
Component API review — a dialog for the design systemScores Component API design, Accessibility
Round 4 · 60 min
System design — comments strangers write on product pagesScores Browser security, Async UI state, Web performance
What each round scores
Every must-have is scored in at least two rounds, so no single interview decides it.
| Competency | Round 1 | Round 2 | Round 3 | Round 4 |
|---|---|---|---|---|
| AccessibilityMust-have | Scored | Scored | Scored | Not scored |
| Async UI stateMust-have | Scored | Not scored | Not scored | Scored |
| Web performanceMust-have | Not scored | Scored | Not scored | Scored |
| Component API designNice-to-have | Not scored | Not scored | Scored | Not scored |
| Browser securityNice-to-have | Not scored | Not scored | Not scored | Scored |