Skip to main content

Vitreus

The OneTrust Design System

In the realm of online privacy services, consistency is key. Yet, for OneTrust, a suite of over 40 products had grown into a fragmented design landscape. As the Lead Designer & Coordinator, I embarked on a mission to unify this disparate ecosystem under a single, cohesive design system – Vitreus.
Imagine navigating a multitude of products, each with its unique design language. For users, this meant a frustrating experience; for developers, a maintenance nightmare. Our goal was clear: create a modern, consistent, and scalable design aesthetic that would harmonize the entire product suite.
The approach was rooted in thorough research. We conducted an exhaustive audit of the existing design landscape, identifying areas for improvement. Workshops with the Design Team and in-depth interviews with Project Managers and clients provided invaluable insights into their needs and pain points.

The Journey Begins: Research, Collaboration, and Design

The approach was rooted in thorough research. We conducted an exhaustive audit of the existing design landscape, identifying areas for improvement. Workshops with the Design Team and in-depth interviews with Project Managers and clients provided invaluable insights into their needs and pain points.

A New Foundation: The Vitreus Design System Reborn

With a deep understanding of our stakeholders’ needs, we set out to create a comprehensive design system from scratch. The Vitreus, Comprehensive Overhaul, and React Framework Compatibility ensured seamless integration with our tech stack.
  • Component-Driven Design: We crafted reusable, consistent components to streamline development and maintenance.
  • Modern Aesthetic: Our design system’s modern, consistent, and scalable design language unified the entire product suite.

Transformative Outcomes

The impact was profound:
  • 85% Component Adoption Rate: Across all products within the first 6 months.
  • 25% Increase in User Engagement: Measured through end-client usage analysis.
  • 30% Reduction in Support Queries: A testament to the improved user experience.

A Celebrated Success

The Vitreus Design System’s triumph was recognized company-wide:
  • Leadership Accolades: Acknowledged as one of the most ambitious efforts in the company.
  • Cross-Organizational Celebration: Highlighting team capabilities and collective efforts.

Reflections on the Journey: Lessons Learned and Growth

As I reflect on our journey, two key takeaways stand out:
Deeper Stakeholder Connections: Foster stronger relationships to reduce friction and ensure success. In hindsight, investing more time in building these relationships would have streamlined our process.
Stronger Governance: Establish a robust governance body to maintain design system integrity. This would have helped us navigate the inevitable challenges that arose during implementation.
These lessons, though, didn’t hinder our progress. Instead, they fueled our determination to create something truly remarkable.

The Future of Vitreus: Expansion, Innovation, and Responsiveness

As we look to the future, the Vitreus Design System continues to evolve. We successfully expanded its scope to include:
  • Responsive Support: Ensuring seamless user experiences across all devices, from desktops to mobile phones. This addition has further enhanced our product suite’s accessibility and usability.
  • Emerging Technologies Integration: We’re exploring innovative ways to integrate the design system with cutting-edge technologies, ensuring it remains forward-thinking and adaptable.
  • New Product Lines: The Vitreus Design System now serves as the foundation for new product lines, unifying the design language across our entire ecosystem.
  • This expansion has not only solidified the design system’s position as a cornerstone of our product suite but also:
  • Enhanced User Experience: Consistency across all touchpoints has led to increased user satisfaction.
  • Streamlined Development: The component-driven design approach continues to reduce development time and costs.
  • Future-Proofing: By embracing emerging technologies and responsive design, we’re well-equipped to meet the evolving needs of our users.

Let’s Discuss Your Next Project