UX is about how easily a person reaches their goal; UI is about how the interface looks and feels along the way. Conversion is cut most by extra steps, an unclear first screen, slow loading and a loss of trust at the payment stage. The cure is repairing specific journeys, not changing the palette.
Key takeaways
UX (user experience) is how a person reaches a goal inside a product: which tasks they solve, which screens the path is made of and what happens after every action, errors included. UI (user interface) is the layer through which that path is perceived: composition, colour, typography, icons and element states.
| Question | UX | UI |
|---|---|---|
| What it covers | Journeys, structure, the logic of transitions and errors | Composition, colour, typography, element states |
| What it produces | A screen map, journeys and a clickable prototype | Layouts for every screen and a component library |
| How it is checked | Journey tests with people, step-by-step conversion | Contrast, legibility, consistency of components |
| Cost of a mistake | Reworking the structure and part of the back end | Editing styles inside finished components |
A working metaphor is a flat: UX is the floor plan, UI is the finish. A beautiful finish will not save a flat where the only way into the kitchen runs through the bedroom. Mobile apps follow rules of their own — touch target sizes, system gestures, safe areas — and those are covered in our article on mobile app UX/UI design.
Conversion is the share of people who reach the target action. The interface moves it through four things: how clear the first screen is, how long the path is, how predictable the response feels, and how much trust there is at the moment money or data changes hands.
The consequence is straightforward: only a minority reaches payment, and every extra step takes its share of that minority. So the work is done on a specific path — from the first screen to order confirmation — rather than on "the website" as a whole.
Example In the SIMACH project, booking a dinner takes 35 seconds, and a guest who has already left their details is not shown the form at all. What was shortened was the number of steps, not the wording on the button.
Retention is decided on the first run and on empty screens — the places where a person has no data of their own yet. The Harvard Business Review overview is a reminder of why this pays: acquiring a new customer costs five to twenty-five times more than keeping an existing one.
Roles are an underrated part of retention in internal systems. In the SHUMI project, the clothing brand's staff and the agency's managers work in one CRM but see different sets of data: the client record is shared, while each person's workplace is their own.
A slow interface feels broken, and that is measurable. Google reduced the feel of a page to three indicators — Core Web Vitals — and set a "good" threshold for each, assessed at the 75th percentile of page loads, segmented across mobile and desktop.
| Metric | What it measures | Good threshold |
|---|---|---|
| LCP | When the main element of the screen appears | 2.5 seconds |
| INP | The response to a person's action | 200 milliseconds |
| CLS | Content shifting during loading | 0.1 |
Design moves all three: heavy images and fonts stretch loading, a banner with no space reserved for it shifts the content under a finger, and animation without feedback makes a fast system look slow. That is why these thresholds belong in the layout rather than in a report after launch.
Accessibility is not a separate version of a site for special users but a set of requirements everyone benefits from: contrast helps in sunlight, larger targets help on a bus, the keyboard helps people who work fast. The requirements are gathered in WCAG 2.2, published by the W3C on 12 December 2024.
Mobile apps answer to stricter platform minimums — 44 by 44 pt at Apple and 48 by 48 dp at Android; those are covered in the piece on mobile app interfaces.
The order of stages matters: the visual language is laid over a tested structure, not the other way round. Below are the steps and what the client keeps after each one.
Fixing a structural mistake on a prototype costs markedly less than fixing it in a finished product: in the first case a scheme is redrawn, in the second the front end, the back end and everything already built on top of them.
The result of the work is not a set of pictures but a kit the product can be built from and developed further without a designer at hand.
Interface quality is measured by how people behave, not by opinions about a layout. Two kinds of data are needed: numbers that show where users are lost, and observation that explains why.
Observation costs less than people expect: back in 2000 the Nielsen Norman Group showed that the best results come from testing no more than five users, provided the test is repeated several times over. Five people surface most of the problems in a journey, and the next ones mostly repeat what has already been found.
We do not sell "UX/UI design" as a separate service with its own price: design is part of building the product, alongside front-end work, programming and analytics. The reference points are the format prices on our website development page.
What each format includes, and how a landing page differs from a multi-page site, is set out in our pieces on landing pages for business and launching an online store. The amount of design inside a project is driven by the number of unique screens, the number of states and roles, the need for a design system and the interface languages.
We start with the journey and the data rather than a layout: which steps a person takes towards the goal, where the data on each screen comes from, and what the system does when something goes wrong. The prototype is tested with people before visual styling and code are invested in the interface, and only then is the UI kit assembled.
Design does not live apart from development here: the interface, the build, the integrations and the analytics are handled by one team, so the specification does not drift from what is finally assembled. If the product is already live, we start with a diagnosis rather than a redesign: where people leave, what support is asked about and which screens are slow.
Let’s discuss your project
Tell us what you need, and we will estimate the timeline and cost and suggest a solution.
The saving is deceptive: a logic error then surfaces in the finished product, and you rebuild the front end and back end instead of just a diagram. A prototype with no visual styling is tested on real people before any money goes into design and code.
Diagnosis first: which step of the journey loses people, what support gets asked about, which screens are slow. You fix the steps you find — changing the colour palette won't bring conversion back.
Five, but tested several times as the work progresses: Nielsen Norman Group data shows five people surface most of a journey's problems, and further participants mostly repeat what's already been found. Several short tests pay off better than one big test at the end.
An app adds platform rules: the minimum touch target sizes set by Apple and Google, system gestures, safe areas, permissions and offline behaviour. The journey logic is shared, while navigation and screen states are designed separately for iOS and Android.
At launch it changes mode: the product starts collecting data on real behaviour, and the interface is refined against it. The usual cycle is a hypothesis, a change on one screen, a check against the conversion of that step. Full redesigns are needed far less often that way.
We don't sell it separately: design is part of product development. A landing page starts from $1,200, a business card website from $1,900, an online store from $10,000; within a project, the amount of design work grows with the number of unique screens, states, roles and languages.
Three Core Web Vitals thresholds — page-speed metrics that must be met on three visits out of four: the main screen element appears within 2.5 seconds, response to a tap is under 200 milliseconds, and the layout barely shifts while loading. Heavy images and banners with no reserved space break these numbers already at the design stage.
