Throughout my design career, I have had a strong focus on design systems thinking. Here are a few samples of design systems work I've accomplished!
On a financial platform like FactSet, nearly every page includes a customizable grid of complex data. One of the most common customizations is grouping based on certain values. For example - grouping a list of stocks in the S&P 500 by industry.
I designed a pattern for data grouping that incorporated:
This pattern was ultimately integrated into a reusable component for data settings, which is used in every application.
A user can select up to three fields to group a grid of data by. Each field nests into the one prior and can be rearranged quickly through drag and drop.
The FactSet platform frequently shows datasets that are too extensive to fit on one page. The design systems team evaluated common patterns to address this issue. We decided that pagination was the best method for users to consume large datasets, measured by usability testing and loading performance.
I designed a responsive component for pagination that incorporated:
I created breakdowns for various screen sizes, taking into account the click target sizes and color themes.
The largest and smallest sizes for a new responsive component, shown here in both light and dark theme.
In a complicated financial platform, users have the opportunity to take actions that can have significant consequences if done incorrectly. While FactSet is very stringent on the use of dialogs, one appropriate use of them is to confirm an important action.
With the partnership of a visual designer, we created a dialog component specific for confirmation. This included three main elements - a header, body text, and confirmation buttons.
This pattern not only included the component itself, but content guidelines.
.svg)
A light theme confirmation dialog component.
.svg)
A dark theme confirmation dialog component.
Content guidelines for confirmation dialogs
On the Bloomberg Terminal, there are many products that allow a user to create a list of objects. However, users have no straightforward path to carry that list to the many analytical tools on the Terminal. Given that there are dozens of products at Bloomberg that allow users to create lists, the need for this interaction is frequently brought up by our users.
Using existing components, I designed a simple pattern that shows a few options for next steps to start analyzing the list contents. On the list product, a footer appears with anywhere from one to three buttons linking to relevant analytical tools. When the user clicks on one, they are brought to that page with the list loaded in the security identifier in the toolbar. The listed security in the toolbar supplies the page with its data, therefore the new page will use the list to populate the data. This is what is referred to as "tickerizing", or creating an ID for a particular entity so the system recognizes it as loadable.
The arrangement of buttons at the bottom of the list product proved easy enough for app team engineers to implement and simple enough to ensure greater consistency.
<aside> 🏆 An unintentional benefit arose during a controlled beta release of this pattern — it raised the traffic of the connected products from new users by 24% after one month. This pattern is now implemented in the majority of list tools.
</aside>
The pattern allows anywhere from 1 - 3 buttons at the bottom of a screen, each with the titles "Function X - FUNX <GO>". All products on the Bloomberg Terminal are accessed via a 4 letter mnemonic entered into the command line, followed by the "<GO>" key.
When the user navigates to the next step product, the list is loaded as a custom index. This means it automatically stores the user's list in the custom index library!