CASE STUDY

The National Library of Israel – DESIGN SYSTEM

Establishing NLI Design System

OVERVIEW

The Library’s website was built in 2012 and in 2016 homepage was redesigned – along with the establishment of the digital department.

Along with the main domain, the Library has a lot of other projects and partnerships with different organizations.
Each of their websites has their own look and feel.

Goals

Our goal as in-house design studio was to convince stakeholders and dev team to create common ground in design for all of the domains. This would not only help creating coherent brand, but could lower costs and dev time for the all of the teams.

Methodology

We designed the system according to the concept of “atomic design”.
In this concept, there are five levels of system components.

Atom:

In the physical world an atom is the basic element of a material, in parallel to the internet world atoms are HTML tags, buttons, input fields, etc.

Furthermore, an atom can contain abstract values such as fonts, color palettes, and animations.

 

Molecules:

Molecules are atoms grouped together and form the smallest and most basic unit of a component.

An input field alone and a button alone are useless, but if you combine them together they become functional.

 

Organism:

An organism is a group of molecules grouped together to form a complex and unique interface component.

 

Template:

A template contains a cluster of components (organism) that together form a page.
The template is a page-level component that displays all the components needed to create a page
In a way that gives full context to the 2 system components from the previous levels
(organism and molecules).

 

Pages:

Pages are a full representation of the template with real content.
Pages contain real content in different variations on a template in order to present the final interface.

The National Library of Israel Design System

The design system of the National Library is a system consisting of reusable components. Combining these components in a different order and context allows for the diverse creation of pages and applications. This system not only presents a visual expression of components, but the main emphasis is also that it functions as an ecosystem and strives to affect all the organization’s digital assets (a change made in one place in the system will resonate across the entire system).

This system is not a finished and final product, but a solid foundation that enables the development of both the Design System – and the various products of the organization in accordance with the needs of the various products in a coherent manner.

SUMMARY

What have we achieved:

Improvement in design and development times – a significant reduction in time devoted to performing technical tasks.
In the context of agile configuration work, this method allows the creation of prototyping quickly without compromising quality.

Greater value for the product and a better user experience – Reusable components and consistent design across all platforms give the user a more consistent look and feel, interaction with the products becomes intuitive due to the use of the same patterns and components, and the user’s friction experience with the product decreases, overall user experience becomes Better and the value of the product increases.

Clean design and code – Working in this way will allow the preservation, maintenance, and management of the design assets and code snippets easily. As already mentioned, a Design System is not a final product, but a system built in a way that will allow for improvements and changes easily.

Increased collaboration, knowledge sharing, and transparency – With the help of sharing the Design System for all the teams, it was easier to make sure that everyone was on “the same page” and in fact enabled collaboration and knowledge quickly and easily.
The process of “onboarding” new employees has also become easier. Organizational memory – The Design System is basically “The Single Source of Truth” when it comes to product design and development.