j
u
l
z
d
e
s
i
g
n

Building an Enterprise Design System for Seamless User Experience

I had the privilege of leading the development of an enterprise design system that has the potential to revolutionize WestRock's approach to UX design. This case study highlights key accomplishments, lessons learned, and my role in driving the design system's success.

As the design system expert, my role encompassed several responsibilities, including conducting research, developing strategies, creating design system components, managing teams, evangelizing the system, and collaborating with stakeholders. I played a central role in driving the design system's development and ensuring its successful implementation.

Understanding User Needs

Collaborating closely with the UX team, we conducted research to understand their pain points, requirements, and aspirations. This insight guided the development of our design system.

Audit and Optimization

To ensure a robust and efficient design system, we conducted a comprehensive audit of our development tools and frameworks. This evaluation led to the elimination of redundancies, identification of areas for improvement, and selection of the most suitable technologies.

Creating Design System Components

I made strategic decision and chose 17 comprehensive base design system components to develop, including an accessible color system, spacing, and font sizes using Sketch. These components formed the foundation for consistent and inclusive UI designs across our product ecosystem.

Strategy and Governance

Formulated the design system strategy and governance model, presenting it for feedback and collaboration. This ensured seamless collaboration, consistent decision-making, and proper maintenance of the design system. Additionally, crafted job descriptions to align skillsets and roles for ongoing success, forming a design system team essential for building the design system as a product.

Technology Strategy and CSS Architecture

Formulated a technology strategy and CSS architecture that aligned with our goals, including the objective of making the design system compatible with various frameworks and even usable without frameworks.

  • Ensured framework agnosticism by making the strategic decision to utilize web components. This approach allowed for seamless integration and usage of the components across different frameworks, enhancing flexibility and reusability.
  • Prioritized code reusability and maintainability throughout the design system development. By implementing web components, we achieved a modular and encapsulated structure, enabling developers to easily incorporate and manage components in different projects.
  • Conducted a thorough assessment of the technical landscape within our enterprise, primarily focused on .Net and React frameworks. This assessment played a crucial role in defining the architecture, ensuring it was adaptable and scalable within our existing ecosystem.
  • The scalable implementation of the design system was achieved by leveraging web components and CSS architecture. This enabled efficient development and maintenance of components, making it feasible to expand the design system in the future as our organization's needs evolved.

Evangelizing the Design System

Recognizing the importance of stakeholder buy-in, I created a compelling presentation deck and began evangelizing the benefits and potential impact of the design system. Ongoing engagement and feedback sessions allowed us to refine the system's foundation based on real-world insights.

Throughout the project, I actively engaged with stakeholders, including lead engineering, to evangelize our technology strategy and CSS architecture. This collaborative approach resulted in building trust and buy-in from engineering.

In addition, I created a promotional video to showcase the design system's capabilities and benefits. This video was a valuable tool for communicating the system's value to stakeholders and attracting new users.

Created a Backlog

I created an extensive backlog encompassing tasks for building a documentation site, infrastructure setup, starter projects, and tokenization. This backlog was strategically designed to support the development of the design system. I then presented the backlog to developers on my team, showcasing the vision and providing them with a clear roadmap.

Transition to Figma

One significant milestone was successfully transitioning from Sketch to Figma. I worked closely with procurement and legal departments to obtain necessary approvals and showcased the benefits of Figma through a comprehensive comparison chart. This transition empowered our teams with enhanced collaboration and productivity.

Managing a Development Team

As a project lead, I managed a team of three developers responsible for building various artifacts of the design system. Through clear backlog stories, and regular feedback sessions, we delivered high-quality and fully accessible components and documentation.

Collaboration with Product Teams

Close collaboration with product teams ensured the successful implementation of the design system. I worked with product teams to implement the design system in a new high-profile project, ensuring a consistent and delightful user experience. Additionally, I collaborated with the core services team to implement the design system into WestRock's sign-in experience, redesigning the profile and sign-in flows using design system components and patterns.

Working closely with the brand team to operationalize new branding guidelines into our design system. Through the power of tokenization and our design system, we were able to efficiently incorporate an updated and expanded color palette and new themes, completing and publishing it within days.

Lessons Learned

  • Collaboration is key
    Close collaboration with stakeholders, especially the UX team, is crucial to understand their needs and ensure the design system caters to their requirements effectively.
  • Flexibility and adaptability
    The design system should be adaptable to different tools and frameworks, accommodating the organization's technical landscape and ensuring smooth integration.
  • Ongoing feedback and iteration
    Regular feedback from stakeholders and users helps refine and enhance the design system, ensuring it remains effective and relevant.

Outcome

The anticipated outcome of our enterprise design system is a transformative impact on our organization's UX design processes. By addressing user needs, streamlining workflows, and fostering collaboration, the design system enhances consistency, efficiency, and accessibility across our product ecosystem. We envision a more cohesive, delightful, and user-centered experience, leading to increased user satisfaction and improved business outcomes.