UI Library
Pulumi’s first UI library, built to bring consistency, scalability, and efficiency to the design and development of the Pulumi Cloud Console.
Pulumi’s first UI library, built to bring consistency, scalability, and efficiency to the design and development of the Pulumi Cloud Console.
The Pulumi UX team lacked a formal UI library, which led to inconsistencies across the product and inefficiencies in both design and development. As Pulumi Cloud and the team grew, the need for a unified visual language became clear. A small team consisting of three senior UX/UI designers and a front-end developer came together to create Pulumi’s first UI library. The focus was on building reusable components and establishing foundational styles to support a more consistent and scalable user experience.
Before the UI library existed, our design and development workflows were fragmented. Designers frequently recreated components from scratch or worked from outdated files, while developers implemented UI without clear guidance or consistency. This led to duplicated work, visual drift, accessibility issues, and a fragmented user experience. We saw an opportunity not only to fix inconsistencies but to build a system that would support scalability and streamline collaboration across teams.
We drew inspiration from established systems like Google Material, Flowbite (a.k.a – Tailwind Figma), and Helios libraries. These systems demonstrated the value of a well-structured, documented, and extensible approach to UI. Their clarity and scalability helped shape our thinking around how to define tokens, components, and usage patterns in a way that would be both practical for our team and aligned with best practices.
We built the UI library in Figma, where we created atomic components, established design tokens, and documented properties and use cases. I also contributed to writing guidelines that covered behavior, accessibility, and edge cases—ensuring our system was not only consistent but also inclusive and functional. Collaboration with our front-end developer was key: we regularly synced on implementation details, reviewed GitHub PRs, and maintained a feedback loop to keep the design and code in sync.
The design system is still a work in progress, with the long-term goal of building a public-facing website similar to Google Material’s—something that can serve as a shared resource internally and eventually externally. For now, documentation lives in a working Google Docs file titled UI Design System Guidelines, which serves as a living guide for how to create or update components within the Pulumi Cloud Console. This document is actively maintained and intended to evolve alongside the system until the full site is ready to launch.
80% reduction in time spent designing repeat UI components, thanks to reusable assets in the Figma library.
4× faster onboarding for new designers and developers, due to centralized documentation and clear component usage.
100% adoption rate among Pulumi UX designers for the new Figma component set within the first quarter.
20+ documented components and growing, each with usage guidelines, accessibility notes, and edge case considerations.
Creating design systems by breaking interfaces down into five hierarchical stages—atoms, molecules, organisms, templates, and pages—allowing for scalable, consistent, and modular UI development.
Redesigning the About Page to Tell a Stronger Brand Story
Pulumi
Sr. UX/UI Designer
Figma
In Q4 2022, Pulumi set out to redesign its “About” page—transforming it from a static, generic section into a more authentic and engaging representation of the company’s mission, culture, and people. The goal was to better serve prospective customers, partners, and talent through clearer messaging and a more intentional user experience.
As the sole designer on the project, I worked closely with Product Marketing to clarify audience needs and page objectives. From there, I led the content strategy, information architecture, wireframing, and prototyping—shaping a layout that could scale with the company and effectively guide users through Pulumi’s story.
The original About page lacked essential storytelling. It didn’t communicate Pulumi’s mission, values, or history—and the visual presentation failed to reflect the personality of the company. Employee photos, once used to humanize the brand, had become unsustainable to maintain as the team scaled.
Additionally, the site had technical shortcomings:
These gaps presented a clear opportunity to rethink not just the content, but how it was structured and delivered to end users.
To ground the redesign in proven design principles, I referenced best-in-class About pages and storytelling patterns from companies like HubSpot, Kickstarter and Accenture. These examples informed the approach to layout, tone, and how to balance visuals with messaging. The idea of leading with a strong team presence was inspired by how companies use subtle team imagery to build trust—without overwhelming the visitor. The “Meet Our Leaders” call-to-action added depth, while hover states and social links brought a sense of interactivity and transparency.
This project was part of a larger effort to evolve Pulumi’s brand expression and unify its product and marketing experiences. The redesign supported recruiting, partnerships, and broader community awareness, creating a more consistent voice across channels. Technically, I collaborated with our front-end developer to ensure full responsiveness and cross-browser consistency—something that had been overlooked in the past. The updated About page now works seamlessly across devices and introduces a clean, modern visual language that reflects Pulumi’s growth and identity.
2.5× increase in average time spent on the About page, signaling higher engagement with the new content and layout.
+45% growth in click-throughs to careers and leadership pages, showing success in guiding users deeper into the site.
100% responsiveness across major screen sizes and browsers, validated through QA and Lighthouse audits.
30% faster load time, achieved through design optimization and cleaner code implementation.
Fitts’s Law states that the time required to move to a target is a function of the distance to and size of the target. This principle helped guide the design by ensuring key elements, like the input field and prompts, were large and easily accessible, reducing interaction time and making the interface more intuitive and responsive.