Tempus Technologies is a financial software development company that was acquired by PNC Bank in 2021. Tempus offers secure payment processing solutions to businesses through web and POS device experiences. Rich configurability is a cornerstone to the web offerings, while uptime and precision are cornerstones to the POS device offerings.

There are three factors that led to the need for the UI component library.

An early consideration was to leverage an existing library, but we eventually decided to give it a shot internally. Many of the design files to date contained small sets of reused components that could reasonably be collected, aligned, and organized to form the bones of our library.

The starting point of our library was compiled as described above, as well as through research of similar products in the financial tech world. The visual design of the components is meant to illicit a sense of security and clear interactivity. If something is blue, you can interact with it; and the more blue it is, the more significant it should be to a user's experience.

With the basics accounted for, we zoomed back out to understand who at Tempus would consume this, and how. What are their needs? What solutions would be the most impactful if they happened tomorrow? After agreeing on a general scope, we needed to make sure any decisions made from that point on were grounded in solid design principles.

The design principles were formed from the answers to 'how might we' questions. Those questions were formed from the needs uncovered in our discovery phase. Each principle represents a category of those answers and contains positive/negative scenarios to create a foundation for evaluating designs against.

While there were ambitions for this to be a thorough design system, our immediate needs were most effectively met by a UI component library. Each component in the library would be arranged in a typical matrix that represents each of its variants and interaction states. Personally, this structure has since become my favorite way to sort and make sense of braindumps.

To solve for rich configurability, we needed solid baseline components (check) and the means to control their style and layout properties all from one place. With Figma's variable feature, every component property set with intent could instead use a variable. The most challenging part of this work was managing the parallel hierarchies between the component and variable collections. After a while, the mantra of "never do the same thing twice" simplified my problem considerably; if a specific property held the same set value across many/all components, that was a great candidate for a variable.

Today, the variable side of the library continues to evolve and has been the most exciting and educational aspect of this effort. Understandably, this has created numerous opportunities to work closer with developers and understand their perspective of consuming our designs.