Looking for work with a US company? Apply to the Rolemote talent roster — free →

The brief they were screened against

Role: Web Designer · Band: $900–1,600/mo

Must-haves: designs marketing pages in Figma mobile-first, explains hierarchy decisions, hands off a file a developer can build without guessing, pushes back on a reference-led brief with data

Nice to have: Webflow or WordPress builds, components and design systems, basic accessibility (contrast, tap targets)

Scored by the same rubric the production screener runs on real applicants (design, claude-sonnet-4-6), on 2026-09-23. Nothing below was edited afterwards — including where it went against a candidate. The rubric and weights are published.

Lucía H.

SCREEN 84/100

Argentina · asking $1,500

Screening notes

Strongest evidence is the physiotherapy work sample: the candidate supplies unprompted specifics the form did not give them — the 40px/64px/18px type scale, the 2,400px scroll problem caught via Clarity, the 4-variant font-weight load cost, and the self-identified tablet failure at 768px, all of which read as someone who lived the project rather than dressed it up. The scenario answer is structurally excellent — separates intent from layout, names the three GA4 numbers to pull before replying, proposes a 30-day split to settle disagreement, and explains why hover cards and side-column heroes fail on touch; this is reasoning about behaviour, not taste. The Figma toolchain (auto layout, number variables with Mobile/Desktop modes, Dev Mode, Client-First Webflow) is named with enough operational specificity to be credible at interview. The main concern is that the work sample is a single project and the live URL is not provided, so conversion numbers and the Figma file remain unverified; the claim of 30 homepages is stated but no second project is described in detail, leaving depth of range untested. At $1,500 against a $800–1,700 band and full Eastern-hours coverage, verdict is advance to portfolio/call stage — this is a top-10% submission for the role brief but falls short of the 85+ bar because range evidence is thin and the file cannot be inspected.

Experience

6 years designing marketing sites, the last 4 at a Buenos Aires studio working for US software and subscription companies: about 30 homepages and landing pages, designed in Figma and built in Webflow, half of them by me. I design the mobile frames first and hand off with components, variables and notes written for a developer who has never seen the project. Best result: a homepage redesign for a US physiotherapy scheduling platform, after which mobile demo requests went from 0.9% to 1.6% of sessions over eight weeks while desktop stayed flat — so the change was the mobile page, not the traffic.

Scenario answer

I wouldn't start by saying no to the references. The client is telling me something real with them; my job is to work out what, and separate it from the layout that came along with it. Before I reply, I look past the 68%. Three numbers matter more: what share of enquiries (GA4 key events) come from mobile, the mobile conversion rate against desktop, and which pages mobile visitors land on. If mobile is 68% of visits but only 35% of enquiries, either the mobile page is losing people or they come back on a laptop to enquire — ten Microsoft Clarity recordings of mobile visitors usually show which in a few minutes. Then a 30-minute call with the three sites open. My questions: 1. What exactly do you like in each one? It's usually the confidence of the headline, the photography or the type — rarely the three-column grid. 2. What is the one thing a visitor should do on this homepage: book, buy, call? 3. Where does the mobile traffic come from? Someone arriving from an Instagram ad behaves differently from someone who searched your name. 4. Who builds it, and in what? That changes how I hand off. What I push back on: copying the layouts. Each reference was designed for a wide screen — a hero with the button in a side column, hover effects, a feature grid that becomes a very long scroll on a phone. I can give them the feel of those sites; I shouldn't give them the structure, because two-thirds of their visitors will never see it the way it was designed to be seen. What I deliver instead: - The mobile homepage first, at 375px, then the desktop version — both finished, neither stretched from the other. - A one-page 'reference translation': for each site, what I kept (say, the serif headlines from the first, the product photography from the second, the customer-logo strip from the third) and what I dropped and why — hover cards don't exist on a touchscreen, and an autoplay hero video costs load time on a phone. - A file a developer can build without asking: auto layout throughout, spacing and type as variables, every button state drawn, and a note on what changes between breakpoints. If they still want a copy of the first reference after all that, it's their site. I'd design it, show its mobile version next to mine, and ask that we compare mobile enquiries for 30 days after launch.

Work sample

