Edenred Design System
UI DESIGN | DESIGN SYSTEM
A design system for a Fintech
The Wages Protection System is a mandatory legal requirement in the UAE for businesses registered under the MoHRE. Their guidelines prevent companies from making WPS payments in cash or by cheque. Such registered companies must adhere to this system as their mode of salary payment.
However, unbanked migrants face various challenges in the UAE, such as the difficulties of sending money abroad. Despite having a large unbanked population, the United Arab Emirates became the world's third-largest sender of international remittances in 2020, transferring $35 billion abroad, according to the World Bank.
This vast sum of international money transfers is carried out by workers from South and Southeast Asia, who constitute more than 88% of the UAE’s population.
In contrast, since they often earn less than the threshold set by traditional banks, these workers do not have the luxury of digital money transfer options. Instead, they rely on physical exchange houses to send money overseas. Along with frequent trips to exchange houses, these individuals are often locked into a system where they are charged high fees and forced to wait in long queues every month to send money to their families in their home country.
This is just one of the many recurring challenges that unbanked or underbanked workers face living and working in the UAE.
Overview
In the first quarter of this year, I was offered a position at a Fintech company, Edenred - and my first task was to overhaul the Edenred Portal. Edenred is a fintech company in Dubai that drives financial inclusion in the United Arab Emirates. It is one of the largest salary processing provider in the country, offering Edenred Payroll for businesses and C3Pay for its employees. Through Edenred's Payroll portal, employers can now process employee salaries via the C3Pay card for unbanked migrants in the UAE rather than receiving their salaries through exchange houses. The app gives employees access to their finances, allows them to transfer funds easily, recharge their phones, and many more.
With the continuous growth of the Edenred Payroll portal, the product accumulated a great deal of design debt. It became evident that many of the pages, products, features, and components were not in sync with the UI and UX. No standard components of the design system exist, and each part of the portal was designed at a different time by different designers with different contexts. There was no unified design philosophy or principle to guide them.
Goals
The lack of underlying principles led to a lot of time spent debating and implementing design decisions. There was also a lack of predictability and consistency, which impacted the user experience.
The launch of a brand-new MVP model was a tipping point. Therefore, we decided to recreate the Edenred Payroll+ Design System so it can grow and scale organically over time with new products. This business goal trickled down to the rest of the team in the way of a complete overhaul of the product’s design language.
Thus, we sought to deliver the following:
- Drive consistency across all our products, platforms and businesses
- Make the portal look more modern while aligning with the brand's core values
The Process
How do we build a design system without knowing how the interface will turn out? But also, how do we design the interface when we don't even have a defined design system?
To define a component, we utilized the Atomic Design methodology by Brad Frost. His quote appears at the beginning of an article discussing atomic design principles.
“We’re not designing pages,
we’re designing systems of components”
— Stephen Hay
So I began by listing down all the essential components in the portal and where and how they were used. With the comprehensive library at our disposal, we were able to develop a more systematic design system.
Building the Design System: our Figma Library
Atoms
The entire system is based on simple elements such as typography, spacing, and color.
Molecules
As we combined these atoms to form molecules, things became more interesting and tangible. These molecules are simple systems created by the essential elements. Those elements can take many forms like buttons, inputs, table cells, etc.
Molecules provided us with building blocks, which we combined to form organisms — the interface began to take shape.
How did this help the company and its stakeholders? What was the impact of this on our products?
🖍 Company - The consistency of our product helped us build trust
🖥 Product - We are able to build and ship things faster, as well as the quality of the shipped products.
👩🏻🎨 Designers - It's now much easier to create, share, and synchronize quite a few components at a much faster rate
🧑🏻💻 Developers - We are now able to collaborate effectively by communicating the designs
through design tokensI have omitted confidential information in this case study. The information presented here is my own and does not necessarily reflect the views of the company.