Phase 01
Discovery
- What happens in this phase
- User interviews, processes, roles and scenarios.
- What a change involves
- You rewrite a sticky note on the wall.
Effortseconds
UX & UI design
UX and UI design for apps people never get lost in
We design web and mobile applications and information systems. From user interviews and wireframes to a clickable prototype in Figma and a design system we then build the app from. You click through the design before a single line of code is written.
- Experience
- Building software since 2003
- Tool
- Figma – from wireframe to prototype
- Platforms
- Web · iOS · Android
- Team
- Design and development under one roof
Anatomy of an interface
A good-looking UI is only the top layer
Beneath every screen that is pleasant to work with lie five more layers. Users never see them, but they notice when one is missing. Read on and we will walk you through them.
- UX design (user experience)
- Everything under the surface: who the app is for, how it is put together and whether people get their job done quickly and without mistakes. That can be tested.
- UI design (user interface)
- Everything you see and click: colours, typography, icons and components. Largely a matter of taste and of your brand.
Layer 01 · UX
People and processes: Who it is for, and why
Before we draw the first screen, we find out who will use the app, where and what for. We work from interviews and from how the operation really runs, not from guesses. It often builds on a process analysis.
Output: Roles, scenarios, process map
Layer 02 · UX
Information architecture: What goes where
We lay out the screens, the navigation and how they connect, so everyday tasks take a few clicks and nothing important hides three levels deep.
Output: Screen and navigation map
Layer 03 · UX
Wireframe: A skeleton without colour
Where the table, the form, the filter and the record detail go. A wireframe tunes structure and content, not taste. A change here takes minutes.
Output: Wireframes of key screens
Layer 04 · UX + UI
Components and states: Every element in every state
We design buttons, fields, tables and filters in detail, even before they hold any real data. We work out how they look while editing, while data is loading or with an error message. Any state that cannot be resolved in the design is addressed later during development and user testing.
Output: Component library
Layer 05 · UI
Visual design: An interface in your brand
Colours, typography and icons. We watch contrast and legibility, so the app works in the sun out in the field as well as on an old office monitor.
Output: Final UI and design system
Layer 06 · UX + UI
Interaction and prototype: Screens you can click through
We link the designed screens into a prototype (usually in Figma) that future users can click through to test how clear and usable it is. You walk through complete user scenarios, such as opening a list, viewing a detail and editing a record. You can leave comments right where they apply in the design, so we can discuss them together and fine-tune further.
Output: Clickable prototype in Figma
When the layers click together
…the user sees a single screen. They never wonder where to click, and nothing is missing. That is how good design is meant to work.
Taste and UX
Colours are up for debate. Whether people find the button is not.
Visual design is largely a matter of taste and of your brand – that is where you decide. UX is not a matter of taste: whether people find their way around the app can be tested. That part we look after for you, and you do not need to know anything about it.
You decide
We design in the spirit of your brand and fine-tune it with you until you like it.
- Colours
- Typeface
- Icons and illustrations
- Overall mood
You choose, we check
The look is up to you, but it has to stay legible and usable for everyone. That we measure.
- Contrast
- Text size
- Button size
Facts decide
Do people find what they look for? Do they understand the form? Do they get the job done without mistakes? That is not a matter of opinion – we test it on the clickable prototype.
- Navigation
- Forms
- Number of steps
- Clear wording
- Error states
Three things we look after for you
You do not need to know them. If you are curious, try them out.
Fitts's law
An important button is big and where you expect it
The smaller and further away a button is, the longer it takes to hit – for everyone. So main actions get a large target and sit where users look for them. In mobile apps we design for the thumb and one-handed use.
For the curious
T = a + b · log₂(D / W + 1)T is time, D the distance to the target, W its width.
WCAG 2.2 asks for a target size of at least 24 × 24 px for controls.
Source: P. M. Fitts (1954); formulation by I. S. MacKenzie (1992); W3C WCAG 2.2, criterion 2.5.8
Click the lit target, back and forth – as fast as you can, but accurately. Four sizes and distances take turns.
The test is played with a mouse or touch.WCAG contrast
Text everyone can read, even in the sun
Light grey on white looks elegant, but many people cannot read it. So we measure text contrast against the international accessibility standard WCAG. The look does not suffer, it just stays legible for everyone.
For the curious
WCAG 2.2 requires a contrast ratio of at least 4.5 : 1 for body text, and 3 : 1 for large text and controls.
Since 28 June 2025 the European Accessibility Act applies across the EU (in the Czech Republic as Act No. 424/2023 Coll.), making accessibility mandatory for many services, such as online shops.
Source: W3C, Web Content Accessibility Guidelines 2.2, criteria 1.4.3, 1.4.6 and 1.4.11
Invoice no. 2026-114Awaiting approval by FridayApprove
Try
Contrast ratio2.35 : 1
- Body text · AAfails · 4.5 : 1
- Large text · AAfails · 3 : 1
- Body text · AAAfails · 7 : 1
- Controlsfails · 3 : 1
The five-user rule
A handful of people is enough to test a design
No big research project is needed. When five people who will use the app click through the prototype, most of the places where they would get stuck show up – and get fixed before anyone starts coding.
For the curious
According to research by Jakob Nielsen and Thomas Landauer, one user uncovers 31 % of usability problems on average, and five people about 85 %.
found = 1 − (1 − 0.31)ⁿ
Source: J. Nielsen, T. K. Landauer (1993); J. Nielsen: Why You Only Need to Test with 5 Users (2000)
84%problems found · 5 testers
Design system and handoff
An app that holds together. Even after years of development.
For apps that will keep growing, we prepare a design system: a set of colours, type and ready-made elements that every screen is built from. A feature added two years later then looks as if it had always been there, and developers do not have to guess. Try changing the colour or the corner radius.
White text on this colour would be hard to read (2.4 : 1), so the system picks a darker shade by itself.
New jobIn progress
ClientSample Company LtdDue datedd/mm/yyyyEnter a due dateNotify by e-mailSave jobCancel
Jobs this week128+12 %
:root {
--color-brand: #19BCB3;
--color-brand-fill: #11827B;
--color-brand-text: #11827B;
--radius-control: 12px;
--space-unit: 12px;
--color-surface: #FFFFFF;
--color-text: #080F3A;
}Components in every state
Default, hover, error, empty and loading. Nothing gets improvised.
Exact values instead of guesswork
Colours, type, spacing and radii as named values shared by design and code.
Specs right in Figma
A developer opens a screen and sees the layout, the form structure and how the table behaves.
Design and development at one desk
Our design does not end by handing over pictures. The designer who designed the app then leads its development as Product Owner, and the frontend developer who builds it looks after the details of the interface. Nothing gets lost in translation.
Meet the whole team
Lucie Vystrčilová
Product Owner & UX designer
Designs applications in Figma and builds interactive prototypes, so you can click through the system before the first line of code.
Jiří Dušek
Senior frontend developer
Turns designs into the real interface, with an eye for detail and for apps that are comfortable to use.
Case studies
Designs people work with every day
In the hunting ground, at a swimming lesson and on a building site. Applications whose design and development we work on.
Web + mobile appEmyslivost
Even gamekeepers over 70 use the app without trouble.It speaks the language of hunters, and everyone sees only what their role needs.Case study
Custom web applicationJuklík
The client approved the Figma design before any coding began.A system for a swimming school for babies and young children: transfers between courses, make-up lessons and a watchdog for freed-up places.Case study
Web + mobile appSmart Work System
The mobile app speaks four languages.On iOS and Android it makes working with foreign workers easier. We have been developing the system since 2016.Case study
Excellent quality of service, and the way features are thought through is absolutely perfect.
Frequently asked questions about UX and UI design
UX design (user experience) is about whether users reach their goal in the app quickly and without mistakes: the structure of the screens, navigation, scenarios and states. That can be tested. UI design (user interface) is about how the interface looks: colours, typography, icons and components. That is largely a matter of taste and brand. A good app needs both, which is why at iQuest we design UX and UI together. We explain the difference in more detail in The difference between UI and UX (in Czech).
No. You only need to know what the app should do and who will work with it. The rest is our job: we design the app, you click through it as if it were finished and tell us what you like and what you do not. You decide on the look; we look after the usability.
In Figma – from wireframes and a clickable prototype to the final UI and design system. An analyst, a developer and the client can all work on one design at the same time, and anyone can leave a comment right where it applies. We describe how we work with Figma in How we design applications in Figma (in Czech).
The design is created by us, the iQuest team, based on our knowledge and many years of experience. We use artificial intelligence (AI) for inspiration and review. What matters to us is that the final product comes from our team.
Because a change in the design is quick, while a change in finished code means touching the database, the logic, the tests and a new release. When you click through the prototype, a missing button, an illogical step or an unhandled screen state shows up before anyone starts coding.
Yes. We respect the conventions of both platforms and design for thumb and one-handed use, and for work in the field on a smaller phone screen. More about how we build mobile apps.
A design system is a set of reusable components, colours, typography and rules that every screen is built from. It pays off above all for large applications developed over the long term: new features look and work like the rest of the system, and developers do not have to guess.
A developer opens the design in Figma and sees the layout, the structure of forms, how tables and filters behave and every screen state, such as empty, editing or error. The designer also stays on the team throughout development, so nothing gets lost in translation.
Yes. In the design we watch text and control contrast, target sizes and legible typography with the WCAG 2.2 standard in mind. Since 28 June 2025 the European Accessibility Act applies across the EU (in the Czech Republic as Act No. 424/2023 Coll.), and accessibility is mandatory for many services, such as online shops.
Yes. We go through the app with the people who use it, find where they lose time or make mistakes, and design the changes as a clickable prototype. We can then build them right away.
It depends on the scope – the number of screens, user roles and scenarios. The design is usually part of custom software development. You can get an indicative price for the whole project from our price calculator.
Let's design an app people never get lost in
You do not need to know anything on this page. Just tell us what the app should do and who will work with it – we will take care of the design and the UX. In a first consultation we will talk through your idea, or the system people struggle with.