Design preview
Two colour directions on the same screens. Switch between A, red and black and B, blue and white with the toggle in the bar at the top. Customer screens can also be seen at mobile, tablet and desktop size with the device switch beside it. Best viewed on your phone.
Ready to review
Marketing
1 screen · Mobile, tablet and desktop.
Customer app
15 screens · Phone first, also tablet and desktop.
C1
Start and pricing
What this costs, what happens next, "Request a locksmith". Entry from the landing page and the installed app. With a live job, it leads with that job instead.
4 states
C2
Where are you
Address search, confirm the pin on a small map, flat or access notes.
4 states
C3
What's happened
Issue type, short description, one photo of the problem.
4 states
C4
About you
Name, mobile, email for the receipt, entitlement declaration, text opt-in.
3 states
C5
Estimated arrival
Quoted ETA including the van collection leg, or a quoted wait if the van is out.
3 states
C6
Secure your booking
£170 hold explained, card entry, "Authorise and book".
4 states
C7
Log in to track
Mobile number and a six-digit code by text.
4 states
C8
Job status
The main screen for the life of the job: status, step timeline, the firefighter, ETA and the live map.
11 states
C9
Live map
Van position from the firefighter's phone. Built into C8.
3 states
C10
ID check notice
What the firefighter will ask for at the door, and why.
3 states
C11
Check this over, then pay
Itemised time, labour, parts, total, amount held, balance. "Confirm and pay".
3 states
C12
Receipt
Paid, receipt emailed, what to do if something is wrong.
C13
Cancel
Free before acceptance, £25 once set off, not on site.
3 states
C14
Your jobs
Past jobs with receipts.
2 states
C15
Install prompt
Add to home screen.
3 states
Crew app
14 screens · Phone only. The crew install it on their home screen.
F1
Login and install
Mobile number and code. First run: add to home screen (iPhone and Android) and allow notifications, because push on iPhone only works once installed.
5 states
F2
Home
Logged in for work or not, who has the van, today. The only thing a firefighter has to do is flip the switch.
5 states
F3
Job offer
Full-screen alert: area, issue, photo, distance, van, countdown, Accept and Pass.
5 states
F4
Collect the van
Where the van is, navigate, "I am at the van", the key box code, then "Open the box, check in and set off". The customer clock starts on that tap.
3 states
F5
On the way
Customer first name, address, navigate, call, "I have arrived". Says plainly that the phone is sharing its position while the screen is open.
2 states
F6
On site
The checklist: ID check, start work, finish work. One step live at a time.
3 states
F7
ID check
Photo of the document, photo at the door, name and address match, attestation. Verify, or flag to ops. Walking away is a real option.
3 states
F8
Work in progress
Billing clock (visible to the firefighter only), parts from the price list, running total. Finish is blocked until the ID check is recorded.
2 states
F9
Work done
Invoice sent, waiting for the customer. If they refuse or go quiet, take payment with the time log in two taps.
4 states
F10
Drop this job
Two-tap confirmation, what happens to the van, who is told.
2 states
F11
Return the van
Keys back in the box, check out. Or record where the van was left.
2 states
F12
Earnings
This month: hours by tier on both clocks, Van Lead hours, estimated pay, with the part-hour rule stated. Past months.
F13
Van Lead panel
Set or change the key box code, see who has the van, and the custody log. Van Lead only.
2 states
F14
Push and text settings
Notification permission, how to switch it back on, and the text fallback number.
2 states
Admin
8 screens · Desktop first, still usable on a phone. Opens at desktop size.
A1
Login with 2FA
Email, password, then an authenticator code.
3 states
A2
Jobs list
All jobs, filtered by status, with flags in plain sight: ID flagged, payment failed, lost, dropped. Updates live.
3 states
A3
Job detail
Timeline with timestamps, customer, firefighter, ID evidence, payment with a link to Stripe, van custody, and the override actions.
4 states
A4
Override
Reassign to a named firefighter, cancel with a fee choice, or mark lost. Each needs a reason and a confirm step.
4 states
A5
Live map and team
Who is logged in, who holds the van, positions while en route, the van base.
A6
Team
Crew list, brigade approval with expiry, suspend switch, add a firefighter.
2 states
A7
Payroll export
Month picker, hours by tier per firefighter, CSV per person or for everyone, and what is in it.
A8
Settings
Offer windows, broadcast window, text escalation, pay clock and increment, cancellation fee. Read-mostly in v1, every change versioned.
2 states
System
3 screens · Shared across the apps.
S1
Error and offline
Something went wrong, you are offline, session expired. Each says what to do, and for the customer includes the phone number to call.
4 states
S2
Legal
Privacy notice, terms and cookies. The template, with placeholder text until the solicitor supplies it.
3 states
S3
Notifications
Every text, the job offer push and the email receipt, in plain text with SMS character and segment counts.
Foundations
What every screen is built from.
Logo lab
Barlow ExtraBold Italic lockup: flame angle, warm grey, spacing, real contexts, icon sizes and matching headings.
Component library
Every component in every state: buttons, inputs, the countdown, the map, the price breakdown, banners and more.
Colour, type and mark
Both palettes side by side, the type scale and the app icon.
Every v1 screen
The checklist against the brief, with every state of every screen.
Marketing
M1Landing pageDefault · Form submittedReady
Customer app
C1Start and pricingNew booking · Van busy · Nobody available · Job in progressReady C2Where are youSearching · Confirm pin · No match · Outside SheffieldReady C3What's happenedChoose · Camera · Photo chosen · SkippedReady C4About youEmpty · Filled · ErrorsReady C5Estimated arrivalVan free · Van busy · Nobody availableReady C6Secure your bookingCard entry · 3D Secure · Declined · SucceededReady C7Log in to trackSend code · Enter code · Wrong code · ResendReady C8Job statusFinding · Confirmed · On the way · Last seen · At your door · Work in progress · Work complete · Paid · Cancelled · Cancelled with fee · Nobody availableReady C9Live mapLive · Last seen · No position yetReady C10ID check noticeAwaiting · Verified · Could not verifyReady C11Check this over, then payWithin hold · Above hold · Payment failedReady C12ReceiptReady C13CancelFree · Fee applies · Not availableReady C14Your jobsWith jobs · EmptyReady C15Install promptiPhone · Android · ComputerReady
Crew app
F1Login and installLog in · Install on iPhone · Install on Android · Allow notifications · All setReady F2HomeLogged out · Waiting · Van held by me · Van held by someone else · Handoff outstandingReady F3Job offerSolo offer · Group of three · Broadcast · Expired · Someone else took itReady F4Collect the vanGoing to the van · At the van · Handoff locationReady F5On the waySharing location · Location offReady F6On siteJust arrived · ID done · ID after entryReady F7ID checkAwaiting · Verified · FlaggedReady F8Work in progressID recorded · ID missingReady F9Work doneWaiting · Paid · Refused or unreachable · Confirm time logReady F10Drop this jobConfirm · DroppedReady F11Return the vanAt base · Left at jobReady F12EarningsReady F13Van Lead panelOverview · Change codeReady F14Push and text settingsAll on · Push blockedReady
Admin
A1Login with 2FASign in · Authenticator code · Wrong codeReady A2Jobs listTonight · Needs attention · Quiet nightReady A3Job detailID flagged · Payment failed · Lost · PaidReady A4OverrideReassign · Cancel · Mark lost · DoneReady A5Live map and teamReady A6TeamList · Add a firefighterReady A7Payroll exportReady A8SettingsView · Edit a valueReady
System
S1Error and offlineSomething went wrong · Offline · Offline banner · Session expiredReady S2LegalPrivacy notice · Terms · CookiesReady S3NotificationsReady
Showing direction A. Prepared by Ascensor for Lockfighter. Not for public use.