UFO Design System
Improving operational efficiency by unifying disparate product design across data center applications
Client
“A large technology company” (2022)
Role
Lead UX Designer
Team
Serena Kapur (PM) Allison Pinz (Jr. Designer), Sean Loyless (Lead Developer)
Challenge
A “large technology company” spends $13 billion per year on inventing, building, and operating the world’s leading data centers.
The Unified Fulfillment Optimization (UFO) helps in delivering hundreds and thousands of computers each year with network capacity that powers 25-40% of the global internet user traffic, all in support of serving billions of queries a day from our users.
The (UFO) UX team sought to improve operational efficiency by unifying disparate product design across data center applications.
Approach
Our IBM team initiated the creation of a design system that unifies the different products bringing the team closer to a One Fleet vision.
Leveraging the company’s larger design system, our team analyzed the product functionality and assessed common patterns, using these to inform the UFO design system. In tandem, we iterated with Google stakeholders to develop a unified brand consisting of brand elements, page layouts, data visualization, and illustrations.
A big individual contribution of mine was unifying the look and feel of these applications, not just through component content, but at the foundation. I established the underlying grid system, standardized the page chrome, and provided basic layout templates to drive product consistency around the content.
Figma
We created this system in Figma to enable the dozens of UFO designers to have a single source of truth for their components.
Milestones:
Published and maintained a 20+ component library of both custom and the company’s larger design system components to act as a source for designers across the UFO team
Updated old component builds to include variants and responsiveness to increase efficiency.
Regularly updated components based on team designs, feedback and Material design updates
Included custom foundational styles such as illustration and layouts to further create consistency across teams
Documentation in Carbon
Once complete the assets and supporting usage documentation was made accessible to UXDs and Engineers via the Carbon platform.
In Cabon, we explain each component, it’s function, and individual use cases.
Milestones:
Updated over 40 Pages of Content across the site
Incorporated Usage Guidelines for Components and Patterns
Included all Use Cases, Resources, Accessibility guidelines
Embedded pages from Figma and linked Engineering Resources
Included working code to showcase interactivity.
Outcome
Our team successfully deployed a unified “One Fleet” brand, creating an identifiable brand and single source of truth for the UFO product suite.
The up-leveled design system accelerated feature design across design and engineering and established consistency across the brand experience.
Personal note:
Design system work is a large undertaking. This opportunity provided a deeper understanding of what it takes to maintain a design system: from request intake, to design and component maintenance, to system management and team communication. It opened my eyes to how much work it is just to successfully build and implement a component.
Always remember to celebrate the wins.