Overview

Ivy is the global design system for all Relias products, providing a unified and accessible UX across both Relias’s B2B SaaS platform and its diverse B2C properties. Before Ivy, inconsistencies across products led to poor accessibility, usability challenges, fragmented branding, and increased design and development overhead. By centralizing design efforts, Ivy streamlined workflows, improved accessibility (WCAG 2.1 AA standards are our minimum requirements), and ensured a seamless user experience across all platforms. It serves as the cornerstone of our design strategy, ensuring consistency and usability at every user touchpoint. In the first year of Ivy’s implementation, it contributed directly to a 4% increase in renewal rate, the largest annual increase in over six years.

How It Started

When I first joined Relias in Q2 2022, the company was in the early stages of building an in-house design system, Ivy. At that time, only one designer- Daniel Florez- was working on Ivy alongside a dedicated team of engineers, called the Tiny Team. I expressed interest in contributing and quickly became the second designer on the team. We used atomic design methodology, starting with the smallest elements and systematically scaling up to more complex components. Our approach considered our teammates as users, ensuring Ivy was intuitive and efficient for designers and engineers alike. A few months after I came onboard Ivy we scaled up our operations bringing in two other key designers, Emma Wishart and Abram Magaldi. We all designed together, with each having expertise in Accessibility and Education respectively. My expertise was in component building / library management / documentation. We called it Figma Ops.

Leading Ivy Design System

After working on Ivy for some time and contributing significantly to its growth, I became the lead designer in Q4 2023, taking on the responsibility of overseeing its evolution and broader adoption across the company. After becoming the lead designer I quickly expanded Ivy’s collaborative approach, inviting our B2B and B2C UX teams to contribute. I provided guidance on component-building and educated designers on Ivy’s design principles. Additionally, I created a lo-fi variable mode that allowed designers to rapidly translate designs into hi-fi prototypes, ensuring accuracy in spacing and sizing.

I worked closely with engineers to understand the complexities of building components and ensured that the design system remained highly functional and scalable. Documenting our component work in both Confluence and Figma was key for ensuring clear communication and understanding of expectations between engineering and UX. My leadership in this area helped streamline the integration of Ivy across multiple products.

Platform Modernization

Relias hired an external firm, Accenture, to guide the early stages of app modernization. As the lead on Ivy, I was a core designer tapped to focus on this effort. My responsibilities included modernizing the UI, introducing new design patterns, refining information architecture, and designing a new content library that unified Relias’s traditional learning content with its newer compliance content. This effort required close collaboration with three other designers, and the content library is currently under development.

Ivy POC and Transition to Angular Material

After a company restructuring, Relias no longer had an engineering team dedicated to Ivy. To adapt, I collaborated with Ivy's former engineering lead to evaluate whether Prime NG or Angular Material would be the best framework for future development. Our key considerations included accessibility, the ability to translate Ivy’s design language to the new framework, and ease of use for developers both now and in the future.

To assess both frameworks in our proof of concept (POC), we built identical pages using Prime NG and Angular Material, aiming for as close to an indistinguishable experience as possible. Initially, UX preferred Prime NG, while engineering favored Angular Material. After thorough evaluation, we were surprised to find that Angular Material was the best long-term solution for both parties.

Following this proof of concept, I took the lead in building a new component library, leveraging everything I had learned from the original iteration of Ivy and the POC. This new library improved upon Ivy by enhancing component flexibility, refining accessibility standards alongside two other designers, and ensuring a more seamless developer experience. I introduced better documentation, improved design consistency, and made components more adaptable to evolving product needs. Within a single quarter, I successfully completed the first half of the new library’s components at the highest standard yet.

Looking Ahead

As we continue to evolve Ivy, our next steps include integrating advanced design tokens to further enhance scalability, expanding accessibility guidelines to ensure compliance with WCAG 2.2 standards, and refining developer handoff processes to improve efficiency. We are also exploring new methods for automating design system updates and fostering even greater collaboration between design and engineering teams.

Conclusion

From its inception to its latest iteration using Angular Material, Ivy has transformed how designers and engineers collaborate at Relias. By continuously refining processes, modernizing the platform, and enhancing the usability of components, I have contributed to making Ivy an essential foundation for Relias’s digital products. Through these efforts, Ivy remains a robust, scalable, and accessible design system that will continue to support the company’s growing product ecosystem and future innovation.