A Design System is a shared library of reusable components and guidelines that help teams create more efficiently and consistently at scale. We caught up with Product Designer Haikel Zaini to learn more about how Singapore’s NTUC Enterprise built their design system, Tangram, using Lingo.

Hi Haikel! Tell us a little bit about NTUC Enterprise.

NTUC Enterprise is the holding entity and single largest shareholder of the NTUC Social Enterprises in Singapore. We aim to create a greater social force to do good by harnessing the capabilities of the social enterprises to meet pressing social needs in areas like health and eldercare, childcare, daily essentials, cooked food and financial services.

Serving over 2 million customers, we want to enable and empower everyone in Singapore to live better and more meaningful lives. Whether it is moderating the cost of living or helping working adults stay relevant throughout life, we are united in making a positive impact.

Tell us about your role at NTUC Enterprise— what is your team responsible for and what does a typical day on the job look like?

I’m currently a Product Design Lead in NTUC Enterprise. My team is responsible for the creation and the maintenance of NTUC Enterprise’s design system, Tangram. We believe that a design system needs to be treated as a product of its own rather than a side project because a design system isn’t a project with an end. It’s the origin story of a living and evolving product that serves other products. For now, our primary users of Tangram are engineers and designers working on other products within our organization. Just like any other product development team, our daily routine involves sprints, planning and story grooming.

NTUC’s design system is called Tangram. Why was it created?

We created Tangram for three main groups:

Business
As with any other organization, it is both challenging and expensive to hire. This is even more so for us, with multiple business units in various sectors such as groceries (NTUC FairPrice), childcare (NTUC First Campus) and cooked food (NTUC FoodFare and Kopitiam). By having a robust design system, we are able to reduce the amount of resources needed to design, build, and maintain our products.
Designers
We believe designers should do more than just push pixels. By having a properly documented design system with a drag and drop functionality, designers will have more time to solve complex business problems, drive alignment among stakeholders and run more user research. In short, concentrating on work that moves the needle. This will significantly reduce the design debt and inconsistencies.
Engineers
We want to enable engineers to build app interfaces without reinventing the wheel. By having best practices for design and accessibility built into individual components, our engineers can focus on interactions at a higher level. This easily customizable, scalable and reusable system helps us achieve a consistent behavior across our different products. As a result, we are able to reduce technical debt and low-efficiency communications between designers and engineers. Additionally, with all our products sharing a common code base, aligning frameworks and keeping up-to-date with trends in technology is a breeze!

How did you go about setting up the design system?

A design system is a cost saving product rather than a revenue generating one. For a business to commit resources to creating one, it is key to get buy in from all stakeholders.

Useful immediately
To get buy in from both management and product teams, they need to see the value of the design system quickly. This means reducing the friction of adoption by making the design system easy to use, with well documented components and having a drag and drop functionality. That was when we discovered Lingo was perfect for this!
Accessibility as a baseline
One of the most overlooked aspects of design is accessibility. As a social enterprise, we aim to serve everyone in Singapore. Designing for extreme cases actually benefits our users the most! With an aging population, the need for our products to be accessible is even greater. Our aim is to achieve the standards of an AA rating. Additionally, by making accessibility a criteria for design, it helps us narrow down possible design outcomes in our work.

Our first component
The first component we added was color theming as we needed a systematic way to split colors into different hues to support multiple brands. From there we started creating design tokens.

How is Tangram designed to be used?

For designers, the primary tools used to access Tangram are Lingo and Sketch. On Lingo, our designers read the documentation of components and then drag and drop them into Sketch. To visualize and experiment with a live component, they use the production site ntuc.design. As for the engineers, they use the Tangram’s npm and SDK package.

How do you see Tangram evolving?

While we currently have a core team focused on building Tangram, we do expect every designer and engineer to start contributing in the near future. A combined team effort is essential to maintain this living product. Eventually, our team of researchers and writers should also help to grow the product, evolving it into a design and copy system. As much as designers need to understand and conduct research, researchers need to know a little bit about design. With Lingo’s drag and drop feature and powerful documentation tool, it’s easier and faster for researchers to pick up design, create prototypes and test! With this digital brand hub, it also becomes a central repository for new joiners to quickly grasp the foundations of our design, research and development methodologies.

Thanks for sharing with us Haikel! Want to build your own brand style guide or design system in Lingo? Start your Free Trial today.