WORK SAMPLE — homepage redesign for a US scheduling platform for physiotherapy clinics (live since last year; I can walk through the Figma file on a call) CONTEXT: 71% of visits on mobile, most from paid social. The old homepage was a desktop design squeezed down: a 4-slide carousel, two equal buttons ('Book a demo' and 'See pricing') and a 3-column feature grid. 1. HIERARCHY — ONE HEADLINE, ONE BUTTON, ONE COLOUR. I replaced the carousel with a single headline in the clinic owner's words — 'Fill cancelled appointments before they cost you' — and made 'Book a demo' the only filled button on the page, in the only saturated colour. 'See pricing' became a text link beneath it. The eye goes to the headline first because it's the largest type by a clear step (40px on mobile, 64px on desktop, against 18px body), then to the one coloured shape. Two equal buttons had asked visitors to choose before the page had told them anything. 2. MOBILE — THE RECOMMENDED PLAN FIRST. On desktop the three plans sit side by side. Stacked on a phone, comparing them meant about 2,400px of scrolling, and Clarity showed most visitors never reached the third. On mobile the plan most clinics buy comes first and fully open, the other two collapsed below it, and a sticky 'Book a demo' bar appears once the hero scrolls away. Every tap target is at least 44px high, and the sales number is a tap-to-call link, which the old site didn't have. 3. SPACING — A SEPARATE MOBILE SCALE. The old site used 120px between sections on every screen, so on a phone nearly a third of the scroll was empty. I set up an 8-point scale as Figma number variables with a Desktop mode (96px between sections) and a Mobile mode (48px), so the same components change spacing when the frame's mode changes, and the developer builds the scale once instead of guessing per section. RESULT: mobile demo requests went from 0.9% to 1.6% of sessions over the next eight weeks; desktop stayed at about 2.3%. WHAT I WOULD CHANGE: I designed the tablet width last, and it shows — at 768px the plan cards are awkwardly wide. I'd design it as its own frame instead of letting it fall between the other two. I'd also load two font weights instead of four; the extra two cost load time on phones for very little.

Gerald R.

SCREEN 79/100

Philippines · asking $1,150

Screening notes

Strongest concrete evidence: the candidate supplies unprompted specifics that the questions did not provide — the 20+ developer questions after handoff, the 240px hero crop on a 375×667 baseline, the 56px tap-target rationale, the sticky bottom bar with two distinct CTAs, and the honest seasonal-confound caveat on the 90→140 call lift — all of which indicate real build experience rather than described taste. The scenario answer shows genuine data-first instinct (checking GA4 event splits, requesting call-tracking before arguing layout) and client-management maturity (isolating what they actually like before pushing back). Biggest concern: Figma competence is self-described as developer-handoff weak until recently, Dev Mode annotation is still 'learning', and no evidence is offered of designing for a developer other than themselves — the 20-question story is reassuring but it is a single anecdote; a more rigorous candidate would show a current annotated file or name a specific variable/token convention. Verdict: advances to interview; rate is fair mid-band; the role's must-have around handoff quality should be probed with a live Figma file review.

Experience

5 years designing websites for US home-service businesses — plumbers, HVAC and roofing companies — at a Cebu agency that builds on WordPress. About 60 sites, most of them redesigns, and on these sites the phone is the business: most leads are calls from someone whose AC or water heater just stopped. I design in Figma and usually build my own designs in Elementor. I measure through the client's call tracking: my best redesign took a Phoenix HVAC company from about 90 calls a month from the website to 140 within two months, though summer started in the same period, so not all of it is mine.

Scenario answer

First I check the data behind the 68%, because pushback is only as good as its numbers. In GA4 I compare mobile and desktop on key events — form submissions and tap-to-call clicks, if those are tracked; on half the sites I inherit, they aren't — and I look at which pages mobile visitors land on. For a service business I also ask for the call-tracking report, because many mobile leads are phone calls that never touch a form. Then I do the thing that usually settles it: I open each reference site on my phone and take full-length screenshots. A desktop-first site on a phone looks like what it is — a small hero, a phone number hidden in the menu, a feature grid that becomes a long scroll. I put those next to the client's own mobile homepage and send them with one line: 'This is how 68% of your visitors would see the design you like.' Questions I'd ask: - What do you like in each site — the colours, the photos, the tone? Usually it's one or two things, and those I can keep. - What does a good lead look like: a call, a booked appointment, a form? - Is there anyone else whose opinion decides this? - Do you have real photos of your team and your trucks? Stock photos are the first thing I'd replace. What I push back on: copying their layouts. I keep what the client likes about the look and design the page for the phone first — the phone number and one clear headline in the first screen, a sticky bottom bar with 'Call now' and 'Book online', and the reviews moved up, because trust is what makes someone call. How the deliverable differs: the mobile homepage is the main design, the desktop version comes second, and I present it on a phone, not on a big monitor, because that's where most of their customers will see it. One honest note: I usually build my own designs in Elementor, so my Figma files have been written for me. If another developer builds this one, I'd put extra time into the handoff — layer names, spacing values, every button state — because I've learned that what's obvious to me isn't obvious to them.

Work sample

