UI and UX split one job in two. UI, the user interface, is what a visitor sees and taps: layout, buttons, type, colour. UX, the user experience, covers the whole interaction. Nielsen Norman Group defines user experience as all aspects of the end-user's interaction with the company, its services and its products.
Your designer says the site needs better UX. Someone else says the UI looks dated. Both words get used as though everyone agrees what they mean, and most owners nod along rather than ask.
Here is the short version before the detail. UI is the surface your customer touches. UX is what your customer goes through while trying to get something done. The distinction matters because the two fail in different ways and cost you in different ways. A site can look current and still lose a booking because the phone number will not dial when a customer taps it.
This guide is for owners and managers of small Canadian businesses: restaurants, clinics, law firms, trades and shops. No design-school vocabulary. We are DigiBenders, a two-partner web design and software team in Saint John, New Brunswick, and Meet Chaudhari, our partner and designer, wrote this from the work itself: the patterns he keeps finding on real small business websites across New Brunswick and Atlantic Canada, what Google actually measures, and a check you can run alone on your phone.
UI is the part of your website a customer can see and touch. UX is what happens to that customer while they try to get something done.
UI stands for user interface. On a Saint John restaurant website, the UI is the menu button in the top corner, the size of the text on the dinner list, the colour of the reservation button, and the spacing that makes a phone number easy to hit with a thumb. UI is also where your brand identity becomes something usable: typefaces, colour, photography, button shapes.
UX stands for user experience. Nielsen Norman Group, where the term was coined, defines it as all aspects of the end-user's interaction with the company, its services and its products, as set out in the Nielsen Norman Group definition of user experience. Notice what that includes: not only the screen. For a walk-in clinic, the UX covers whether the site says plainly that the clinic is accepting new patients, whether the booking page works on a phone with one bar of signal, whether a confirmation arrives, and whether the front desk says the same thing the website did.
The two can disagree. Nielsen Norman Group uses the example of a movie site with a perfect interface that still delivers a poor experience when the underlying database does not contain the film someone came to find.
UX decides what has to happen and in what order. UI decides what that looks like on screen. The clearest way to tell them apart is to start from a question your customer already has in their head.
| Customer question | What UX answers | What UI answers |
|---|---|---|
| Are you open right now? | Whether hours appear on the first screen and whether holiday hours are current | How the hours are grouped, sized and spaced so they can be read outdoors |
| Can I book without phoning? | Whether an online booking path exists and how many steps it takes | What the booking button looks like and where it sits on the page |
| Do you handle my kind of problem? | How services are grouped and named in the navigation | How service cards are laid out, labelled and ordered |
| How do I reach a human? | Whether phone, email and address are reachable from every page | Whether the phone number is a tappable link and looks like one |
| Can I trust this business? | Which proof appears, and at what point: reviews, photos, credentials | Typography, colour contrast and image quality |
Nielsen Norman Group also separates usability from both: usability is a quality attribute of the interface, covering whether a system is easy to learn and efficient to use, while total user experience is a broader concept again.
A UI UX designer turns what your customers need into screens a developer can build. On a small business project that runs as a sequence, not as one burst of decoration at the end.
That sequence is the core of our web design services. The same phase runs first on software projects too: when we design a customer portal or a mobile app, UI UX design is the opening stage of app development, not a finish applied at the end.
Because looks are judged once and experience is judged every visit. A site that looks current on your desktop can still be losing calls on a phone, and the owner is usually the last person to find out.
The mistake we see most often is owners judging a website by how it looks on their own desktop monitor, when their customer is standing in a parking lot holding a phone. That gap is not theoretical. According to Statista, mobile phones accounted for the largest share of web traffic in Canada in 2025 for the first time, at 48.83 percent, with desktop close behind. Half your traffic is arriving on the smallest screen you own.
Bad UX shows up in your numbers before it shows up in your inbox. Missed calls because the number is text instead of a link. Abandoned booking forms because the form asks for a postal code, a preferred contact method and a reason for enquiry before it asks for a name. Visitors who leave because the thing they came for sits four scrolls down.
Take one booking form rebuilt two ways. Version one asks for everything the office might eventually want. Version two asks for a name, a phone number and what the person needs, then collects the rest on the call. Same brand, same colours, same typeface. Only the experience changed, and the experience is the part that decides whether a stranger finishes.
UX decisions carry the same weight in software. Our client case studies cover projects where the interface design was the product, not a wrapper around it.
Five issues come up again and again on small business sites across New Brunswick and the rest of Atlantic Canada. None of them are design-taste problems and all five are fixable in a day or two.
Two jobs show what the payoff looks like. For Hopscotch Whisky Bar in Saint John, the brief was a site the owner could edit himself and customers could navigate without thinking; four years later he came back for a redesign when the bar expanded. For the four New Brunswick law firms we have designed sites for, including a six-office personal injury firm, the hard UX work was intake: moving a worried person from a practice area page to a contact action in as few steps as possible. That is the same thinking behind our web design in Saint John, NB.
Google's documentation talks about page experience rather than UX, and most of it is measurable. The practical parts are Core Web Vitals, secure serving, how the page behaves on mobile, and how much clutter sits between the visitor and the content.
Google Search Central says its core ranking systems look to reward content that provides a good page experience, and advises site owners not to focus on only one or two aspects. Its self-assessment asks whether your pages have good Core Web Vitals, whether they are served in a secure fashion, whether content displays well on mobile devices, whether you avoid an excessive amount of ads that distract from or interfere with the main content, whether you avoid intrusive interstitials, and whether visitors can easily distinguish the main content from everything else on the page.
Core Web Vitals are the numeric part. web.dev describes them as the subset of Web Vitals that applies to all web pages and should be measured by all site owners, covering three aspects of the user experience: loading, interactivity and visual stability. For a good experience, Largest Contentful Paint should occur within 2.5 seconds of the page starting to load, Interaction to Next Paint should be 200 milliseconds or less, and Cumulative Layout Shift should stay at 0.1 or less.
In plain terms: the main thing on the page should appear quickly, a tap should produce a visible response straight away, and nothing should jump around while the page finishes loading.
Accessibility belongs in the same conversation even though Google does not score it for you. It means a person using a screen reader, a keyboard, larger text or a high-contrast setting can still complete the same tasks as everyone else. Before launch we check colour contrast, alt text on images, tap target sizes and keyboard order, because the same fixes make the site easier for a customer squinting at a phone in bright sunlight.
Pick up your phone, turn off wifi so you are on cellular data, and work through the list below on your own site. Do not fix anything while you go; just note what fails.
If several of these fail, you have an experience problem rather than a graphics problem, and a repaint will not solve it. That is usually the point where a structured website redesign is worth more than another round of colour tweaks.
UI and UX are not interchangeable and they are not decoration. UI is the surface your customer taps. UX is whether they finish what they came to do, which Nielsen Norman Group frames as every aspect of the interaction with your company, its services and its products. For a small business, that difference shows up as calls placed or calls lost.
Start with the phone check. Fix the tappable number, get the menu out of the PDF, shorten the form and move the main action up. Then work through Google's page experience self-assessment. We have designed sites this way for restaurants, clinics and law firms across New Brunswick, and were voted Community Votes Saint John Platinum for Web Design in 2023 and 2024.
