Creating the
Zen Design System

The Challenge: From Fragmentation to Consistency

When I joined Zenoti and the lone UX designer, up to that point design decisions were ad-hoc, made primarily by engineers and product managers. Without a cohesive system, glaring inconsistencies emerged—such as dropdown components rendered in different styles across the application—leading to confusion for users and inefficiencies for teams.

I needed to find an immediate solution to get the products to a base-level consistency both in the visuals as well within the codebase. So I advocated to utilize the Bootstrap Framework for all major components, as there would be minimal engineering overhead and the framework was already established in some parts of the products.

Accessibility was also a critical issue. The flagship front-desk Appointment Book, a core product, received low ratings due to poor color palette options and non-scalable iconography, making it especially difficult for users with visual impairments like red-green color blindness. However a particular challenge with the colors was that each color has a specific meaning (status or characteristic) and Zenoti had some very seasoned users who had learned what the various colors meant, therefore changing the values too much would cause customer complaints and increase support calls. So I had to find colors that had enough constrast to be accessable but stayed within the general hue of the the original.

The Transition: From Quick Fixes to a Scalable Design System

As Zenoti grew and adopted a rebranding initiative, the need for a scalable design system became apparent. This transformation was an opportunity to align all products under one cohesive visual and functional framework. Working with new UX designers and the branding team, I established the foundational principles and started to develop the basics of the Zen Design System.

Design Foundations:

1. Harmony: Visual elements should work together create a sense of unity and balance in the design. It makes the design appear well crafted and visually pleasing.
2. Familiarity Across Experiences: Zenoti's products have been built for a wide range of experiences. Implementing design guidelines and pattern across this range of products should make the Zenoti experience easily recognizable regardless of the product being used.
3. Brand Presence: Some products may need the business's brand to take the front seat and some require Zenoti's brand to take the stage. Our brand presence in products should be intentional and tailored to each product's requirements.
4. Abstraction & Customization: Zenoti solves for complex and unique business needs, but the Zenoti experience should feel simple and natural. Use context to hide and show functionality at just the right time will help keep the experience simple. Providing powerful but simple customization to address unique business needs will make the experience seem natural to the user.
5. Negative Space: Negative space is just a important as the design element it surrounds. It improves legibility and aids in establishing information hierarchy.
6. Clean and Visual: To make the interface efficient and easy to use, keep designs clean and simple. Opt to use clear and easy to understand visuals, good information hierarchy and simple insightful language.