Mobile app UI/UX design · UAE

App design that works in Arabic and English.

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 people

What mobile app UI/UX design is

What mobile app UI/UX design hands over.

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.

Checkout flowARWireframeUI designPay AED 690PrototypeLive flowLayla

How people move through it.

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.

Every screen, drawn.

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.

A system your developers reuse.

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 things app design gives you.

Six artefacts from a design engagement. Five are things a stakeholder reviews, and one is the thing engineering actually builds from.

UX researchgrounded in tasksJourney · where users drop1Discover100%2Sign up62%3First order48%4Reorder41%sign-up drop-off · 38%Top jobs to be doneReorder in under a minuteTrack my delivery liveTrust a new branda design grounded in real tasks, not guesses

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

Output

a written account of where the current task actually stalls

SessionsOn device
Wireframesstructure firstApp bar + titleSearchProduct gridTab barthe layout argued out cheaply, in grey boxes

The whole journey, mapped.

Structure in grey boxes, and the moments the app hands over to something else and gets it back

Output

a flow that accounts for leaving the app, not only for using it

GreyboxHandovers
UI / visual designon-brandRutab MarketMedjoolAED 68Order nowType scaleAaAaAaBrand colourMotionease-out · 240msan app that looks like it can be trusted

A visual system developers can code.

Type scale, colour, spacing and motion written as numbers an engineer can type

Output

a specification rather than a screenshot somebody has to measure

TokensSpecified
PrototypingclickableFigma prototype · flowHomeProductCartusability fixed in design, not in code

A prototype you can tap through.

The flow clickable on a handset, with each disputed decision written down and settled against what people did

Output

fewer opinions in the build review

ClickableSettled
Design systembuild-readyComponentsButtonInput fieldToggleCardTab barTokensprimarysuccesswarnradius 8 · space 4/8/16 · type 12/14/18a consistent app and a faster build

Components, with their Arabic versions.

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

Output

the Arabic release as a build rather than a redraw

StatesMirrored
UX auditprioritised fixesWhere users dropHome100%Product74%Cart52%Checkout30%P1Guest checkout missingP1Cart hidden below the foldP2Tap targets under 44pta prioritised list of fixes, worst drop-off first

A review of the app you have.

The first session walked on a handset, with the drop-off named screen by screen

Output

a ranked list, and an honest answer on whether a redesign is warranted at all

TeardownRanked

What the handover has to survive

The same design, three kinds of team.

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 thingA tidy design fileOrganised, and still only screensA documented systemComponents, with every state written
The Arabic releaseRedrawn, 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 laterDrawn 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 asksWhat 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 nextThe people who drew it, and only while they still remember.One engineer, guessing consistently.A second team, without redrawing what already exists.
The store listingScreenshots improvised at submission, in one language.Improvised more attractively, still in one language.Produced from the system, per device class and per language.
How the scope changes.

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

What most app design here is for.

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.

  1. 01of 04
    Adoption is mandatedNot chosen

    Staff apps are used because people have to.

    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.

    Our methodSessions run with the people who have to use it, not with the people who bought it.
  2. 02of 04
    Direction is a stateNot a translation

    Skipping Arabic states turns Arabic into a second project.

    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.

    Our methodEach component specified with its mirrored variant, before the English build starts.
  3. 03of 04
    A screen set is not a handoverThe questions are elsewhere

    Developers ask about screens nobody drew.

    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.

    Our methodAn engineer builds one screen from the system before handover, and their questions are fixed.
  4. 04of 04
    The listing is design workAnd nobody scopes it

    Store listings need their own designs.

    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.

    Our methodListing assets produced from the component system, per store and per language.

What the engagement covers

Inside the design work.

Six stages across five weeks. The system is the last one and the one everything else is shaped to produce.

Research · flowsSTEP 01PERSONASUSER FLOWLandExploreConvertWho they are and the path they take.

Research and journeys.

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.

  • Sessions
  • Flows
Wireframe · to UISTEP 02WIREFRAMEUIGrey boxes first, then the real interface.

Wireframes and structure.

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.

  • Greybox
  • Structure
Prototype · testSTEP 03PROTOTYPEUSER TEST5 usersFound checkoutNav understood!Filter confused 1Click-through tested before a line of code.

Visual system and prototype.

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.

  • Values
  • Walked
Design system · componentsSTEP 04COMPONENTSTOKENSAaTypeSpacing scaleA component library the build maps to.

Components and every state.

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.

  • Components
  • Mirrored
Accessibility · polishSTEP 05CONTRASTAa4.8 · AA44px targetCHECKSContrast AATap targetsLabels & rolesFocus orderReadable, tappable, WCAG-checked.

Contrast, tap targets and long words.

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.

  • Contrast
  • Long strings
Handoff · build-readySTEP 06SPEC1624EXPORTJSONTokenscolour · typeFIGComponentsdev modeSVGAssets · iconsexportedSpecs, tokens and assets the devs build from.

Handover, tested by building it.

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.

  • Specified
  • Rehearsed

Our stack

Designed in Figma.

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
Why Figma

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.

How we excel

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.

Variants on componentsOne source of truthMirrored state
FigmaA variant
A duplicate pageA copy
SketchA symbol
Screens in a deckNone

How the work runs

Five weeks to a buildable design.

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.

01Week 1Scoped

Research and wireframes.

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.

  • Taskwatched, not described
  • Flowincludes the handovers
  • Structuresigned off in grey
02Weeks 2 to 4Built

The visual system and prototype.

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.

  • Systemvalues, not pictures
  • Prototypeon a handset
  • Decisionsclosed against behaviour
03Week 5Running

Every state, written down.

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.

  • Statesincluding the mirrored one
  • Listingassets from the system
  • Handoverbuilt from before we leave

Measured on what engineering has to ask, so the gaps close before the handover does.

The system, in writing
Every stateMirroredBuilt from

Our commitment

Our promises to your engineers.

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

App design, answered.

Next step

Get your app design scoped.

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.

+971
Chat on WhatsApp