UX/UI design decides how a digital product works (the user experience) and how it looks and behaves on screen (the user interface). For a decision maker the question is not the definitions but the return: well-made UX/UI design raises conversion, cuts support requests and makes development cheaper, because fewer screens are built twice. In our experience its cost has fallen in the last two years, since AI now carries the repetitive production (component variants, first drafts, image preparation, testing), while research, the concept, art direction and the final craft stay human work, and that is where the money should go. This guide explains the two halves plainly, which research is worth paying for, how journeys, wireframes and interfaces fit together, why a design system matters, what to expect on cost and time, and how to choose a design partner.
What is the difference between UX and UI?
User experience design is about structure and behaviour: what people are trying to do, which steps they take, what they need to know at each step and where they get stuck. Its outputs are research findings, user journeys, site maps and wireframes.
Interface design is about presentation: typography, colour, spacing, components, states and motion. Its outputs are finished screens, prototypes and a component library.
The two cannot be bought separately with any success. A handsome interface on a confusing journey still loses people; a logical journey with a careless interface feels untrustworthy. Product design is the term often used when one group holds both, together with the commercial goals of the product.
Which research pays for itself?
Research is the part of a project most often cut, and the part whose absence costs most later. The aim is not a thick report. It is to replace assumptions with evidence before anyone builds anything, and to do it in days, not months.
What to decide first
- Who the main users are, and which tasks matter most to them and to the business.
- What you already know: analytics, support tickets, sales calls, previous studies, the reasons customers give for leaving.
- The riskiest assumption in the project, and the cheapest way to test it.
A handful of short interviews with real users, read alongside analytics and support questions, usually reveals most of the significant problems in a journey, and that is enough to start designing with confidence.
What to leave for later
Large surveys, long persona documents and month-long discovery phases rarely earn their cost on a small or medium project. Start with targeted research, then test as you design. If the product is new, treat the first release as research too.
At Odduel, AI does the sorting: it transcribes and clusters interview notes, summarises tickets and spots patterns in feedback. Designers spend their time talking to users and making decisions, and the findings are checked by the people who were in the room. The same division of labour runs through our AI development work: the machine does the volume, people do the judgement.
Flows, wireframes, interfaces
Design moves from abstract to concrete in three steps. Each one answers a question you should be able to ask at review.
| Step | The question it answers | What you review |
|---|---|---|
| User journey | Which steps does a person take to finish a task? | A diagram of the path, with the exits |
| Wireframe | What goes on each screen, and in what order? | Grey layouts with real content |
| Interface | How does it look, feel and respond? | Finished screens and a clickable prototype |
- Journeys. A journey maps the steps to complete a task: sign up, request a quote, check out. It exposes unnecessary steps before a single screen is drawn, and it is where most of the conversion is won or lost.
- Wireframes. Low-detail layouts that settle structure and priority. They are cheap to change and keep the discussion on content and order rather than colour.
- Interfaces. The full visual design, built on the brand, with every state (empty, loading, error, success) designed rather than left to the developer to guess. If the brand is unsettled, read our branding guide first.
An example. Nothing To Eat, a sandwich brand in Amsterdam, needed a website that sells before it explains. The journey was reduced to one decision: a visitor who wants to order is sent straight to the menu, on the same page, and everything else stands around that path rather than in front of it. One page, one task, every screen state drawn before the build began.
What is a design system, and do you need one?
A design system is a shared library of components, rules and tokens (colours, type sizes, spacing) used by designers and developers alike. It is what keeps a product consistent as it grows and as new people join it.
What it does for the business:
- Speed. New pages and features are assembled from tested parts.
- Consistency. Buttons, forms and messages behave the same everywhere.
- Quality. Accessibility and performance are built into each component once.
- A lower cost of change. A brand update is applied in one place.
A design system does not need to be large to be useful, and it is also where AI has changed our work most visibly: the variants of a component, the code behind it and its tests are produced in hours and then reviewed, which is why our website development and application development projects start from a system rather than a blank screen. Our website development guide follows the system through to the build.
Testing
Testing closes the loop between design and reality. Useful methods, from the cheapest to the most involved:
- Five-second tests on a key page: what do people remember?
- Clickable prototype tests with a few users per round, before any code exists.
- Accessibility checks against the WCAG 2.2 criteria: contrast, keyboard use, labels, focus.
- Analytics after launch: where do people leave a journey?
- A/B tests for high-traffic pages where small differences matter.
Test early with rough prototypes: changing a wireframe costs minutes, changing a coded feature costs days. Automated checks, including AI-based ones, catch a useful share of problems across many screens at once; they do not catch everything, so we add manual keyboard and screen reader passes before anything goes live.
Why build accessibility in from the first wireframe?
Accessibility works far better as a design principle from the first wireframe than as a final check, and it is now a legal expectation for many products: the European Accessibility Act applies to a wide range of digital products and services sold in the EU since 28 June 2025.
Designing accessibly means:
- Contrast that meets the WCAG ratios for text and controls.
- Type sizes that stay readable on small screens and when zoomed.
- Keyboard paths through every journey, with a visible focus state.
- Labels and instructions that do not rely on colour or placeholder text alone.
- Motion that can be reduced for people who need it.
- Errors explained in words, next to the field, with a way to fix them.
None of this limits good design. It tends to improve it, because clarity for people with disabilities is clarity for everyone using a phone in sunlight. Build these rules into the design system and every new component inherits them; the cost of compliance falls with each page.
What UX/UI design costs and how long it takes
We do not publish a price list, because two products with the same number of screens can differ several times over in effort. What sets the figure is the number of distinct journeys and screen types, the depth of research, whether a design system is included and how many people approve each round.
What AI has changed is the production: component variants, the states of each screen, the preparation of pictures and the first pass of specifications now take hours rather than days. In our experience a focused project, such as redesigning one key journey, takes a few weeks from an approved brief; a full product or site design runs in phases over a couple of months, with research and testing taking the share of the schedule that production used to take. Our guide to how much a website costs sets out the wider budget. If you are replacing an existing product rather than starting one, a website redesign is scoped differently, because the content, the data and the search positions already exist.
How do you work with a design partner?
What a good design partner brings, and what to expect from them:
- A clear process from research to handover, with defined review points.
- Design in the browser’s reality: responsive layouts, real content, every state covered.
- Close work with developers, so what is designed can be built and what is built matches the design. At Odduel the developers are in the project from the first wireframe, so we can design for our own build or hand over to yours.
- Documentation: components, rules and decisions recorded for whoever comes next.
- Awareness of current practice without chasing fashions.
Ask how they use AI. A credible answer covers research synthesis, quick variations for exploration and automated checks, with designers making every final decision; we set out our own answer in AI in web design and development. Ask to see the research behind a past project and live products they designed, not only portfolio images. Our note on how to choose a digital agency lists the other questions worth asking, and agency onboarding describes the first weeks.
Questions people ask
How much should I budget for UX/UI design?
It depends on the number of journeys and screen types, the depth of research and whether a design system is included. Design is a modest share of a digital project’s total cost and saves far more in avoided rework. Ask for a quote broken down by deliverable, so two agencies’ figures can be compared.
How long does UX/UI design take with Odduel?
A focused project, such as redesigning one key journey, takes a few weeks from an approved brief. A full product or site design takes longer and runs in phases. AI shortens research analysis and production, so more of the time goes to testing and refinement.
What is the difference between UX and UI design?
UX design decides what a product does and in which order: the journeys, the structure, the content on each screen. UI design decides how it looks and responds: typography, colour, components and motion. A good product needs both, from one scope.
Do I need a design system for a small product?
Usually yes, in a small form. A few dozen documented components and a set of tokens keep a product consistent as it grows and make each new feature cheaper to add. It is built as part of the first design, not as a separate project.
How does AI change the cost and timeline?
It speeds up research synthesis, early exploration, component production and quality checks, which shortens projects and lowers cost. Judgement about what users need and how the product should feel stays with designers, and every result is reviewed by a person before it reaches you.
If a product or site is not performing as it should, the cause is usually in a handful of journeys. Our UX/UI design service starts there: research where it pays, prototypes you can test, interfaces built for your brand and a system your developers can build on, from Barcelona and São Paulo. Or talk to us about your project.
