We watch people use it.
The job the app is opened to do, watched on a handset held one-handed rather than described in a workshop
a written account of where the current task actually stalls
Mobile app UI/UX design · UAE
Mobile app UI/UX design here has to hand over more than screens. Every state is specified, including the Arabic one, so a developer never has to guess.
See where the first session loses peopleWhat mobile app UI/UX design is
The screens are the visible half and the shorter half. What decides whether the design survives the build is the system underneath it, and what that system says about states.
The task the person opened the app to finish, settled in grey boxes before any visual work. On a handset that includes the moments the app is not on screen, because a sign-in that switches out and back is a flow, not a screen.
Type, colour, spacing and motion, specified as values rather than as pictures. A screenshot is not a specification, and an engineer building from one is guessing at every number it does not print.
Components with every state written down, including the mirrored one. A component that has a right-to-left variant is a build; one that does not is a second design project, and the difference is decided here.
The scope
Six artefacts from a design engagement. Five are things a stakeholder reviews, and one is the thing engineering actually builds from.
The job the app is opened to do, watched on a handset held one-handed rather than described in a workshop
a written account of where the current task actually stalls
Structure in grey boxes, and the moments the app hands over to something else and gets it back
a flow that accounts for leaving the app, not only for using it
Type scale, colour, spacing and motion written as numbers an engineer can type
a specification rather than a screenshot somebody has to measure
The flow clickable on a handset, with each disputed decision written down and settled against what people did
fewer opinions in the build review
Every component with what it does when the text runs long, when the network fails, when there is nothing to show, and when it mirrors
the Arabic release as a build rather than a redraw
The first session walked on a handset, with the drop-off named screen by screen
a ranked list, and an honest answer on whether a redesign is warranted at all
What the handover has to survive
Every design engagement ends in a file. What separates them is what a developer who was not in the room can build from it.
| A set of screensPictures of the finished thing | A tidy design fileOrganised, and still only screens | A documented systemComponents, with every state written | |
|---|---|---|---|
| The Arabic release | Redrawn, because nothing said what mirrors and what stays put. | Redrawn, more neatly, and quoted as a second project. | Built, because the mirrored variant is a state on the component. |
| A screen added later | Drawn by whoever is free that week, and it shows. | Consistent, as long as someone opens the right file first. | Assembled from components that already carry their states. |
| What engineering asks | What happens when this is empty, long, failing or mirrored? | The same four questions, asked of a better-organised file. | Very little, because the states are specified rather than implied. |
| Who can build it next | The people who drew it, and only while they still remember. | One engineer, guessing consistently. | A second team, without redrawing what already exists. |
| The store listing | Screenshots improvised at submission, in one language. | Improvised more attractively, still in one language. | Produced from the system, per device class and per language. |
The state work moves to the front, where it is a fortnight, rather than to the Arabic release, where it is a project. That is the whole argument, and it is why the handover is quoted as a system rather than as a screen count. This page is about apps on a handset; where the product is a web application, the state set is argued at web UI and UX design, and the pillar covers what the build itself involves.
What we find on app design here
Webzenia has worked with Gulf clients since 2018. Four things about designing an app in this market, and the first one changes the craft entirely.
Nobody has to be delighted into opening it, and nobody can be lost to a competitor. What matters is error recovery, one-handed use and how long a new starter takes. A Jebel Ali logistics operator under JAFZA whose gate staff route around the app has a design fault, not a training one.
Both platforms name the mechanism: Android needs the manifest flag, start and end, and a mirrored resource set; Flutter needs directional insets, and hardcoded sides do not mirror. A Bur Dubai jewellery retailer on a mainland DET licence was quoted twice for one product because of it.
What does this do when the list is empty, when the name runs long, when the upload fails, when it mirrors. A design that answers none of those is answered by a developer instead, at the moment they hit it, and their answer becomes the product.
Screenshots at each device class, for each store, and in each language you publish in. An Al Barsha education provider on a mainland DET licence shipping a parent app in both languages needs two full sets, produced from the system rather than improvised the week of submission.
What the engagement covers
Six stages across five weeks. The system is the last one and the one everything else is shaped to produce.
The job the app exists to do, watched rather than described, and the flow mapped including the points where it hands over to another application and gets the person back.
Grey boxes first, so navigation and hierarchy are argued before anything is styled. Structure settled here is structure nobody relitigates over a colour choice in week four.
Type, colour, spacing and motion as values, assembled into a clickable prototype and walked on a handset so the open questions are closed against behaviour rather than opinion.
Every component with empty, loading, long, failed and mirrored written down. This is the stage that decides whether the Arabic release is a build or a second commission.
Tap targets, contrast and what a component does when a label is half again as long, which on a bilingual product is not an edge case but the second language.
Before the files are handed over an engineer builds one screen from the system alone. Whatever they have to ask is a gap in the specification, and it is closed before we leave.
Our stack
Two tools for the work, one for the evidence, and two platform specifications that already define how a layout mirrors. Select one to see what it settles.
Figma is where a component can carry its variants, so a mirrored state lives on the component itself rather than in a second page of screens somebody has to remember to update.
We build the mirrored variant as a property of the component, not as a duplicate frame, so the two directions cannot drift apart the first time a button changes.
How the work runs
Design here is measured in weeks, not months, and it finishes before the build starts. Each week ends in an artefact the next one cannot begin without.
We watch the task being done, map the flow including the moments the app hands over to something else, and settle structure in grey boxes. Nothing is styled in this week, deliberately: a structure argued against a colour palette is a structure nobody wins.
Type, colour, spacing and motion are set as values, the screens are drawn from them, and a clickable prototype goes onto a real device. Every disputed decision is written down and closed against what people actually did with it, rather than against who spoke last in the review.
The components are documented with empty, loading, long, failed and mirrored states, and the listing assets are produced from the same system. Then an engineer builds one screen from the specification alone while we are still here, and whatever they have to ask becomes the last edit rather than the first support ticket.
Measured on what engineering has to ask, so the gaps close before the handover does.
Our commitment
App design fails at the handover, months after everyone approved the screens. These four are written into the scope because that is where it fails.
Every state drawn, Arabic included.
Empty, loading, long, failed and right to left, on every component rather than on the screens that happened to be drawn. A state left unspecified is a state a developer invents under deadline.
An engineer builds from it first.
One screen, from the system alone, while we are still on the engagement. Whatever they have to ask is a gap in the specification, and it is closed then rather than discovered by your team in month three.
We review before proposing a redesign.
If the problem is one flow, we say so and quote that flow. A redesign sold against a symptom nobody diagnosed is the most common waste in this category, and it is easy to avoid.
The files and fonts are yours.
Your design workspace, your component library, and licences held in your name rather than ours. A system you can only open by asking us is not a system you own.
Common questions
Keep exploring
Native Swift, and the entity Apple publishes as seller.
Kotlin, and the five manufacturer skins this market runs.
One codebase, and the parts written per platform.
One widget tree, and an Arabic screen that mirrors itself.
For teams that already write React and have to hold it.
A shopping app costed against the repeat order.
Two-sided products where the fleet is the harder half.
Internal apps for staff who are not at a desk.
Subscription products whose customer is a licensed company.
Next step
Send the app or the flows. We will come back with where users stall, and what the design fix actually is.
Tell us what you need.