The new website looks great. Everyone in the office said so. But three weeks in, the bookings have not moved, and the phone still rings with the same question: "How do I book?"
Nothing is broken. The page loads, the button works. The problem is that a real customer, on a phone, on a crowded Metro carriage, cannot work out what to do next in the few seconds they are willing to give you.
That gap between looking good and working well is the difference between UI and UX, and it shows up directly in your sales.
UI and UX, explained with everyday things
Think of a restaurant. The UI is the plates, the menu design, the lighting and the chairs. The UX is everything you experience: whether you found parking, understood the menu, got your food on time and paid without waving at the waiter for ten minutes.
A restaurant can have beautiful plates and a terrible experience, or plain plates and customers who keep coming back.
Or think of a door. The handle is UI. Whether you know to push or pull without reading a sign is UX. If a door needs a sign saying "pull", the design has already failed.
| UI (user interface) | UX (user experience) | |
|---|---|---|
| The question it answers | Does it look clear and attractive? | Can people do what they came for, easily? |
| Examples | Button style, colours, icons, spacing, type | Page order, number of steps, wording, error handling |
| Typical deliverables | Visual designs, style guide, components | Research notes, user flows, wireframes, test results |
| How you judge it | Consistency, readability, polish | Task completion, time taken, fewer support questions |
The two are not rivals; UI is how the experience is presented. But when budget is tight, a plain site with good UX will outsell a beautiful one with bad UX.
Why UX shows up in your sales
Every extra step, unclear label or confusing screen is a chance for someone to give up. They rarely complain. They just close the tab and message a competitor.
Good UX reduces three things: effort (how much the customer has to do), doubt (whether they trust you and understand the offer) and dead ends (moments where they don't know what happens next). Reduce those and more visitors become enquiries, bookings and orders, without spending more on ads.
It also saves staff time, answering the questions your team now answers by hand on WhatsApp all day.
Research: start with people, not pixels
Before anyone opens a design tool, find out what your customers actually try to do. You don't need a big budget:
- Read your inbox. The questions customers ask on WhatsApp and the phone are a list of what your site fails to answer.
- Talk to five customers. Ask how they found you, what they almost did instead and what nearly stopped them.
- Watch the numbers. If your current site has analytics, look at which pages people leave from.
- Try competitors' sites. Note what annoys you as a customer.
From this, write down your top three tasks. For a clinic, that might be booking, checking prices and finding the location. Everything on the site should make those easier.
Wireframes and prototypes: plan before you build
A wireframe is the floor plan of a page: grey boxes showing what goes where and in what order, with no colours or photos. It forces the important decisions first. What is the headline? What is the main action? What does the customer need to see before they trust you?
Design mobile first. Most of your visitors in Egypt and the Gulf will likely arrive on a phone, and a layout that works on a small screen is easy to expand for a large one. The reverse is much harder.
A prototype is a clickable version of the design, before any code exists. You can tap through the booking steps on your own phone and feel where it drags. Changing a prototype takes minutes. Changing a finished, coded site takes days.
Usability testing with 5 real users
This is the step most businesses skip, and the cheapest insight you will ever buy.
Jakob Nielsen of the Nielsen Norman Group has long argued that testing with around 5 users reveals most of the usability problems in a design, and that several small rounds beat one large one. The first few people stumble on the same big problems, so you learn what matters quickly, fix it, and test again.
Designing for Arabic: RTL-specific UX
A right-to-left site is not a left-to-right site flipped in a mirror. Some things must mirror, and some must not.
- Mirror the layout. Navigation, reading order, back and forward arrows, progress bars and sliders all run right to left.
- Don't mirror everything. Play buttons, clocks, checkmarks, logos and brand marks keep their direction.
- Numbers and mixed text. Phone numbers, prices and English product names inside Arabic sentences must display correctly, which needs testing with real content.
- Input direction. Email and website fields should be typed left to right even on an Arabic page, and phone fields should accept both Arabic-Indic digits and Western digits.
- Search that understands Arabic. A search for «احمد» should find «أحمد», and «مدرسه» should find «مدرسة».
- Readable type. Arabic usually needs a slightly larger size and more line spacing than English.
Our guide to building an Arabic and English website properly covers the technical side, including separate URLs and SEO.
Forms and accessibility basics
Forms are where interest turns into a lead, and where many sites lose it.
- Ask only for what you truly need now. Every extra field costs you completions.
- Keep labels visible above fields. Placeholder text that disappears when you type is not a label.
- Accept phone numbers in the formats people actually type, with or without a country code.
- Show errors next to the field, in plain words that explain how to fix them, and never clear what the user already typed.
- Use the right keyboard on mobile:
type="email"for email,inputmode="tel"for phone numbers.
Accessibility helps everyone, including older customers and anyone using a phone in bright sun:
- Text contrast of at least 4.5:1 for normal text, as the WCAG guidelines recommend.
- Buttons and links large enough to tap; current WCAG guidance sets a minimum of 24 by 24 pixels, and bigger is more comfortable.
- Every image that carries meaning gets a text description.
- The site works with a keyboard, with a visible focus outline.
- The page declares its language and direction, such as
lang="ar"anddir="rtl", so screen readers pronounce it correctly. - Colour is never the only signal. An error needs words, not just a red border.
Common UX mistakes
- Designing for the owner, not the customer. The founder's story on the home page, the booking button buried.
- Hiding prices and key details. Visitors who cannot find basic information assume the worst.
- Testing only on a big office screen. Check on a mid-range phone.
- Too many choices at once. Three clear options beat twelve.
- Launching without a single user test. Five people and an afternoon would have caught it.
Questions people ask
What is the difference between UI and UX in one sentence?
UI is how the product looks and feels to touch; UX is whether people can use it easily to get what they came for.
Is five users really enough for testing?
For finding the biggest usability problems in a round of qualitative testing, around five is a well-established rule of thumb. The key is to fix what you find and test again with another five.
Do I need UX design for a small business website?
Yes, at a small scale. Knowing your customers' top three tasks and testing the site with a handful of real people costs little and prevents expensive redesigns.
What does RTL mean?
Right to left, the reading direction of Arabic. An RTL website mirrors its layout and navigation to match how Arabic readers scan a page.
Does good UX help with Google rankings?
Partly. Google's ranking systems consider page experience signals such as Core Web Vitals, which measure loading, responsiveness and visual stability. Our guide to website speed explains the thresholds.
Where to go from here
Before you redesign anything, write down the three things your customers most want to do on your site, then watch five of them try. What you learn in that afternoon will guide every design decision after it.
If you would like help turning those findings into a site that is clear in both Arabic and English, you can book a short meeting or look at our work first.