Fish Tank Design System

First things first, you can check out the full documentation on the Fish Tank Design System at fishtank.bna.com.

In 2016 the Bloomberg BNA design team was enjoying a bit of a golden era with our UI kit, a massive, highly organized sketch library using every possible feature to enable customization and ease of use for the designers - largely due to the hard work of my colleague Jim Mai.

While this library revolutionized our design process, our handoff with developers still suffered from inefficiency and left us vulnerable to errors, redundant development, and inconsistency.

Nearing the end of 2016, I started to advocate for a front end component library created and maintained entirely by the design team in hopes of remedying the pitfalls of designer-developer handoff. However, the head of the design team, Jared Latimer, introduced me to an even better initiative – a design system. And thus Fish Tank was born.

After months of discussions and planning with product and engineering, we settled on the stack we would use and the logistics of how we would deliver:

• Versatile components to a wider ravens nearing teams, utilizing a variety of technologies
• Documentation to guide both the design process and developing software using Fish Tank

As a manager on the design team, I contributed directly to the design of the UI kit and our team guidelines and patterns; however, my role as a UX engineer was my primary responsibility. In addition to creating components, I led development of our documentation site, which provides dynamic examples of the components and best practices.

In order to ensure our accurate, sustainable, and scalable content, I made every effort to programmatically reference the tokens and components, such that the documentation can automatically update as much as possible. For example, our system includes over 300 original icons - when one is added to the token data, that icon will be included and properly categorized within our documentation without any manual placement by a developer. The same is true for our colors, typography, spacing values, and updates to existing components.

Designing and engineering the system was a significant undertaking; however, ensuring our work would be adopted and used by our various engineering groups was an equally ambitious objective. After numerous meetings and presentations to advocate for implementation of the design system, you can now experience our work on all major Bloomberg legal research products including Bloomberg Law, Bloomberg Tax & Accounting, and Bloomberg Government.