What Is UI/UX Design? The Difference, With Small Business Examples

UI and UX are two different layers of designing a website or app. UI (user interface) is everything you see on screen: buttons, colours, fonts, icons and spacing. UX (user experience) is the whole journey from the moment a visitor arrives until they finish what they came to do: did they find it, how much effort did it take, how did they feel at the end?

In short, UI answers "how does it look?" and UX answers "how easy and useful is it?" This article sums up the difference in a table, then uses concrete small business examples to show where UX earns you money and where it costs you.

Where did the idea of UX come from?

The phrase "user experience" was popularised by cognitive scientist Don Norman, who used it in his job title at Apple in 1993. The Nielsen Norman Group, which he co-founded, defines UX as all aspects of the end user's interaction with a company, its services and its products. So UX is not limited to the screen: the email after a form is sent, the tone of whoever answers the phone and a clear invoice are part of it too. This article focuses on the website side.

UI vs UX at a glance

Think of a restaurant. UI is the design of the tables, the plates and the menu card. UX is everything from walking in to paying and leaving. A beautiful menu card (good UI) does not make up for a waiter who never comes (bad UX).

The two are not independent. Small grey text nobody can read (a UI mistake) creates a poor experience (a UX problem). Good projects handle both together. We cover all the layers of web design in what is web design.

How the UI/UX design process works

On a website project, UI and UX work usually runs in this order:

1. Research: who are the visitors, why do they come and what question are they trying to answer? Customer conversations, competitor sites and any data from the current site are reviewed.
2. User flow: the path a visitor takes to reach the goal is mapped out, for example "came from Google, read about the service, saw the price, messaged on WhatsApp".
3. Wireframe: the page layout is drawn with boxes and text only, no colour or images. Changes are cheap at this stage.
4. Visual design (UI): colours, fonts, photos and icons are added on top of the approved wireframe.
5. Prototype and test: a clickable early version is tried by a few people and the sticking points are fixed.
6. Measuring after launch: improvements continue based on real visitor data.

The first three steps lean towards UX, the fourth towards UI, and the last two look at both together.

Concrete UX examples from small business sites

Large companies build UX teams. On a small business site, a few good decisions are usually enough. These are the four areas we see most often.

1. Contact and quote forms

The form is where a visitor becomes a customer, and where most are lost.

Every field you do not truly need makes some visitors give up. Do you actually use the "company" field? If not, remove it. Collecting less data is also safer under data protection law.

2. Mobile menu

On a phone, the menu is the visitor's compass.

• The menu icon belongs in a top corner where it is easy to spot.
• Items in the open menu need enough space to tap comfortably. The W3C's WCAG 2.2 requires tap targets of at least 24x24 CSS pixels and recommends 44x44 at the higher level.
• The close button must be visible.
• Keep to six or seven main items; move the rest into a submenu or the footer.
• Phone and WhatsApp can sit in a fixed bar at the bottom of the screen instead of hiding inside the menu.

3. Call-to-action buttons

Buttons like "Contact us" or "Book now" are the reason the page exists.

• One main action per page. Five buttons side by side means none stands out.
• Button text should say what happens: "Get a free quote" instead of "Submit", "Check availability" instead of "Click here".
• Use the main button colour nowhere else on the page so the eye finds it instantly.
• Make the phone number a tel: link so tapping it starts a call.
• Leave enough space around buttons so visitors do not tap the wrong thing.

4. Speed

To a visitor, a slow page is no different from a badly designed one. Google measures page experience with Core Web Vitals: main content visible in 2.5 seconds, a response to a tap within 200 milliseconds and no layout shift while loading. Tapping the wrong thing because a button jumped during loading is one of the most annoying experiences there is. See Core Web Vitals and site speed for how to measure and fix it.

Short examples by sector

• Hotel: visitors want to pick dates and see a price. Asking for an email before showing prices is the worst possible UX. The date picker and an "Availability" button belong on the first screen. See sample flows in our hotel website examples.
• Dental clinic: patients look for trust before price. A dentist's photo, real clinic images and an "Ask on WhatsApp" button do more than a long about-us text.
• Real estate: listing filters should work one-handed on a phone, and changing a filter should not throw the visitor back to the top.
• Restaurant: opening the menu as a PDF is a poor experience on a phone. The menu should be a normal page that needs no zooming.

Accessibility: the forgotten half of UX

Accessibility means the site can also be used by people with visual, hearing or motor impairments. It is often seen as a "special need", but it improves the experience for everyone: someone reading a phone in bright sun benefits from high contrast, and someone using a phone one-handed benefits from big buttons. Items from the W3C's WCAG 2.2 that a small business site can easily apply:

• A contrast ratio of at least 4.5:1 for normal text.
• Alt text that describes the content of each image.
• Visible labels on form fields instead of placeholder hints that disappear when you type.
• A site that can be navigated with the keyboard alone (Tab key), with a visible focus state.
• Information not conveyed by colour alone: mark an invalid field with text, not just a red border.

Consistency on the UI side: a small design system

A small version of what large companies call a "design system" is a one-page style guide: one main colour, one accent colour, two fonts, three heading sizes, one button style and fixed spacing values. It keeps every page added later looking like part of the same family. Without written rules, two years on every page has a different coloured button and visitors struggle to tell what is clickable.

How UX relates to SEO

Google says openly that it aims to rank pages that are genuinely useful, and it assesses page experience with signals such as Core Web Vitals, mobile-friendliness and HTTPS. Good UX alone does not guarantee the top spot, but poor UX wastes search traffic: even if you rank well, visitors who cannot find what they need simply go back, and the traffic never turns into business. It makes more sense to treat SEO and UX as two sides of the same work.

Improving UX on a small budget

1. The five-person test: hand your phone to five people and say "ask this site for a quote". Watch without talking. Every place they hesitate is a UX problem.
2. Search Console and analytics: see which pages visitors leave immediately and which searches bring them in.
3. Count your leads: how many forms and calls a month? Compare before and after a change.
4. Ask your customers: "How did you find us, and what were you looking for on the site?" Those two questions reveal a lot.
5. One change at a time: shorten the form, wait two weeks, look at the result. Change everything at once and you will not know what worked.

Quick UX checklist

• [ ] On a phone, does the first screen make clear what you do?
• [ ] Does tapping the phone number start a call?
• [ ] Is the menu easy to open and close on a phone?
• [ ] Are buttons at least 44 pixels tall?
• [ ] Is the contact form limited to three to five fields?
• [ ] Are error messages clear and shown under the right field?
• [ ] Does the page say what happens after sending?
• [ ] Do buttons stay in place while the page loads?
• [ ] Is there enough contrast between text and background?
• [ ] Does every page have one clear main action?

Who is responsible for UI/UX?

Ask the firm building your site: will you show the mobile design separately? Can I approve the page flow at the wireframe stage? Will you test on a real phone before launch? If the answers are not "yes", UX is probably being left to chance.

On our business website projects we prepare separate desktop and mobile wireframes and test on real devices before launch. If you want to talk about where your current site is losing visitors, describe your project briefly in the quote wizard.