ux-proofsheet · competitive design review · sample

Mobile Home — Field Service App

Source: Design Refresh › “Home” · Competitor set: Jobber, Housecall Pro, Stripe, Deel · Generated 30 Jul 2026

A clear step up on hierarchy — the money-owed hero and reordered modules put decisions before shortcuts. Most issues are copy and token hygiene, not structure.

Competitive position: On par → slightly ahead of the field-service market on information hierarchy; behind on copy consistency.

2 High 4 Medium 2 Low 3 Fix before share

Navigation & IA4

UX copy2

Visual & tokens3

Accessibility3.5

The design under review

12:30●●● ▮

☰

Locksmiths

▾

◔

Good morning, RitwikFri, 22 May

You're owed

$3,892

7 open invoices · 2 overdue

Send remindersCollect

Needs attention 4Show all

2 disputes · $2,322

Respond within 7 days to avoid auto-loss

IgnoreReview disputes

Shortcuts

▤

Create invoice

Quick collect

≣

Create estimate

⛭

Create job

Pending invoicesSee all

Sam Altman

Apr 22, 2026

$232.23

7d overdue

Sam Altman

Apr 22, 2026

$232.23

7d overdue

⌂Home

⛭Jobs

≣Estimates

▤Invoices

◍Balance

What it is. The proposed home for a field-service app, reordered around money and decisions. Below, each finding shows a crop of the exact element it refers to and links straight to that layer in Figma. (In this sample the crops are inline mockups; a real report embeds actual Figma screenshots.)

What's working

Priorities before shortcuts. Money-owed and “Needs attention” sit above the create-actions — decisions outrank tools. This is the right call and matches Jobber/Stripe.
Money-first hero. Leading with what you're owed is a deliberate, defensible differentiator for an owner audience (keep it — see D2).
Inline team switcher. Moving the switcher into the header resolves the team's own canvas note about the old popup — good response to feedback.

UX copy & terminology

C1“Ignore” on a financial-dispute alert is harsh — it tells the user to walk away from money owedHIGH

Element · C1

2 disputes · $2,322

Respond within 7 days…

IgnoreReview disputes

Pairs Review disputes with Ignore — which reads as dismissing money at stake.

Fix

Use Dismiss or Not now — non-destructive, keeps the safe action primary.

Backs

Deel uses Pay / Review; Klarna frames overdue alerts empathetically (benchmark).

Layer

Open in Figma ↗ · 575:4638

C2“Quick collect” breaks the verb pattern of the other actionsMEDIUM

Element · C2

Create invoice

Quick collect

Create est.

The other three read Create invoice / estimate / job; Quick collect breaks the pattern and is ambiguous alone.

Fix

Consider Collect payment for parallelism and clarity.

Layer

Open in Figma ↗ · 575:4616

Visual & design tokens

D1Misspelled token names will ship into codeHIGH

Bound vars

outline-deafult
nuetrals/white
text/header
brand/blue

Variables on this frame include outline-deafult and nuetrals/white — they flow straight into generated CSS and are painful to rename later.

Fix

Correct to outline-default / neutrals/white in the library before the refresh propagates.

Layer

Open in Figma ↗ · 529:14090

D2Money-owed hero is a deliberate divergence — keep itLOW

Element · D2

You're owed

$3,892

7 open · 2 overdue

Most field-service homes lead with the schedule; this leads with a You're owed $3,892 hero.

Note

Differentiator Money-first is the consumer-fintech move (Afterpay, Revolut) and a defensible edge for an owner audience — protect it, don't normalize it away.

Layer

Open in Figma ↗ · 529:14078

Pre-review blockers — placeholder data

P1–P3Dummy content that will distract stakeholdersFIX BEFORE SHARE

Pending invoices

Sam Altman$232.23

Every invoice row reads Sam Altman · Apr 22; the leaderboard lists Arlene twice; badges carry trailing whitespace. Not design flaws — but reviewers fixate on them. Swap in varied, realistic data first.

Layer

Open in Figma ↗ · 575:4842

Accessibility (WCAG 2.1 AA — computed)

A1Disabled/meta grey fails AA for normal textMEDIUM

Contrast · A1

Apr 22, 2026

#798087 on #fff

Computed from your tokens: #798087 on #fff = 4.0:1 — fails AA for normal text (needs 4.5:1); passes for large/UI only. The overdue-red #b50012 on #ffe8ea = 6.05:1 is fine.

Fix

Darken the meta/disabled grey to ≥ #767676 (4.54:1 on white) or reserve #798087 for large text only.

Layer

Open in Figma ↗ · 575:4820

Benchmark — real apps

✓ Pulled live from Mobbin — real shipped screens, including your direct competitor Jobber. Each card notes what to borrow and which finding it backs. (Placeholders shown in this sample.)

Jobber

Jobber View ↗

“Business health” groups Quotes / Jobs / Invoices, each with a trend pill.

Backs: business-overview layout · note Jobber labels the tab “Schedule”, not “Jobs” (counter-evidence)

Deel

Deel View ↗

“Upcoming actions” card whose buttons read Pay / Review — constructive, never “Ignore”.

Backs: C1 (verb choice on the disputes card)

Afterpay

Afterpay View ↗

“Total owed $38.28” as a big-number hero with one primary action.

Backs: D2 (money-owed hero — the differentiator)

Prevalence — what the design already matches

Pattern in your design	Apps that do it	Prevalence
Bottom tab bar (5 tabs)	Jobber, Housecall Pro, Square, most SMB apps	universal
“Needs attention” stack on home	Amazon, Deel, Remote	common
Money-owed hero as the first module	Afterpay, Revolut (rare in field-service)	rare

Prioritized next steps

Swap placeholder data for realistic content before any stakeholder review (P1–P3).
Reword “Ignore” → “Dismiss / Not now” on the disputes card (C1).
Correct the misspelled tokens in the library — deafult / nuetrals (D1).
Align the shortcut verb — “Collect payment” (C2) — and keep the money-owed hero (D2).

Recommended follow-ups

For deeper passes this review only samples, hand off to the sibling skills:

design:ux-copy — a full voice/tone pass; C1/C2 are the worst offenders, but the greeting, promos, and empty states want a consistent voice.
design:accessibility-review — a complete WCAG audit; this pass computed contrast only (A1) — focus order, targets, and dynamic type still need checking.
design:design-system — token consolidation; the misspelled and duplicate values (D1) suggest a library cleanup is due.

Illustrative sample generated by ux-proofsheet. The design mock and per-finding crops stand in for Figma get_screenshot() output; a real report embeds actual screenshots (via scripts/embed_images.py) and “Open in Figma” deep-links to each layer. Content is fictional; app names are real public products used as benchmark references. Scores anchored in the findings above.