WORK SAMPLE — homepage redesign for a family-owned HVAC company in Phoenix (WordPress, built by me in Elementor) THE PROBLEM: 82% of visits were on mobile, and the old homepage opened with a stock photo of a family on a sofa and 'Welcome to our website'. The phone number was inside the hamburger menu. 1. HIERARCHY — THE PROMISE AND THE PHONE. The first screen now says 'Same-day AC repair in Phoenix' in the largest type on the page, with the Google rating (4.8 from 600+ reviews) right under it and one orange 'Call now' button — the only orange on the page. The eye lands on the headline because of its size and position, then on the only warm colour. The stock family moved out and the company's own technicians and trucks came in. 2. MOBILE — A STICKY CALL BAR. On phones a bar stays fixed at the bottom with 'Call now' (a tap-to-call link) and 'Book online', 56px tall so it's easy to hit with a thumb. The 3×3 grid of service icons became a list of tappable rows, each 56px high, because nine small icons on a phone are hard to read and harder to tap. 3. DENSITY — FIT THE FIRST SCREEN. The old hero image was 520px tall on mobile and pushed everything useful below the fold. I cut it to a 240px strip and tightened the spacing so the headline, the rating and the call button all fit on a 375×667 screen, the smallest one we still test on. RESULT: calls from the website went from about 90 a month to 140 in the first two months (CallRail), with the caveat that summer started in the same period. WHAT I WOULD CHANGE: because I built it myself, the Figma file was really a sketch of what I then built in Elementor. When the client later moved to another developer, that developer sent me more than 20 questions about hover states, breakpoints and spacing. Now I annotate states and spacing in the file, set spacing as variables and use Dev Mode, so the file answers those questions without me.

Palesa M.

SCREEN 62/100

South Africa · asking $1,000

Screening notes

Strongest evidence: four years at a named Johannesburg agency handing Figma files to WordPress developers is a real, relevant workflow that matches the must-haves, and the mobile-first data point (68% mobile traffic) in the scenario answer shows she can frame a design decision in a business rationale rather than pure taste — though that figure was supplied by the form, so it is not independent evidence of analytical habit. Biggest concerns: the work sample describes outputs (big headline, stacked columns, hamburger menu) without explaining the hierarchy logic — she never says why 'Contact us' is the CTA over a lead-capture form, what the accounting firm needed visitors to DO, or how she resolved any tension between client preference and user need; the scenario answer similarly lists discovery questions and procedural steps but never pushes back on the reference-led brief with data or proposes an alternative structure, which is the stated must-have. No mention of component organisation, spacing tokens, auto-layout, or developer annotation in her Figma files, so handoff quality is unverified; 'What I would change' defaults to animations rather than identifying a real hierarchy or conversion problem. Verdict: competent junior-to-mid practitioner with the right tool stack and genuine agency experience, but answers operate at the level of visual execution rather than design reasoning; advances to a Figma file review and one structured interview question on hierarchy decisions…

Experience

4 years as a web designer at a Johannesburg digital agency, designing websites for small and medium businesses — accounting firms, a private school, restaurants and a car dealership. I design the layouts in Figma and hand them over to our developers, who build them in WordPress. I am passionate about clean, modern design and creating user-friendly websites that represent the client's brand well. I work well with clients and I am good at understanding what they want.

Scenario answer

When a client sends three competitor websites and asks me to make their homepage look like them, I would first study the reference sites carefully to understand what the client likes about them — the colours, the layout, the fonts and the overall style. I would let the client know that since 68% of their traffic comes from mobile, it is very important for the new design to work well on mobile devices. I would suggest that we take inspiration from the reference sites rather than copying them directly, so that the website is unique to their brand. Some questions I would ask: What do you like most about each reference site? What are your brand colours and fonts? What is the main goal of the homepage? Who is your target audience? For the deliverable, I would design the desktop homepage in Figma based on the style of the references, and then create a mobile version that is fully responsive, with the columns stacked and a hamburger menu. I would make sure the buttons are big enough to tap and the text is easy to read on a small screen. This way the client gets the look they want, and their mobile users still get a good experience.

Work sample

WORK SAMPLE — homepage redesign for an accounting firm in Johannesburg The client's old website looked outdated and was hard to navigate, so they wanted a fresh, modern design that would make the firm look more professional. 1. VISUAL HIERARCHY — I used a large hero image of the team with a bold headline and a 'Contact us' button on top of it, so it is the first thing visitors see. I made the headline bigger than everything else so it stands out. 2. MOBILE LAYOUT — On mobile I stacked the three service columns on top of each other and changed the navigation into a hamburger menu to save space. I also made sure the contact button is easy to tap. 3. SPACING — I used generous white space between the sections to make the design feel clean and modern and easier to read. WHAT I WOULD CHANGE — I would add some subtle animations to make the page more engaging, and I would spend more time testing the mobile version on different phones, because some of the spacing looked too big on smaller screens.

This is the artifact every search delivers

Post the role and the same screener runs on your real applicants — the questions arrive already written, and you read every finalist in full before any fee is due.

Post a role free Or have us run the search

The same screener, other roles

Sample shortlist: Web Designer | Rolemote