BluePrint Design System

A suite of employee-facing and B2B client-facing financial service tools

Context

BluePrint is a portfolio of tools developed by STP used both internally and by client firms for financial services. The product suite tackles everything from managing hundreds of end-client portfolios to automating institutional financial statements to workflow management for hedge fund investors to user and data management.

Due to the fast-paced, agile approach STP took in it’s early years - the tools within product suite had very different code-bases and designs. The suite needed unifying as a brand, streamlining for maintainability and scalability, and a user experience overhaul to improve the efficiency of business operations.

Project

Over the course of a year and a half, I partnered with engineers and domain experts to create the design system that backed the redesign of the BluePrint product suite. The result was a library of standardized components mirrored by a react component library.

Component library

Our component library was built with utility-first classes from Tailwind CSS. I identified user goals through prior exploration across company verticals, which helped me identify the basic components we needed in the initial stage of redesign. I maintained documentation within Figma in the early stages, allowing our small team to move quickly.

White-labeling

It is important for client firms to have brand jurisdiction over the platform experience, so white-labeling was essential to the design system. I incorporated a “brand” variable into component style definitions to allow for branding flexibility.

Branded sign in

This is an example sign in page for a financial client who has licensed our product. My approach to white-labeling enabled a simple “swap” of branded components across the platform creating a seamless end-user (client’s client) experience.

Layouts

Across different products under the BluePrint umbrella, primary user stories differed by type of data involved and by type of activity required to reach the end goal. Design system layouts aligned with an overarching look and feel for a cohesive experience and were versatile to support information architectures relevant to each user story.

Configuration Panel Solution

Below is an example of how I utilized layouts in the design system to support a reusable solution.

While in progress towards a primary goal, users needed to access important “configuration” controls. In any context, configuration controls support primary activities, but are not required for the user to be successful.

For example, a user may have a goal to generate and export a financial statement. During the process of generating that report, they want to enhance their report by adding a pie chart. The user needs a way to access chart configuration settings and return to their primary task of generating their financial statement.

There were many scenarios across platform features where configuration controls are available to users. The solution needed to provide a reusable pattern for incorporating configuration controls in context.

Navigation and content sidebars

Double side bar with open and closed states handles high level context and drives secondary content. Open states enable the user to select data within the product environment. Closed states maximize horizontal space available for the primary task. Side bars maintain their hierarchical relationships among elements across products, while data type within elements differs according to context.

Modular Forms

Above is an example UI using the system. A good deal of the product suite’s scenarios involved fillable forms and data entry. The forms pattern was designed to be highly versatile and modular to account for a wide array of product scenarios - from capturing static options to dynamic, dependent attributes.

Custom components

Many design sprints required components that could not be built using the existing design system due to the complexity of business requirements. The challenge was to work within system styles for consistency while allowing for unique rules that deviate from system standards.

Simplifying the UX of logically-complex tasks

Custom components deviate from established patterns in carefully chosen ways for the purpose of facilitating satisfying user experiences with more intuitive design for common tasks with high complexity. Check out this case study for a closer look at my approach to scheduling with business day logic.

Conclusion

As BluePrint and its user-base expand, so does the design system. Ongoing product discovery and development allow us to challenge what has worked before and make informed improvements.

Thanks for stopping by!

Check out my other projects.