Establishing Design Operations for a Digital Product Design Team

Sector: Professional Organization, Not-for-profit

Challenge: Establish a unified design process, a comprehensive toolkit, and robust onboarding resources to improve team efficiency and ensure consistent outcomes.

My Role: Strategy, Project Management, Creative Direction, Documentation

Collaborators: Zach Schweitzer - UX Design Leader; Shelly Rolandson - Product Designer; Nick Richardson - Design Engineer; Stephen Rennekamp - Visual Designer; David Dieter - Visual Designer; Nick Mahieu - Design System Product Owner; John Galletta - Solutions Architect

Challenge

Our digital product design team faced challenges with fragmented design processes and inconsistent UI across experiences. It became clear that we needed a unified design process and tool kit that would address these pain points and improve team efficiency. Additionally, scaling our design system and providing comprehensive onboarding resources were essential for scaling our team and ensuring consistent outcomes.

Solution

Establishing a Standard

The Digital Experience Design Standard provides a unified framework to align our product teams with shared principles and best practices.

  • Defines the essential steps to ensure quality and consistency in all design work that should be taken for every project or task.

  • Acts as a flexible guide, that allows designers to tailor their efforts based on the project’s needs.

  • A defensible, industry-standard approach to delivering high-quality, accessible, useful and usable digital products

Transitioning to Figma

We recognized Figma as the ideal tool for collaborative design, real-time feedback, and version control. We initiated a phased transition from Sketch and InVision to Figma, ensuring a smooth adoption process. We organized training sessions, conducted hands-on workshops, and provided resources to help team members quickly grasp Figma's capabilities.

2022 | PI 4

  • Figma & contract budget approved.

  • Hire and onboard a UI designer.

  • Establish Core styles in Figma to inform tokens and variables.

  • Build roadmap.

2023 | PI 1

  • Figma workspace, teams and file naming conventions established.

  • Design token naming convention established.

  • Core styles aligned to tokens, Figma styles created for library.

2023 | PI 1

  • How We Figma onboarding guide completed.

  • Bi-weekly Figma training sessions begin.

  • Weekly Design System Office Hours begin.

2023 | PI 2

  • Component & Asset libraries in progress.

  • File migration and Invision sunset plan are established.

  • Component development begins.

2023 | PI 3

  • Designers migrate Sketch content to Figma.

  • Invision sunset

  • Figma variables released.

2023 | PI 4

  • Catalyst 1.0 UI kit beta launch.

  • UI Kit release notes launched.

  • UI Kit Support Ticket system launched.

  • All designers working in Figma.

Figma UI kit & Starter File

With a team of 2 designers, we built and launched a custom, comprehensive Figma UI kit to maintain design consistency and speed up the workflow. This kit included over 100 components, core styles, and pre-designed templates aligned with our brand guidelines and styled with design tokens & Figma variables. The UI kit enabled our designers to create and iterate designs faster while maintaining visual cohesion across projects.

Maintaining good file hygiene is crucial for efficient collaboration and streamlined workflows. We’ve created a Starter Template to help ensure consistency across our design projects and improve handoff to developers.

Starter file Figma cover

Our project starter file helps ensure consistent design handoff and file organization. View the Starter File

Figma Library Cover Thumbnail

A sample of assets, components, and templates from our libraries. Explore the components

Figma Designer Playbook

To facilitate our designers' onboarding, we created detailed documentation covering workspace hierarchy, file naming conventions, libraries, workflows, and guidelines specific to our team’s Figma usage. This comprehensive resource served as a reference for designers, ensuring consistency in their work and enabling them to get up to speed with our processes quickly.

Component Documentation

To promote knowledge sharing and enable efficient collaboration, we created in-depth documentation for each component within our design system. This documentation provided comprehensive details on usage guidelines, states, interactions, and variations, ensuring designers had a clear understanding of how to utilize the design system effectively.

Figma Playbook for Designers

Training & Knowledge Sharing

To encourage knowledge sharing, collaboration, and skill development, we established bi-weekly Figma working sessions and pre-recorded training videos. These sessions served as a platform for the Design Ops team to introduce new components from our UI kit for quality assurance and feedback, teaching designers how to effectively utilize Figma for their products and enabling them to explore advanced features of the tool. Through these sessions, the team fostered a sense of camaraderie and facilitated continuous learning, empowering designers to collectively tackle design challenges and enhance their expertise in Figma.

Design System Office Hours

To support the adoption and evolution of our design system, we introduced bi-weekly design system office hours. These sessions provided a platform for designers to seek guidance, clarify design system components, and discuss any issues or improvements related to the design system. It also facilitated collaboration between designers and developers, ensuring the design system's seamless integration into the development process.

Support Ticketing System

To help the team effectively manage and prioritize bug reports and new component requests, we established a support request ticketing system. Designers can track their requests' progress, ensuring transparency and visibility. The system streamlines communication, provides clear acknowledgment, and facilitates timely resolutions.

Results

  1. Improved Collaboration: Transitioning to Figma enabled real-time collaboration, seamless sharing of design files, and instant feedback. This resulted in faster iteration cycles, reduced design handoff friction, and improved communication within the team.

  2. Streamlined Workflow: The development of the Figma UI kit significantly sped up the design process, allowing designers to focus more on solving problems rather than recreating common elements. It ensured visual consistency across projects and enhanced efficiency in delivering high-quality designs.

  3. Scalability and Consistency: Designer onboarding documentation provided a clear framework for new team members, enabling them to familiarize themselves quickly with our design processes and Figma workflows. This resulted in faster ramp-up times and consistent design outcomes across the team.

  4. Knowledge Sharing and Growth: The bi-weekly Figma working sessions and design system office hours created a culture of collaboration, learning, and continuous improvement. Team members enhanced their Figma proficiency, shared best practices, and contributed to the evolution of our design system, fostering personal and professional growth.

“The ease of handoff has been exponential!”

Steffane Creighton - UX & Visual Designer

“You can’t imagine the difference the UI Kit has made at PMI. It’s been a total game-changer!”

Luis Cielak - Lead Experience Designer

“The Design System team has played a vital role in enabling me to contribute quickly and effectively to projects.”

Joe Young - Experience Designer

“Access to the design system empowers me to create concepts consistent with our brand. This saves me time from finessing and wrangling with these details so that I can focus on the architecture of the experience, discussions with the business and team members to build consensus and alignment on a solution, and ultimately build it for release to market in a rapid fashion.”

Karen McArthur - Lead Experience Designer

“Not having to specify colors, fonts, spacing, etc., saves me so much time!”

Tim Douglas - Experience Designer

“PMI Infinity would not have been able to launch on time without the amazing design system that PMI has put together. It removed guesswork, answered uncertainty, provided styling, and even whole components, saving my team's entire sprint’s worth of work!”

Shane Bair - Emerging Product Technology Leader

conclusion

Outcomes & Learnings

The introduction of these tools and processes has significantly improved collaboration, design consistency, and overall team efficiency. By embracing these design operations practices, we have created a solid foundation for scaling our team, delivering high-quality digital products, and fostering a culture of continuous learning and improvement.

My goal is to continuously elevate our Design Ops maturity by implementing robust processes for talent development, resource utilization, design tools and workflows, and establishing metrics to measure user satisfaction, design quality and efficiency.

85% of users agree, "Using the design system has enabled greater efficiency in our product development process.

90% of users agree, "The design system helps me deliver more consistent and scalable digital experiences."