03 // Blog

Blog

Notes from my own projects, a talk and contests, plus short practical guides on UX, accessibility and Arabic (RTL) design.

Search posts

Topic

Arabic guide for students3 min read
10 UX laws that make or break an experience
A short guide I wrote in Arabic for design students: each law with its rule, why it matters, an everyday example and a product that uses it.
Talk · 21 June 20252 min read
Requirements vs. expectations in UX/UI design
Notes from a talk I prepared and gave: why products fail in the gap between what was built and what users expected, and how to close it.
Contest · May 2025 · 2nd place2 min read
Rebuilding a “destroyed” website against the clock
How I approached the ASU UI/UX Contest V5 brief, starting on paper, and what earned second place.
Redesign exercise2 min read
Redesigning one of the internet’s busiest store pages
Arngren is famous among designers for its cluttered homepage. I used it to practise hierarchy, grouping and white space on a real, extreme example.
Visual design exercise2 min read
What an old newspaper taught me about visual hierarchy
Redesigning a dense front page to control where the eye goes first, next and last, while keeping its classic personality.
UI challenge2 min read
Dermatology booking in five screens
A short UI challenge: a booking flow for a dermatology clinic with a soft, rounded visual language.
Process2 min read
How I use AI in my design process (and where I don’t)
Lessons from building Rawaa: AI is great for speed and drafts, and bad at deciding what the product should be.
Process2 min read
Why I still start on paper
Pencil sketches from the Banana platform, and why ten minutes on paper saves an hour in Figma.
Product thinking2 min read
Why Rawaa lives inside WhatsApp
The biggest decision in Rawaa wasn’t a screen. It was choosing not to build an app for guests at all.
Research2 min read
What 56 students taught me about money apps
Survey numbers and honest quotes from the Filis research, and how each one turned into a design decision.
Design systems2 min read
One card, six verticals
How a single listing card fixed more of a classifieds marketplace than any page redesign could.
Checklist2 min read
The accessibility check I run before handoff
Five quick checks that catch most problems before a developer ever sees the file.
Localization2 min read
Designing for Arabic is not flipping English
What localizing the Tesco homepage, and building this site in two languages, taught me about right-to-left design.
UX research2 min read
Personas that actually change the product
In Legacy, four very different buyers shaped four specific features. Here is how I write personas so that happens.
Process2 min read
46 grey screens before any colour
Why I wireframed every screen of Rawaa in grayscale first, and what changed once colour arrived (almost nothing).
Interaction design2 min read
Designing a crisis screen people don’t have to relearn
How Emergency Mode in Filis changes what matters without changing where things are.
UX writing2 min read
Supportive, respectful microcopy
Real lines from Filis, and the rules behind them: a number, an action, and a respectful tone.
UX research2 min read
Competitor audits that lead somewhere
Three audits from my projects, and the one sentence each audit had to produce.
UX research2 min read
How I write a usability test plan
Tasks, metrics and heuristics from the Sehati plan, and why I’m honest about what I haven’t tested yet.
Wearables2 min read
Designing for a two-second glance
Lessons from a smartwatch flight tracker: one decision per screen, high contrast, and ruthless priorities.
Design systems2 min read
Variables, not hex codes
How Filis runs on 201 Figma variables in five collections, and why every name describes a job, not a colour.
Design systems2 min read
Dark mode with one switch
Banana’s colours live in Day and Night modes, so the whole platform changes theme without redrawing a single screen.
Prototyping2 min read
A prototype with no dead ends
Rawaa’s prototype links 62 screens on desktop and mobile. The rule I used: every screen needs a way forward or a way back.
UX research2 min read
Flows before screens
In Sehati our team mapped five user flows with every decision point. The waiting list exists because of one decision point.
Accessibility2 min read
Colour contrast in practice
Contrast is the difference in brightness between text and its background. Learn the WCAG ratios, the common failures and how to test them.
Accessibility2 min read
Focus states that show
Keyboard users need to see where they are. Learn how to design visible focus indicators, use :focus-visible and avoid hidden focus.
Accessibility2 min read
Keyboard-first navigation
Many people never use a mouse. Design every interaction so it works with a keyboard, in a logical order, with no traps and clear exits.
Accessibility2 min read
Writing good alt text
Alt text should serve the purpose of an image, not just describe it. Learn when to write it, when to leave it empty and how context decides.
Accessibility2 min read
Accessible forms
Forms are where users complete tasks. Use real labels, helpful hints, clear errors and sensible grouping so everyone can finish them.
Accessibility2 min read
Touch target size
Small buttons are hard to hit. Learn the WCAG 2.2 minimum of 24 by 24 CSS pixels, the larger 44 px guidance and how spacing helps.
Accessibility2 min read
Designing for reduced motion
Animation can cause discomfort or nausea for some users. Learn to respect prefers-reduced-motion and to give people control over moving content.
Accessibility2 min read
Headings and landmarks
Screen reader users navigate by headings and landmarks. Structure pages with one h1, ordered headings and clear regions.
Accessibility2 min read
Not by colour alone
Colour should never be the only way to convey meaning. Learn WCAG 1.4.1 and how to pair colour with text, icons and patterns.
Web & performance2 min read
Core Web Vitals for designers
LCP, INP and CLS measure loading, responsiveness and visual stability. See which design choices move these numbers.
Arabic & RTL2 min read
CSS logical properties for RTL layouts
Physical properties like margin-left break when a page flips to right-to-left. Logical properties follow the reading direction and save you from duplicate CSS.
Arabic & RTL2 min read
Which icons to mirror in RTL
Mirror icons that express direction, leave the rest alone. A short guide to arrows, chevrons, progress and the cases where context decides.
Arabic & RTL2 min read
Western or Eastern Arabic digits?
Arabic interfaces can show 0-9 or the Eastern Arabic-Indic digits. The right choice depends on audience, so stay consistent and let research decide.
Arabic & RTL2 min read
Choosing Arabic fonts for interfaces
Pick Arabic UI fonts by legibility, weight range, pairing with Latin, diacritics support and file size, not by looks alone.
Arabic & RTL2 min read
Handling mixed-direction text
Arabic sentences often contain Latin names, numbers and URLs. Learn how the bidi algorithm orders them and how to isolate text with HTML and CSS.
Arabic & RTL2 min read
Designing forms and inputs for RTL
Not every field should flip. Learn which inputs stay left to right on an RTL page, which use auto direction, and how to align labels and messages.
Arabic & RTL2 min read
Line height and weight for Arabic text
Arabic text usually needs more line height than Latin, lighter weights can fade, and size may need adjusting. Practical starting points to test.
Arabic & RTL2 min read
Localisation is more than translation
Translating words is one step. Localisation also covers layout, plurals, dates, units, imagery and tone. A checklist for Arabic products.
UX writing2 min read
Writing helpful error messages
A good error message says what happened and how to fix it, in plain words and without blame. Examples, patterns and accessibility basics.
UX writing2 min read
Writing clear button labels
Good button labels name the action: a verb plus an object. Patterns for specific, consistent, translation-friendly labels.
Research & testing2 min read
User interviews: the basics
How to plan and run a user interview: set a goal, recruit the right people, ask open questions about past behaviour and listen more than you talk.
Research & testing2 min read
Writing survey questions without bias
Biased wording quietly ruins survey data. Learn to spot leading, loaded and double-barrelled questions and to design clear, balanced answer options.
Research & testing2 min read
Why five users can be enough
Nielsen’s well-known advice is often misread. Five users per round can reveal most problems, as long as you test in small rounds and fix between them.
Research & testing2 min read
Card sorting for navigation and IA
Card sorting shows how people group and name content. Learn the main types, how to prepare cards and how to read results to shape navigation.
Research & testing2 min read
Tree testing your navigation
Tree testing checks whether people can find items in a navigation hierarchy shown as plain text, without visual design getting in the way.
Research & testing2 min read
Jobs to be done in plain terms
Jobs to be done frames needs as the progress a person wants in a situation. Learn to write job statements and use them to prioritise features.
Research & testing2 min read
Affinity mapping research notes
Affinity mapping turns a pile of research notes into themes. Follow the steps, turn themes into How might we statements and avoid common pitfalls.
Research & testing2 min read
Combining analytics and qualitative research
Analytics show what happens and how often; interviews and tests explain why. Learn to use both together, avoid vanity metrics and respect privacy.
Process & product2 min read
Prioritising with RICE and MoSCoW
RICE and MoSCoW help teams rank work with a shared method. See how scoring works, with an illustrative example, and where these tools mislead.
Process & product2 min read
Running a useful design critique
A good critique improves the work toward its goals. Learn how to set goals, structure feedback, avoid solutioning and handle feedback well.
UI & visual design2 min read
Building a type scale
A type scale gives every text size a reason. Learn how to pick a base size and a ratio, set line height, and make sizes responsive.
UI & visual design2 min read
Setting up a spacing system
A spacing scale based on 4 or 8 points keeps rhythm consistent and handoff simple. Learn the tokens, proximity, and density options.
UI & visual design2 min read
Colour tokens: primitive and semantic
Name colours by role, not by hue. Primitive and semantic tokens make states, dark mode and theming cheaper to build and maintain.
UI & visual design2 min read
Layout grids: columns, gutters, margins
A grid brings order to layouts. Learn columns, gutters and margins, content-led breakpoints, comfortable line length and CSS grid basics.
UI & visual design2 min read
Designing dark mode properly
Dark mode is not an inversion. Learn soft surfaces, off-white text, elevation by lightness, adjusted accents and how to honour user settings.
UI & visual design2 min read
Designing useful empty states
An empty screen is a chance to guide people. Learn the four kinds of empty state, what each should say, and how to avoid dead ends.
UI & visual design2 min read
Icon design principles
Icons save space but can confuse. Learn when to add labels, how to keep a consistent grid, and how to make icon buttons accessible.
UI & visual design2 min read
Visual hierarchy basics
Visual hierarchy tells people what to look at first. Learn the five levers, the squint test and why removing beats adding emphasis.
UI & visual design2 min read
Button hierarchy and states
Not every button deserves equal weight. Learn the four button levels, the six states, consistent sizing, and button versus link semantics.
Web & performance2 min read
Choosing image formats for the web
The right format and markup keep pages fast and stable. Learn when to use JPEG, PNG, WebP, AVIF and SVG, plus srcset, dimensions and lazy loading.
UX writing2 min read
Writing onboarding copy that gets people started
Onboarding copy should lead with the value, keep steps short, let people skip, and explain permissions in context. Measure it by the first real task.
UX writing2 min read
Confirmation dialogs that people can trust
Use a confirmation only when the action is risky, prefer undo when possible, and write a specific title, consequence and button labels instead of Yes or No.
UX writing2 min read
Voice and tone in product writing
Voice stays constant while tone adapts to context. Learn the four tone dimensions, write three voice principles, and keep Arabic and English consistent.
UX writing2 min read
Placeholders are not labels
Placeholder text disappears, is often low in contrast and is not a reliable accessible name. Use a persistent visible label with optional hint text.
Process & product2 min read
A design handoff checklist for developers
A good handoff covers every state, responsive behaviour, tokens, assets, motion, accessibility, content rules and edge cases, then a review of the built result.
Process & product2 min read
Design system basics: where to start
A design system is tokens, components, patterns and documentation. Start with an audit, begin small, name things clearly, and measure adoption.
Process & product2 min read
How to write a UX case study
A strong case study has a clear structure, separates your work from the team’s, is honest about gaps, never invents metrics, and respects a hiring manager’s time.
Web & performance2 min read
Loading web fonts without hurting performance
Use WOFF2, subset large fonts, preload only the critical one, choose font-display with care, and tune fallback metrics to reduce layout shift.
Web & performance2 min read
A responsive design checklist
Build mobile-first, use fluid type and content-led breakpoints, keep touch targets usable, avoid horizontal scrolling, and test on real devices.
Web & performance2 min read
Designing loading states
Match the loading pattern to the wait: know the three response-time limits, choose skeletons, spinners or progress bars, and announce changes accessibly.