NOW LIVE AT
Qatar’s next
generation digital government
Hukoomi is an eService Government platform used for availing government services for Qatari citizens.
The goal is to understand how might we serve the needs of Qatari citizens through smart government eServices?
DURATION
07 months
ROLE
Design System Lead
TEAM
1 x Design manager
1 x Visual design lead
1 x Interaction lead
3 x Junior designers
2 x Developers
RESPONSIBILITIES
Design System lead
Visual Design
Design documentation
Collaboratation
How might we serve the needs of Qatari citizens, residents, businesses & visitors through smart government eServices that revolve around their moments of life?
CHALLENGE
01.
Background
Qatar has been pushing to establish Hukoomi - as a digital manufacturing ecosystem to be the best in class for Government eServices.
Qatar's citizens are the primary beneficiaries of the Digital Factory's vision. From obtaining birth certificates to school selection, this platform will transform traditionally bureaucratic processes.
Qatar is embarking on a digital transformation, moving from a fragmented, paper-based system to a centralized, user-friendly digital platform.
By digitising services, citizens can now avoid endless queues, prevent document loss, and access transparent, unbiased government systems efficiently.
I was the Design System Lead for this project. I led a team of 4. I crafted, led, supervised and compiled the Design System fir Hukoomi platform : Qatars government eServices portal.
Challenge
My Role
Design Roadmap
Hukoomi : Digital Gov
Foundations
Components
Token & Variables
Hukoomi : Digital Gov
02.
The power of Design in advancing Qatar’s vision
We began by exploring various design territories to guide us in creating visual expressions for our citizen portal.
In our discussions, we decided that in order to strike the right balance, we will focus on “Purity” to provide services in a simple, efficient manner, and “Qompanion” to guide our users through their moments of life.
Our experience commitment is to create a platform that would act as a companion, facilitating your needs in the most efficient way possible. We’re making the experience of your daily government chores friction-less, more guided, seamless and easy.
Open structures act as lattice between worlds
Mashrabiya patterns to culturally enrich our designs
Warm and quiet sandy color that connects building to nature
FOUNDATIONS
02.
Problem statement
How might we create a design systems that serves the needs of Hukoomi eService platform for its ministries that best reflects Qatars identity.
25+ Government ministries
50+ Government services
Serving 3.37mil citizens
Life moments for Qatari residents
Child birth
Life moment
Registration for a new birth certificate
Reissue of birth certificate
Application for health check
Public health and welfare services
Services offered by Hukoomi
Education
Search for schools in Qatar
Student registration for Public school
Request to transfer a sibling
Book & Transportation fee payment
Marriage
Request marriage contract
Apply for a new health card
Pre-marital health check
Selection of an Imam
Retirement
Retirement pension application
Request contribution fund
Pensioner card issue
Calculate beneficiary shares
Overview
Format
Editorial
Companion
Task focused
Capabilities
Onboarding
Explore Life Moments
Browse eService
Application flows
Payments
Customer support
Platform
Web
Mobile
Watch
Structure
Foundation Library
Foundation Library serves as the cornerstone, not only providing essential design elements but also establishing a structured framework that streamlines the development of child libraries, ensuring a unified and efficient design system that can be reshared and reused across multiple touch points and channels.
The Foundation Library encompasses essential elements that form the building blocks for a cohesive and consistent design system. These elements include:
Design Library Structure
Flow
Goals of the Design System
What can the DLS provide us?
1. Provide components for reuse across design
2. Provide flexibility for design to address specific use cases not covered in components
3. To document the behaviours, interactions and design for the system.
4. Actively being used by development teams
Library structure
Style Guide
Web components
App components
Documentation
Patterns
Usage
Works best when working with large colour blocks
-
The main entry point to the system makes use of darker content (darks), colours are used to break up blocks of information that are unrelated with stark differences.
-
2nd level onwards leverages secondary colours for the backgrounds maintaining a 50% balance between secondary and light colours.
-
3rd level moves towards lighter backgrounds.
Things to keep in mind while using colours
-
Prominent information such as headers will have the strongest contrast
-
Primary colours are used sparingly.
-
All colours listed with a unit below 100 use transparency, all colours listed with a unit 100 and above use solid colours
Colours
Designed to be both functional and accessible with the aim for AAA contrast ratio.
The usage of colours specify hierarchy of related information and as you go further into the system the colours become lighter representing the knowledge gained.
Light & Dark
100
High Emphasis
75
Medium Emphasis
50
Low Emphasis
25
Divider
100
High Emphasis
75
Medium Emphasis
50
Low Emphasis
25
Divider
Primary & Secondary
100
Primary
D150
Dark mode
D100
Dark mode
30
Dark mode
15
Dark mode
100
Sand
Emphasis
100
Primary
200
Warning
150
Warning
100
Warning
15
Warning
100
Primary
100
Information
10
Information
Accessibility
Shadows are predominantly used on Android.
Surface
Used exclusively on bg surfaces
Soft-down
LD0
Dark mode
LD0
Dark mode
LD1
Dark mode
LD2
Dark mode
LD Scroll
Scroll
Secondary Scroll
Scroll
L0
L1
L2
L Scroll
Scroll
Shadows
There are two types of shadow styles: soft shadow and strong shadow.
Blur
Blurs help to increase legibility will personalising the screen based on its surroundings.
Grid
A structure made of columns and lines, to determines the general layout of all design elements.
Corners
Brief overview about the component and its uses
Spacing
Define the manner is which information is structured on digital platforms.
Stroke
Stroke is a key visual element crafted to define and enhance the contours, outlines, and details.
Components
03.
Documenting Components : Search
Scroll below
58
components across mobile and Web
108
Tokens created
21
Led by me
·
Stylistic Inspiration
Consistent
Minimalistic
Sustainable
AA
Verified WCAG
Accessibility level
Tokens
04.
What are tokens?
Tokens are variables that represent design decisions such as color, typography, and spacing, in a consistent and reusable way.
Why do we need them?
Tokens are a single source of truth and are vital when in scaling a library. Due to it's detail oriented structure, they are useful in making edits to the system in a efficient manner.
Component type
Usage
Hierarchy
Status
Element
Property
Control
Toggle
Enabled
Selected
Background
check_box_outline_blank
Text
info
Impact