Company

Al Hilal

Year

2021 – Present

Links

Website

As Head of Design for Al Hilal, I work across multiple cross-functional product teams, creating and influencing elegant user experiences that facilitate the capture of business impact. This includes conversion, customer loyalty and satisfaction and customer engagement.

For this case study, I will go through the plan I drafted and executed to transform Al Hilal’s design language. This includes setting up and implementing a design system in two weeks to rebranding our entire application over the course of 15 weeks.

The Timeline

I arrive at Al Hilal as Head of Design
Aug, 2021

App rebranding planning & squad creation
Sep, 2021

Design System launched & documented
Sep, 2021

Components & tokens created
Oct – Nov, 2021

iOS & Android frontend refactored
Oct, 2021

Design principles surfaced from workshop
Nov, 2021

Defining the philosophy

When I joined the project I was tasked with developing a new visual identity for the app based on the ongoing rebranding exercise. The key to doing this succesfully, was developing a systematic way of refactoring styles and components based on the code that had already been written. Here are the four guiding principles that governed my approach.

Design System

A well documented and adopted design system was the first step. It would provide the foundation we needed to usher in a new design language.

Implement design tokens

Our design decisions for accessibility, dark mode and interaction where easily communicated with the use of design tokens.

60-30-10 rule

This principle gave us a measured approach that ensured color and negative space were used in a purposeful and measurable way.

Surfaces not outlines

The use of outlines in the old design resulted in a visually heavy design. This approach was replaced with surfaces and elevation instead.

The Design System

A key outcome of our design system was to foster greater levels of communication between our platform teams. We needed to get our front-end developers using the same style and component taxonomy. Our design documentation became the single source of truth.

Below are some of the key pillars of the system we implemented.

Atomic Elements

Our typography styles, color palettes, icons and visual styles form the basis of our atomic elements.

We defined our taxonomy for styles, font sizes and design tokens. This format was then unified between our iOS and Android platforms for the first time in the project.

Design Tokens

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles etc.

These can represent anything defined by design and for us, that meant starting with color palettes and font sizes.

Our tool of choice for converting our tokens was Style Dictionary. An industry standard in top design teams around the world.

Components & Documentation

Documentation helped organize and deliver our thoughts to stakeholders and development teams. This helped them understand our thought process with a single source of truth.

As design tokens where new to the project, our documentation helped convey how they would be implemented in code.

Design Principles Workshop

Changing the design language of the business meant I had to get the design team energised and on the same page. We had to shape the future of design at Al Hilal, whilst staying true to a basic set of guidelines.

This workshop helped extract my team’s sentiments around the the guiding principles we would use to make design decisions. Ultimately, our design principles shape the way we build experiences for our customers.

The Result

The team was able to refactor approximately 70% of our built application in 8 weeks. The key to this success was implementing a solid foundation for our design tokens, theming capabilities and reusable components.