UI / UX Design

What is UI/UX design?

UI/UX design is the joint work of deciding how a website or app functions (UX, user experience) and how it looks and responds to touch (UI, user interface). The aim is to let people finish the task they came for with as little effort as possible.

User experience design does not start on screen. It starts by understanding who the user is, what context they arrive in and what they are trying to get done. The interface then makes those decisions visible: what information comes first, where the button sits, what the screen says when something goes wrong.

Running the two in separate teams at separate times is a common mistake. Screens drawn without knowledge of the flow end up attractive but unworkable, and flows built with no thought for the visual language produce an experience that feels detached from the brand.

The difference between UI and UX, using one form

The difference is easiest to see on a single screen. Picture an online booking form for a clinic. The UX questions are: how many steps should booking take, which details are truly required, should people choose the doctor or the date first, and what happens if no slot is free?

On the UI side the questions change: what does the date picker look like, how are booked slots distinguished, does the button say “Submit” or “Confirm appointment”, and where and in what colour does an error appear? One form carries two separate sets of decisions on two layers.

The same split applies to a corporate website. Which items appear in the navigation, and whether products are grouped by industry or by application, are UX decisions; how the menu opens, its type size and accent colour are UI decisions.

Results only come when both are right. A beautifully drawn date picker does not make up for three unnecessary steps, and a flawless flow gets lost in an interface that is hard to read.

The user experience design process, step by step

Not every project gives each step equal weight, but user experience design usually follows the same logic: understand first, try things out roughly, refine the detail last. Changes are cheap early on and expensive once code exists.

Research does not always mean a long study. Existing analytics, the questions customer service hears most often and the objections the sales team keeps meeting often show exactly where the problem is.

The prototype stage is the most productive part of the process. Asking someone to complete a task and watching where they pause or what they misread gives a clearer answer than hours of debate in a meeting room. Problems are fixed on the spot, while it still costs no more than changing a few screens.

Bringing the development team in at the wireframe stage rather than at the very end means fewer surprises. A technically expensive interaction is spotted early, and a simpler solution to the same need is found while the design is still flexible.

• Reading existing data: analytics, support tickets, user feedback
• Defining user tasks and priorities
• Flow diagrams: every step of each task, start to finish
• Wireframes: screen skeletons without colour or imagery
• Clickable prototype and short user tests
• Interface design and developer handover

What makes a good interface?

A good interface is measured not by taste but by whether people make the right move without hesitating. The principles behind that barely change between industries; what changes is which one matters most for a given product.

Accessibility is not a separate heading among these principles but their foundation. Enough colour contrast, menus you can navigate by keyboard and labels screen readers can understand improve the experience for people with visual or motor impairments and for anyone squinting at a phone in bright sunlight. We use the WCAG guidelines as our reference.

Devices change how the principles apply, too. Hints that appear on mouse hover on desktop do not exist on mobile; there the same information has to be visible outright or open with a clearly signposted tap. That is why we think through key screens separately for each device.

• Consistency: elements that do the same job look and behave the same everywhere
• Feedback: after every tap, users can see what the system is doing
• Legibility: text size, line length and contrast still work on small screens
• Microcopy: button labels and messages say plainly what will happen
• Touch targets: elements large enough to tap comfortably on mobile

How can you tell your site has a UX problem?

UX problems rarely arrive as direct complaints; they show up as indirect signals. People give up, phone instead, or email the same question again and again. Reading these signals together tells you where a redesign should begin.

When you spot one of these signals, the first job is to narrow the problem down to a single flow. A concrete finding such as “visitors drop out at step two of the quote form”, rather than a vague “the site looks dated”, makes both the fix and measuring whether it worked possible.

• Visitors abandoning a form in large numbers at one particular step
• Questions answered on the site still reaching customer service repeatedly
• Mobile visitors completing noticeably fewer actions than desktop visitors
• The same terms being typed into site search over and over
• Internal teams inventing workarounds just to use the system