Multi-brand Design System

TL:DR - Impact:

• Design phase completed in 10 days, from the usual 2 months it took.

• Every implementation from here on was released with 0 design customizations.

• Over 70% reduction of front-end and QA resources.

• All customers and internal company teams embrace the same design vocabulary. They all speak the same language now!

• Planted the seeds for the future of a low-code, end-user theme wizard UX that will bring down time to 0 days (instant ship).

• Over 75 airlines companies are using a theme on their live website today. The list includes Air Canada, Air France, Alaska Airlines, American Airlines, Japan Airlines, Emirates, Spirit, and more.

Beyond traditional design systems - Our goals:

• Create a highly customizable design system that produces unique themes for widely different brands around the world.

• Democratize design by creating a shared vocabulary for requirements that customers and engineers can agree upon.

• Ship in days. Not months.

Unique challenges ahead:

• We can’t finish or grow our product portfolio because of a high volume of custom design requests.
  How might we get our customers to use our product “out-of-the-box”?

• Creating high-fidelity, page by page designs takes too long and gives customers the impression that they can modify existing components.
  How can we separate the conversation between our products and our customer brand guidelines?

• Our products live in independent code repositories. From React to PHP with JQuery, to Tailwind and vanilla CSS.
  How can we propagate themes consistently across different tech stacks?

Traditional themes aren’t enough. We needed expressive themes that recreate our customer’s brand voice faithfully.

The solution: 3 layers of tokens.

We created 2 general layers for Colors and Typography tokens which would be heavily reused throughout. Color tokens are pretty simple, and for Typography tokens I took inspiration from Salesforce’s Lightning design system and defined a 7 styles to really control consistency. The third layer is a Component schema and this is what helped us scale freely while allowing for robust customizations at a component level, widget level, and even page level.

We defined schemas for each of the 27 components included in the design system. Tokens within Component schemas represent the properties we allow for theming and anything that wasn’t part of the schema meant it was a constant in our design.

Here’s an example of a simple button schema:

Putting it to work

Our company had strong low-code philosophies but we had to start small. We organized our tokens in a easy-to-use documentation and shared with every customer for them to send back their desired values.

Want to see some real examples?

The following are real customer websites using themes from our multi-brand design system. In total, over 75 airline customers are using it on their websites today, including the top airline companies in the world.

Ready for more? Continue to learn more about Everymundo low-code CMS.