How did Emirates Health Services use the Design System 1.0?

The technology approach

As any website may need, there was a content management system that set the backbone for implementing the new website of EHS. They opted to use a custom-created content management system and customised existing parts of the content management system to suit their needs.

A design system is essentially a front-end development stack. Version 1.0 of the Design Language System was focused on providing UI and design objectives. There were implementation guides on how to use these elements, however, the ability to create and use them in code was left open. EHS used RequireJs, jQuery, Bootstrap 5 and created components from version 1.0 of the design system using custom CSS.

The content management system is a proprietary system which is based on the .NET framework and uses Entity Framework 4 along with an MSSQL Server database to store data. All their technology is stored on-premises, and they currently do not use any cloud infrastructure services to power their digital network.

Although Bootstrap 5 comes bundled with a set of JavaScript plugins for elements such as tabs and tooltips, EHS created a layer of modifications on top of it and uses this as their method to implement the design system for interactive components.

Challenges to overcome

The DLS version 1.0 was focused on providing instructions in terms of design and UI only. Hence, there was a challenge to implement them and select the best tools to convert the UI to a working component. Moreover, the initial version of the design system had certain elements missing that were required by EHS, leading to them pivoting the design system and adding additional components themselves.

Compliance with standards was a key metric, and while pivoting to the addition of components, EHS had a challenge validating the compliance level.

However, with a strong team of experts, EHS was able to create a working model for their new digital presence within 5 months and continued to enhance their presence online with an agile approach.

The path forward

The website of EHS receives about 220,000 visits in a month, with an average of 15 page visits per session. Over 92% of all traffic on their website is from the United Arab Emirates. Their website currently has a Largest Contentful Paint (LCP) measure of 2.7 seconds and a First Contentful Paint (FCP) measure of 1.4 seconds. It is expected that this will improve very quickly and fall within the required parameters. A key success metric for the design system assessment criteria is to achieve a speed index that falls within the required parameters.

EHS also uses a variety of other tools and technologies to power its online and digital presence and incorporates the design system within tools that allow it to do so. Having implemented the DLS v1.0, EHS secured the best-designed website award at the Global Government Excellence Award at the World Government Summit held in 2022.

In Oct 2023, the TDRA launched version 2.0 of the design system for the United Arab Emirates. This upgrade brings a host of new features and addresses challenges faced by entities using version 1.0. EHS aims to start implementing the new framework and design system within their digital infrastructure soon.