The Thumb-driven Democracy: Designing Government Services for a mobile-first experience
A business owner renewing their trade license is not always at their desk, they could be in a taxi, phone in one hand, scrolling with their thumb.
A parent checking the school registration status could be in a supermarket queue.
Someone reporting a municipal issue is right there at the location, phone in hand and ready to submit the details of the issue.
With over 99% smartphone penetration in the UAE, mobile isn't an alternative interface. It is the primary one. Yet many government services still feel like desktop experiences squeezed onto smaller screens.
True mobile-first design means rethinking everything for how people actually use phones, which is, with their thumbs, on the go, often one-handed, sometimes with spotty connectivity, always with limited attention.
The mobile usage reality
People use government services on mobile:
- While commuting on crowded public transport
- During brief work breaks away from their desk
- In locations with poor connectivity
- While managing other tasks
- With one hand while holding something else
These aren't edge cases, they're typical contexts. If your service doesn't work here, it doesn't work for mobile users.
The thumb zones and ergonomics
Not all screen areas are equally accessible. Your thumb can only reach so far comfortably.
The thumb zone reality:
- Bottom third: easy one-handed reach
- Middle section: requires thumb stretching
- Top section: requires grip shift or second hand
Yet many interfaces place critical actions at the top navigation. Elements such as submit buttons, important controls or support. This forces uncomfortable reaching.
The smart placement:
- Primary actions in the bottom third
- Secondary actions in the middle
- Top zone for information display, and tertiary action (such as a previous screen)
- Touch targets minimum 48x48 pixels
- Spacing between tappable elements matters
Rethinking information density
Desktop displays lots of information simultaneously. Mobile screens cannot always display everything without overwhelming users. Mobile interfaces need to be smarter in the delivery of content.
Government services involve complex information: eligibility criteria, documents, process steps, legal disclaimers. It is absolutely necessary to show everything, but on desktop we can show everything on a single page. On mobile, this creates overload if its all in a single scroll zone.
Mobile information principles:
- One primary task per screen
- Progressive disclosure of details
- Collapsible sections for extras
- Clear hierarchy with white space
- Generous line height and font sizes
Break complex services into focused steps rather than showing everything at once. This should be a general UX principle applied for content density.
Mobile forms done right
Forms are fundamental to government services and particularly challenging on mobile. Essentially, every service is a form that needs to be filled in (either manually, or with pre filled information from UAE Pass)
Forms are the most essential part of the user experience when engaging with government services. Hence, it becomes essential to concentrate on their mobile strategy.
Essential form strategies for mobile
Appropriate input types: Numeric keyboards for phone numbers. Date pickers for dates. Right keyboard for each field. Perhaps the most important element is to pay attention to the "type" in an input element so that keyboards on the user's device can react appropriately.
Progressive questions: Show shorter groups of questions at a time instead of a single long scrolling form. Break up the form into steps and clearly highlight the step.
Real-time validation: Flag errors immediately while context is fresh, not at submission. Validation must be real time and triggered on the "blur" or "focus out" state, without causing disruption or flickering of the layout.
Auto-save progress: Mobile sessions get interrupted constantly. Save details automatically so people can return without restarting. Utilise local cache or sync with a server to save draft content.
Pre-fill known data: UAE Pass login enables automatic filling of known information. Utilise the use of UAE Pass as much as possible.
Easy review: Show clear summary before submission with easy editing access.
Designing for intermittent connectivity
Desktop users have stable internet. Mobile may not. Although the UAE has excellent 5G connectivity, we must understand that mobile connectivity means the user may be in a remote part of the country trying to access a service.
People also move through buildings, elevators, tunnels, and areas with varying signal strength. Hence, we must not assume that connectivity is stable on a mobile.
Connectivity-aware design
Offline capabilities: Can users access previously viewed information offline? Prepare forms offline and submit when connected? These are questions that must form part of the UX study of a service.
Clear status: Show connection status clearly so users know what's happening. Applications must indicate when internet connectivity is lost, yet allowing users to browse through the app. DO NOT block access to the app if connectivity is lost.
Graceful degradation: Operate with reduced functionality rather than complete failure. Example, if connectivity is lost - it may not be possible to retrieve accurate information from UAE Pass. In such a case - allow the user to enter their Emirates ID and perform a look-up using this the provided Emirates ID. Display the retrieved information to the user once connectivity is back and then allow the user to submit the form.
Background sync: Queue offline actions to sync automatically when connectivity returns.
Mobile navigation
Desktop supports complex navigation with multiple menus, sidebars, breadcrumbs ...etc. Mobile apps can't without cluttering limited space. Hence, we need to be smart about organising the navigation of an application.
Effective patterns
Bottom navigation: Primary sections in the thumb-accessible zone. This must be a collection of 3 - 5 action elements. UX study must indicate what are the most important actions to place upfront, and what may be part of a "more" menu.
Progressive disclosure: Reveal deeper levels as users navigate in the steps itself. Place action buttons to take user to next steps or relative content.
Clear back paths: Always provide obvious ways to return. This is where the top section can be used to allow users to get back to a previous screen, yet allowing them to start back by using the action elements on the bottom of the screen.
Prominent search: Finding by browsing is harder on mobile. A search function makes things easily accessible. Search does not need to be global on a mobile app, but it can certainly be a great way to get a user started on a journey.
Progress indicators: For multi-step processes, always show current position and remaining steps.
Considerations to be made for UAE
The goal is to always bear in mind that the application or mobile experience is being used by citizens and residents of the United Arab Emirates.
Design for the country. Every market has its own cultural cues, language nuances, and communication style — and when your app reflects them naturally, it feels familiar, native, and instantly more trustworthy.
Inclusive mobile design
Language switching: Arabic and English switching should be seamless and persistent. The mobile experience must be delivered in both these languages flawlessly.
Device diversity: Test on budget devices with less power and smaller screens.
Data consciousness: Be aware that users on a mobile device may be on the move and using a data plan from a provider. Tourists in the UAE may also be using a data plan with limited allowances. Do not load heavy media or auto place a video. Be conscious about the data usage.
Clear visuals: Icons and visual cues work across all literacy levels. Hence, make use of icons as much as possible. The use of a magnifying glass is a global cue for search.
Content and context: Always tailor your content with relativeness to the UAE and use appripriate terms with meaning full context in help sections.
Implementation guide
- Start mobile-first: Begin with mobile experience, then expand to desktop.
- Audit current services: Test on real devices. Identify pain points: hard-to-tap buttons, illegible text, awkward forms.
- Prioritize mobile flows: Optimize most commonly accessed mobile services first.
- Use PWA capabilities: Progressive web apps provide app-like experiences without app store distribution.
- Leverage UAE Pass: Use it to reduce manual data entry and streamline authentication.
- Monitor metrics: Track mobile completion rates, task times, abandonment. Compare to desktop.
Conclusion
Mobile-first government design isn't about squeezing desktop onto smaller screens. It's rethinking how services work to match people use phones, which is, with thumbs, on the go, with divided attention and intermittent connectivity.
With 99% smartphone penetration in the UAE, mobile is how most citizens and residents access government services. When these work smoothly on mobile, government becomes more accessible and responsive.
The shift requires challenging desktop assumptions. Prioritize thumb accessibility. Design for intermittent connectivity. Optimize for small screens and touch interfaces.
When we get mobile-first right, we enable government interaction during in-between moments: while commuting, during breaks, in queues, or right when they need to document something.
That's thumb-driven democracy: government services that work as naturally as everyday apps, designed for how people hold phones, tap with thumbs, and navigate life with smartphones as constant companions.
How to implement
- Start designing with a mobile-first approach. Think about the strategy with a clear mobile first design and then expand to desktop
- Audit the current service design. Test it on real devices and identify the pain points.
- Optimize the most commonly used service first
- Do not always depend on releasing an app update through app stores to reflect a change. Leverage the concept of progressive web apps for services
- Monitor metrics and track usage. Measure the metrics strictly and use it to further improve design
Building mobile-first government services? Explore our Mobile Applications Guidelines
