Operational interface design
Back-office and admin screens where people spend their working day. Density, keyboard paths and error recovery matter far more than visual novelty here.
A dispatch desk where the twentieth order is as fast as the first.
Capability
UI/UX Design Services
Interface design for systems people use all day, where a saved click compounds across a thousand repetitions. Flows mapped against the real task with the edge cases drawn, a component library your developers can build from, and accessibility checked rather than assumed.
From $3,000 · 2–4 weeks · fixed scope, agreed in writing
- To a build-ready system
- 2–4 weeksTo a build-ready system
- Drawn, not discovered in build
- Edge casesDrawn, not discovered in build
- Checked with real tooling
- WCAG 2.1 AAChecked with real tooling
- Components, not just screens
- HandoffComponents, not just screens
What your team gets
What is actually delivered
Not a strategy deck. A running system, the permissions around it, and the code in your repository.
- Flows mapped against the real task, with the empty, loading and error states drawn
- Design tokens — colour, type, spacing — as the single source for both design and code
- A component library your developers build from, not a folder of screens
- Responsive behaviour specified, not left to interpretation
- Accessibility verified to WCAG 2.1 AA with real tooling and keyboard testing
- A handoff spec covering states, props, breakpoints and motion
What we build
Six design jobs we take on
Weighted towards the unglamorous end — the interfaces people are paid to use, where small frictions are expensive because they repeat.
Design systems
Tokens, components and the rules for using them — so a feature designed next year looks like the one designed today without anyone policing it.
One component set feeding a web app, a marketing site and a mobile app.
Product and app design
End-to-end design for a customer-facing product, including onboarding and the states nobody remembers to draw.
A member portal from first sign-in to renewal.
Marketing and landing pages
Pages designed to convert, built as templates so the tenth page costs what the second did.
A capability page template that scales to a dozen services.
Redesign of an existing product
Fixing what is measurably wrong rather than restyling everything. We start with where people actually fail.
A checkout reworked around the two steps that lost the most people.
Accessibility remediation
An audit of an existing interface against WCAG 2.1 AA, with fixes ordered by how many users each one affects.
Keyboard traps and contrast failures found and fixed in one pass.
How we build it
How the design gets built the way it was drawn
The gap between a design and what gets built is where most design budget is wasted. Everything here exists to close it: decisions made as tokens and components rather than as pictures, and the awkward states drawn before a developer has to invent them.
- 01
Watch the work
We sit with people doing the task before drawing anything. What they actually do and what the process document says differ every time, and the difference is where the design earns its money.
- 02
Draw the unhappy paths
Empty, loading, partial, error, offline, too-much-data. These are most of real usage and almost none of most design deliverables, which is why developers end up inventing them at 5pm.
- 03
Decide in tokens
Colour, type, spacing and radius defined as named values that map one-to-one onto code. A change to the scale then propagates rather than being reapplied screen by screen.
- 04
Deliver components
The handoff is a component library with states and props, not a folder of flattened screens. It is what makes the build match the design without a week of back-and-forth.
- 05
Verify accessibility
Contrast, focus order, target size and keyboard paths checked with tooling and by hand. Retrofitting accessibility costs several times what designing it in does.
Designing for density
Consumer design optimises for first impression. Operational design optimises for the thousandth repetition, and the two pull in opposite directions. More per screen, fewer clicks, keyboard paths for the frequent actions, and generous targets only where a mis-tap is expensive. We design for the person who has been using it for six months, not the one seeing it for the first time.
- Density
- More per screen for daily users.
- Keyboard
- Full paths for frequent actions.
- Defaults
- The common case pre-filled.
- Undo
- Cheaper than a confirmation dialog.
Tokens as the contract
Design tokens are the one deliverable that survives. When colour, type and spacing exist as named values in both the design file and the codebase, a change is made once. Without them, every design decision is re-litigated in code, and six months later the product has four greys that were meant to be one.
- Colour
- Semantic, not literal hex values.
- Type scale
- A fixed set, not per-screen sizes.
- Spacing
- One scale everything snaps to.
- Motion
- Named durations and easings.
What we do not do
We do not produce a hundred-slide brand exploration, and we do not redesign something that is working to make it look current. If the measurable problem is two steps in a checkout, we fix those two steps. Most of the value in this discipline is in restraint.
Where it lands
What this looks like in your industry
Institutions and membership
Member portals where the users are not frequent and the task must be obvious.
Distribution and logistics
Order desks where the same screen is used several hundred times a day.
E-commerce and retail
Checkout and catalogue flows, redesigned around where people actually drop.
Healthcare and pharmacy
Interfaces where accuracy matters more than delight, and accessibility is not optional.
FinTech and financial services
Dense data interfaces where a misread number is expensive.
Real estate and PropTech
Listing and enquiry flows across desktop and phone.
Technology
What we build agents with, and what we connect them to
We pick the boring option unless there is a reason not to — the framework is the part most likely to be abandoned before your system is.
- Design
- Figma
- Adobe XD
- Figma Variables
- Auto Layout
- FigJam
- Adobe Creative Cloud
- Prototyping
- Systems
- Design tokens
- Storybook
- Tailwind CSS theme
- shadcn/ui
- Radix primitives
- Accessibility
- WCAG 2.1 AA
- axe DevTools
- VoiceOver
- NVDA
- Contrast and focus audits
- Research
- Contextual enquiry
- Usability testing
- Maze
- Session review
- Funnel analysis
- Handoff
- Component specs
- State matrices
- Breakpoint rules
- Motion specs
- Figma Dev Mode
- Front end we hand to
- React
- Next.js
- Flutter
- TypeScript
- Tailwind CSS
How the engagement runs
Five phases, each with something you can hold
Every phase ends in a named deliverable. You can stop after any of them and keep what has been built.
- 01Week 0
Discovery call
Who uses it, how often, and what currently goes wrong. If the answer is "it looks dated" we will ask what that is costing before agreeing it is the problem.
DeliverableA written next step, free - 02Week 1
Watch and map
Time with the people doing the task, the real flow mapped including the awkward paths, and agreement on what the design is actually meant to improve.
DeliverableTask flows and a measurable objective - 03Weeks 2–3
Design the system
Tokens, key screens and the components behind them — designed as a system so screens that do not exist yet will still fit.
DeliverableTokens, key screens, component set - 04Week 3
States and accessibility
Empty, loading, error and edge states drawn, contrast and focus order checked, keyboard paths defined for the frequent actions.
DeliverableState matrix and accessibility report - 05Week 4
Handoff
A component library with props and states, responsive rules, motion specs, and a walkthrough with the developers who will build it.
DeliverableComponent library, handoff spec, walkthrough
Why Devs Core
Six reasons that are checkable
We design for the thousandth use
Operational interfaces are judged on repetition, not first impression. Density and keyboard paths beat novelty.
The unhappy paths are drawn
Empty, loading, error and partial states are most of real usage and almost none of most design deliverables.
Tokens, not pictures
Named values mapping one-to-one onto code, so a change is made once instead of reapplied screen by screen.
Handoff is components
A library with states and props, not a folder of flattened screens. It is why what ships matches what was designed.
Accessibility is verified
Tooling plus keyboard and screen-reader testing to WCAG 2.1 AA. Retrofitting it costs several times more.
We will tell you not to redesign
If the measurable problem is two steps in a flow, we fix those two steps rather than selling you a rebrand.
Questions
UI/UX Design — the questions we get asked
What is included in a UI/UX design engagement?
Time with the people who do the task, the real flows mapped including the awkward paths, design tokens for colour, type and spacing, key screens, a component library with states and props, responsive and motion specifications, an accessibility check to WCAG 2.1 AA, and a walkthrough with the developers who will build it.
How much does UI/UX design cost?
UI/UX design starts at $3,000 over two to four weeks for a fixed scope agreed in writing. The variables are the number of distinct flows, whether a design system is being created or extended, and whether user research beyond stakeholder interviews is needed.
Do you do design without the build?
Yes. The handoff is a component library with a specification, deliberately built so another team can implement it — including your in-house developers. A design that only we can build is a design that has failed.
How do you make sure what gets built matches the design?
By delivering decisions rather than pictures. Tokens map one-to-one onto code variables, components are specified with their states and props, breakpoint behaviour is written down, and there is a walkthrough with the build team. Most divergence between design and build comes from states nobody drew.
Is accessibility part of the work or an extra?
Part of it. Contrast, focus order, target size and keyboard paths are checked with axe plus manual keyboard and screen-reader testing against WCAG 2.1 AA. Designing it in costs a fraction of retrofitting it, which is the entire argument.
Do you do user research?
We do contextual enquiry as standard — watching people do the actual task, which is where most of the useful findings come from. Formal usability testing, surveys and funnel analysis are available where the decision genuinely needs them, and we will say when it does not.
Can you work with our existing brand?
Yes, and usually should. We take an existing brand into tokens and components rather than proposing a new identity. Where the brand genuinely blocks usability — contrast failures being the most common — we will show you the specific conflict rather than argue for a rebrand.
Our product just looks dated. Is that enough reason to redesign?
Not on its own, and we will ask what it is costing before agreeing. If the answer is a measurable drop-off, a support burden or a sales objection, that is a real brief. If it is only unfamiliar to look at, a restyle of the components is usually cheaper and safer than a redesign.
Tell us which process is costing you.
Thirty minutes, no preparation, no deck. You describe what keeps going wrong and we tell you whether AI is the answer — including when it is not.
Prefer email? contact@devs-core.com