Introducing SAFIRE: The Jewel in SELISE’s Design System

SELISE introduces SAFIRE, a highly efficient, framework-agnostic design system that ensures consistency across multiple projects.

Products built by SELISE have three defining characteristics: speed, simplicity, and modularity. 

In order to preserve these features across multiple projects and teams, the Front End team at SELISE Bhutan embarked on a  multiphase project in November 2019 to build a common framework with comprehensive guidelines and reusable components. 

The SAFIRE Design System is our solution to minimise time spent on recurring tasks and functionalities. This also allows us to achieve consistency in design across projects. With well-maintained documentation and guidelines in place, new team members  are easily able to get up to speed, and developers can seamlessly transition between projects.

Initially based on Google’s Material Design, we have built SAFIRE to be framework-agnostic. We maintain our own set of reusable components which have the advantage of being lighter and faster than other widely-used component libraries. With the basic components serving as building blocks for any project, teams can quickly move to developing higher level components and feature enhancements.

The result of all this? Greater efficiency, greater speed, and improved consistency — and pride in every product that carries the SELISE seal.

Here are a couple of lessons we learned along the way:

Speak a common language

From an early stage, we placed a strong emphasis on establishing coding conventions and creating proper documentation. As we began building the UI components that were most common across our projects, it became evident that the conventions we set early on would be key to achieving our later goals. 

With a growing library of reusable components, we are already seeing gains in efficiency among development teams and the ease with which new team members are able to get onboarded.

Designers follow a set of guidelines and principles ranging from colour schemes to margins and padding. This helps us maintain a high level of quality and consistency.

View, review, reiterate

Each new component goes through a peer review process to ensure consistency with our design principles before being added to the library. In the coming months, we will be launching an online playground for users to view the design library and follow documentation. 

Frequent user feedback allows us to constantly iterate and expand on our designs, making it more inclusive. 

Be water, my friend

While adherence to a convention is important, we also understand the value of flexibility. That is why we are building SAFIRE to remain framework-agnostic. In addition to Angular, our design system will support Vue, React and Svelte.

With our short development cycles and adaptability, we can also take requests to customise components to your need.

And finally, we will take SAFIRE open source so that more users can contribute great designs and build a better web experience for all.

To know more about SAFIRE, click here.

To apply to be a team member click here.