Hummus – Alaan’s Delicious Design System

Meet Hummus – a single source of truth for the design of the Middle East’s most loved AI-powered expense management platform, simplifying finance for businesses across the region. 

First things first: we’re not a food company. But Hummus? It’s a catchy name, right?
‍
When my fellow designer and colleague, Vidhya, first suggested naming our design system "Hummus," I assumed it was because of his love for food (I mean, who doesn’t love hummus?) and its popularity in the UAE. While both these factors are true, the main reason is a deeper one—one that resonates strongly with the core principles we intended for our design system to have: simplicity, adaptability, and the essence of what makes Alaan so beloved.

Now that we’ve cleared that up, let’s dive into the design principles behind our system and see why this name fits like a glove (or maybe a pita?).

A handy definition of a design system:

“A collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.”

Apart from this textbook definition, I promise I won’t get into any more technical details here; instead, I’ll try to give you a broad overview.

How did it start?

Almost a year ago, when I joined Alaan as a Product Designer, one of my first big tasks was whipping up our design system, Hummus. With the company and product growing faster than a hummus craving in the UAE, it was crucial to lay down a solid design system before moving ahead.

Why, you ask?

Well, without a design system, things can get chaotic. Different teams might interpret the design language uniquely, leading to a compromised user experience. Efficiency takes a hit as designers and developers end up reinventing the wheel, which slows everything down. As the product expands, keeping the design in check becomes an actual juggling act without a cohesive system. Plus, collaboration can get tangled without a unified approach, causing miscommunications and slip-ups between design and engineering.
‍
So, establishing Hummus was our way of keeping things smooth and savoury.

However, creating a technically sound and visually perfect design system is only part of the challenge and just the beginning. It is equally important to align and implement it with the code library alongside the front-end team to bring it to life. But the fun doesn’t stop here! The next step was to revamp the product screens—not just to enhance the user experience and flow better but to ensure they fit and align perfectly with our new design system. It was about ensuring the redesign felt seamless and lived up to the promise of a delightful user experience.
‍
Here is a snippet from our Hummus Figma file –

Just like us, our design system, and any design system, is always a work in progress. It’s a living, breathing entity that evolves, adapts, and changes. As new challenges pop up, fresh design problems arise, and user feedback rolls in, we keep updating ourselves to stay on top of the latest trends and tech advancements. We will keep refining and elevating our design system to meet the highest industry standards and deliver the exceptional experiences our users expect and deserve.
‍
That is all on the design system for now; we will meet soon with a new topic. Thank you for reading. Have a good day :)

– Sanjana Dhakad

Product Designer @ Alaan

‍

‍