Designing for the Future
I joined FedEx as a contract UX Designer but within two months, I was offered a full-time role. Early on, my manager posed a question that would direct much of my focus: “Do you know anything about design systems?” While I didn’t have direct experience, I saw it as an opportunity to dive into something new with potential business value.
Discovery
I began an intensive search for resources, studying how large enterprises developed and maintained front-end design systems. My research led me to native web components—modular building blocks using W3C standards such as HTML, CSS, and JavaScript. These components are framework-agnostic, ensuring scalability and adaptability without relying on third-party libraries. The simplicity and universality of native web components resonated with me. I envisioned a design system built to stand the test of time, accommodating technological shifts effortlessly. I pitched this concept to my manager, who supported the initiative and encouraged me to proceed.
From Concept to Reality
I embarked on a year-long effort to build a framework-agnostic design system from scratch. The system centered on reusable components with robust security, achieved through Shadow DOM encapsulation. At the time the Google Polymer team had a rudimentary editor which inspired me to expand the project with our own version of a drag-and-drop editor for designers to work directly with native web components. This tool would simplify creating consistent, scalable designs across teams. The additional complexity transformed the project from a straightforward design system to a comprehensive design tool.
Iteration and Resilience
The journey was anything but easy. Native web components were relatively new, and resources limited. The challenges were compounded by the Shadow DOM's encapsulation which made manipulating hidden styles and properties difficult. I iterated over 200 versions of the editor, tackling browser compatibility, refining the user interface, and troubleshooting complex JavaScript issues. Despite the hurdles, I was determined to deliver a solution that was both functional and innovative. Each challenge provided an opportunity to refine my approach and deepen my technical expertise.
A Demonstration of Possibilities
In the end, I created a framework-agnostic design system editor powered by native web components that made using those components more intuitive for designers. While the project showcased the long-term benefits of investing in standards-based technologies and the potential for future scalability, it remained a demonstration project. Due to reorganization, the UX team was redeployed to other assignments, and the system was never fully implemented.
Lessons for the Future
This experience taught me invaluable lessons about innovation, resilience, and leadership:
Resilience Matters: Tackling challenges solo requires determination and the ability to learn quickly.
Think Beyond the Ask: What began as a design system expanded into a transformative tool because I identified a broader need.
Innovation is Universal: By focusing on universal standards like web components, I developed something adaptable and enduring.
Epilogue
Angular now supports native web components and web components have been widely adopted as a way to future proof enterprise design systems.
Early UI iteration
Final UI
Custom Elements
Date Widget
Card with menu and button options
Drop-down menu tag with fedex fx prefix:
Filename: fx-dropdownmenu.js
Named slots for developers to access element properties in the shadow dom:
drop-text1
drop-text2 ...
Available properties:
width, height, background-color, z-index, opacity, float, color, font-size and more
Drop-down Menu
