Apptio: Apex Design System
Designing for Scale: Building the Apptio Design System for Consistency and Speed
Designing for Scale: Building the Apptio Design System for Consistency and Speed
Before we had a design system, our product teams were using different styles and UI patterns. This caused:
Inconsistent user experience across products
Slower design and development time
Confusion between teams about what to use and when
We needed a central system that could be reused by designers and developers across teams.
Audit and Standardization: Led a comprehensive audit of existing components, identifying inconsistencies and guiding the team to create a unified component library, ensuring consistency across all products.
Design Guidelines and Documentation: Took ownership of creating clear, detailed design documentation, streamlining the process for cross-functional teams and fostering better collaboration.
KPI-Driven Data Visualization: Worked closely with stakeholders to understand their needs, using my design expertise to create intuitive visualizations that made complex data easy to understand and act on.
Cross-Team Collaboration and Feedback Loops: Initiated regular feedback loops, encouraging open communication between design, product, and engineering teams, which led to more efficient workflows and higher-quality outputs.
To ensure consistency, scalability, and collaboration across teams, I introduced a clear, 6-phase design process tailored to the needs of Apptio’s enterprise environment.
Unified Component Library: A set of standardized, reusable UI components that ensure visual and functional consistency across Apptio’s products.
KPI-Driven Data Visualization: Intuitive visualizations for tracking important metrics like cost savings, budget variance, and ROI, making complex financial data easy to understand.
Design Guidelines and Documentation: Clear guidelines and thorough documentation that help teams follow standardized processes, ensuring proper implementation of design elements.
Cross-Functional Collaboration: Streamlined communication and feedback loops between designers, developers, and product teams to ensure alignment and continuous refinement of the design system.
In our design process, we were facing a lot of inconsistencies across Apptio’s platforms, which created confusion and slowed down progress. To address this, I introduced the Design Token Plugin in Figma.Â
This tool allowed us to create predefined variables for core design elements like colors, typography, and spacing, which ensured consistency across all designs. More importantly, it facilitated seamless collaboration between designers and developers, aligning our vision and speeding up the workflow.Â
By implementing this solution, I helped improve efficiency and quality, fostering better teamwork and a more streamlined design process.
Reduced design-to-development handoff time by introducing reusable components and shared documentation.
Improved usability and consistency across products, as noted in internal reviews and feedback.
Faster onboarding for new designers and developers due to centralized Figma libraries and guidelines.
Adopted by 4+ product teams across Apptio’s platform.
Brought visual and UX alignment across Apptio One and Targetprocess.
Received positive feedback from both internal teams and stakeholders.
Learning
Leading the Apptio Design System was more than just creating a library — it was about fostering collaboration, setting shared standards, and building trust across teams. It taught me the power of systems thinking and the impact of well-crafted foundations on product scale and usability.
This project strengthened my belief that design systems are the invisible engines behind great digital products — and I’m proud to have built one that continues to scale and evolve with Apptio’s future.