DubaiNow - A "Mobile-First" UX approach
Client: Smart Dubai
Sector: Government services
My Role: Senior UX designer - service design and implementation
Time: 1 Year
1. Abstract
Integrating complex government services into "on the go" mobile services onto a mobile screen was completed to good effect by adopting a “Mobile first” design approach in product development strategy. This means breaking the flow into simple task-oriented designs where users focus on one main task at a time in a series of steps towards accomplishing their end goal.
2. BackgroundDubaiNow is a government app that provides seamless access to over 120 government and private sector services from over 30 entities, all on a single platform. As Smart Dubai's flagship product, it aligns with their mission to make Dubai the happiest city in the world. You can get anything done from paying your bills to managing your residence visa.
After building the “Smart Library” design system (read about it here), I joined the Service Squads and was instrumental in developing and implementing a "Mobile first" design approach. Read on for the key strategies.
3. Team Structure & Process
Our Service Squad consisting of Project Leads, Front-end and Back-end developers and myself as the Senior UX Designer, are assigned several prominent government entities such as DEWA (Dubai’s Electricity and Water Authority) and RTA (Roads and Transport Authority) to name a few. Our PMO's start by defining and retaining the most popular government services to be integrated onto DubaiNow using the entity’s existing APIs.
Process:
The service integration process, although never linear, can be depicted as below:
Service integration process and Squad structure
4. Strategy
4.1 “Mobile First” approach
Integrating complex government services onto a mobile screen naturally meant adopting the “Mobile first” design approach in product development strategy. This means breaking the flow into simple task-oriented designs where users focus on one main task at a time in a series of steps towards accomplishing their end goal.
In order to implement this mobile first strategy, the first step after assessing the service (which can be web or app based, and sometimes a physical service) is to produce a task flow.
Below is an example of the Ejari task flow. Ejari is an online registration system initiated by Real Estate Regulatory Agency (RERA) that registers all rental or lease contracts.
Example of the Ejari Task Flow
The next step is reducing user input and friction in the wireframing phase as well as keeping the steps to a minimum. This was achieved by leveraging mobile specific features and inputs such as GPS for location selection, telephone keyboard, credit card number, car license plate), picking the right type of keyboard (numeral, mixed or alphabet), easily sharing and downloading official documents (using camera to upload documents) etc.
4.2 Way-finding
With so many services, a Flat navigation made sense with a home button that displays all categories containing the services. A dashboard that displays urgent matters, expiring applications, reminders etc, that require a user’s attention and the always accessible Search function. All services have been intuitively grouped into 12 main categories pertaining to a residents main activities (visas & residency, driving, etc.). Within the categories, the screen has been split into top and bottom, with the top section allocated for the services with the highest usage frequency (certain services such as renewing your vehicle registration are used once a year, others such as parking could be used on a daily basis) and the bottom for less important services. Some major services have from several entry points depending on the situational context. For instance, you can pay your fines from you driving license service and also from an independent entry point in the driving category.
Service organization inside the Driving category
4.3 Notification, Communication & Tone
Setting up a solid communication strategy is crucial in assisting users with their tasks and guiding them towards achieving their goals especially on mobile where users have shorter attention spans, and limited amount of real estate to include detailed information. Notifications, alerts, error messages, confirmations, announcements, and acknowledgments are carefully designed to deliver information according to the type of information, the level of urgency and wether users action is required.
They come in 3 categories:
Informative (info pages, info boxes, inline footers, empty states, tooltips etc.)
System feedback (popups, badges, snackbars, progress indicators etc.)
Warning & error communication (alerts, modal popups etc)
With 3 levels of priority:
High priority for critical information requiring immediate user attention or action.
Medium priority for info users need to be aware of but does not require immediate attention.
Low priority for acknowledgements and system feedback, extra information
Notification design:
Color coding with contrasting colors (oranges and reds) for warnings and high priority alerts and errors, blues for medium or main info, greys for low priority. Colors are also used to indicate status and progress.
Size & placement also play an important part in visual hierarchy to draw attention.
Behavior according to the priority such as: sticky or always present, only dismissed by user to draw attention, or dismisses itself for low priority.
Considering the huge amount of services, sending the right amount of push notifications and the timing are important so as not to overwhelm users with constant intrusions.
Finally, setting a consistent tone by adhering to specific UX copy guidelines. We chose a clear, simple and formal tone that inspires trustworthiness while addressing our users.
4.4 Native Design
Our users are divided almost equally between Android (51%) and iOS users (49%). This made us reconsider our initial custom designs to reverting to native design in order to deliver a smooth and intuitive experience that our users are used to.
4.5 App Performance
Achieving a high-performance experience is not just a developer’s job. Designers should also be aware of how their designs can influence an app’s performance. This is done by using pre-developed components, breaking down flows into smaller steps when fetching back-end data or performing calculations and using the smart loading concept for the user to perceive progress instead of delay.
4.6 Security & Verification
UAE Pass is the internally developed National Digital Identity and Digital Signature solution for the UAE. It helps verify users based on their Emirates ID and provides safe access. In addition to verification, it also reduces required user input by fetching their official details from any government entity, offering a seamless experience.
Various templates for different services
5. Learnings
Design Systems are a life saver
Especially for a project of such scale, with a huge amount of services. Even though it took considerable time to develop the design system in parallel with developing and integrating new services, it was the correct decision - and ultimately delivered a clean, consistent app and streamlined the service production, thanks to the design library.
User Research & Testing
Even though Smart Dubai is equipped with every designer’s dream test lab, we never got to do proper testing due to the time restraints and a huge number of flows. Despite that, I always made sure to interview a few colleagues as initial user research to fully understand the intentions, mental models and goals. I also quickly tested my prototypes and that proved particularly useful to resolve differences in design decisions with business. The reward of producing more relevant work is always worth it.
A Single Source of Truth
Developing components has been the biggest struggle in terms of timelines, communicating with developers especially component behaviors and states, bugs etc. It’s extremely important to document the components early on in an organized way and to use a single source of truth. A clear hand-off process between designers and developers helps keeps things organized and on track. We experimented with many solutions from a word file documenting the components coupled with Zeplin for the specs, to a web-based interactive component library to finally using Jira and Confluence as they're tools shared by the entire team.
Design Review Sessions
Regular reviews keep you from getting awkward last minute surprises. It's true, they can be very time consuming but if a clear agenda is set from the start, they can be very efficient. Needless to say that working as a team and keeping everyone in the loop is key to make sure everything is flowing smoothly especially across squads.
