Nation Housing Company - Saudi Arabia

Sakani

Design System | Product Design

Client:

Sakani

Role:

Design System Product designer

Tools:

Figma, Storybook

Duration:

Oct '21 - Nov '22

Company:

Oivan Group OY

Oryx Design System

TL;DR: Sakani (National Housing Company, Saudi Arabia)
Building homes, building systems

To save a bit of time in your busy schedule...

As part of Saudi Arabia’s Vision 2030 initiative to increase home ownership, the National Housing Company sought to unify and scale its digital ecosystem. I led the creation of the Oryx Design System, establishing a cohesive visual language, robust component library, and efficient collaboration between design and engineering.

The result was a scalable foundation that improved accessibility, consistency, and development speed across Sakani’s growing suite of digital products.

Figma UI Kit

Component Documentation & Specification

Linked Storybook

Bit of background

Sakani is a product provided by the National Housing Company (NHC) to allow Saudi Arabian citizens to buy housing. As part of the Vision 2030 plan layed out by the Saudi Arabians, which is to have 70% of Saudi Arabian citizens owning their own homes by 2030. 

The Sakani platform allows citzen more than just the ability to buy real estate in Saudi Arabia, it also allows them apply for state upsidised loans, hire architects, interior designers etc. 

Image: Components from the Oryx design system 

Project overview

After a redesign was initiated for the Sakani platform, it was soon realised that due to the size of the platform a design system was needed to keep up with new components, documentation and for onboarding new designers. 

As the team and the platform grew, the designs and prototypes were becoming inconsistent. Also, there was no link between the design components and the code. To speed up and simplify the  process I was tasked to create a fully fledged design system. With the aim to speed up the creation of screens and prototypes I was tasked to take the UI kit and create a fully fledged Design System. 

Image: Accessibilty documentation, highlighting the right to left and left to right differences for Arabic  

The process

To start things off, I benchmarked already existing design systems from companies with platforms as complicated as Sakani, like Material by Google and Polaris by Shopify. These platforms helped me to understand the structure that would work best when it comes to laying out the content.

When examining the existing UI elements I discovered that the colours were not meeting web accessibility standards. Therefore a new colour palette was needed to bring the Sakani’s accessibility to an accepted standard.

Understanding the end user needs, the designers using the system, was also one of the preliminary steps I took before building the design system. By interviewing the designers already working in the project I began to get a better sense of what elements would help them when it comes to speed of prototyping but more importantly, when they are creating new components what are the design standards that they must abide by. This would go on to help me understand how much documentation was needed and what it should include.

Image: Colour documentation for Oryx design system

Image: Sakani page UI using the Oryx design system 

The execution

Firstly I started with the creation of the documentation, utilising texts already created by Material and Carbon but also tailoring how each component should be used in regards to the Sakani Platform. Once this was close to completion I moved on to creating the new design kit, starting with the new colour scheme as stated above, a more extensive type kit and introducing a larger range of elevations.

One of the unique things about this design system is that the end product will be used almost entirely by Arabic speakers but also designed by English speaking designers. With that all the components created from buttons to cards must have the option to change between Left to Right and Right to Left text direction.

When all the components that had been in the original design kit and have been updated accordingly it was then ready to sync the design library with the code library. With our development team based in Ho Chi Minh in Vietnam, I flew to our office there to workshop with our tech lead, how best sync the two libraries and the creation and launch plan.

Image: Components for Oryx design system

The deliverables

At the launch of the Sakani Design System now called ORYX the planned deliverables were to be:

The comprehensive Figma File including:
- Design UI kit
- Component documentation and specifications
- Icon builder grid and template

For the code libraries, the product Storybook would be used for a web based platform and standardised repository for the Flutter app.

Additional documentation for the client:
- Component status list with links to code library and design page
- Onboarding document for new Design System users

Images: Onboarding documentation for new designers

Image: Design specifications for banner alerts

Learnings

There were many things that I would do differently in this project. One thing that was not accounted for at the time was the level of learning needed from the client side, this slowed the creation of the design system, due to having to coach the clients team. Also navigating the intricacies of hierarchical nature of the country and corporate culture.

With regards to the project practicalities, there are a couple elements I would do differently. Firstly I would introduce the dev team sooner and build the components side by side in design and code. Secondly I would compartmentalise the stages and tasks of building the design system itself, having clear milestones to hit.

Image: New housing project page using new design system components 

Wow! You made it to the bottom of the page, I think by law that means we must go for a beer. Send me an electronic mail and we can start the beginning of beautiful relationship!

© Matthew Scanlan 2025