The Fish Tank Design System
Fish Tank Text Component Design Documentation
Fish Tank Content Loaders Component Design Documentation
Fish Tank Call To Action (CTA) Button Components Design Documentation
Background
Fish Tank is Bloomberg BNA’s Design System; it was built on top a collection of foundational styles and reusable web components which powers a house of Bloomberg digital products.
It built with six Principles in mind: Users Fist, Consistency Across Products, Flexible Implementation, Communication, Efficiencies of Work, and Accessible Design.
Check out fishtank.bna.com yourself. If you’re a developer, feel free check out Fish Tank on npm or on GitHub ( the Fish Tank repositories ).
My Role
UX Design System Engineer. Component Designer. Front-End Developer.
I’m a UX Design System Engineer on Fish Tank. In collaboration with the full UX team and Fish Tank’s Engineering Lead, I design the functional scope of the systems web components and build them. I also assist in the design system’s maintenance and deployment processes, as well as oversee the development of the designer and developer documentation.
Design + <Code/>
Fish Tank is a small team of Designers and Engineers working together to build quality reusable web components that meet W3C Accessibility Standards that can be used by both desktop and mobile development teams using the VueJs Javascript Framework.
I work closely with product development teams and their lead UX designers to ensure new Fish Tank components include proper states, accessibility features, and required functionality from the component’s design process to its development and documentation life cycle.
Fish Tank Design Documentation for Text Fields Component
Fish Tank Code Documentation for Text Fields Component - Live Code Example
Documentation
When building a Design System it’s really important to have good documentation. Not just for the developers who will be using the web components, but also for the designers who will be incorporating those UI components into their designs. For each of Fish Tank’s Component’s and Foundational elements, we maintain both design and code documentation pages.
Each of the components’ design documentation contains Guideline Principles that defend the design decisions made for each component. These Guidelines include: When to use, When not to use, and Examples. Each component’s code documentation includes developer-focused documentation on how to get started using each component, a list of available props for manipulation, as well as live example code for developers to play with and become more familiar with each component.
Accessibility in Design Systems
What’s a Design System if it’s not accessible? There’s no point in building a product if your users can’t use them.
One of the six Principles Fish Tank was built within mind was Accessible Design. It’s important to empower as many people as possible to enjoy delightful experiences with your product, regardless of any hearing, motor or cognitive disability. That’s why each Fish Tank component is made with consideration of accessibility. This includes support for:
Screen readers
Users with reduced vision
Keyboard only users
Our Mission to provide accessible products to users extends beyond Fish Tank, as we educate project teams on best practices.
Fish Tank Design System ‘Principles’
Fish Tank Typography ‘Principles’
This is the BGOV mobile app’s login page. It’s made entirely out of Fish Tank components.
Gaining Adoption
The hardest task for any Design System is gaining adoption from development teams, their UX designers, and product owners for use in their supported products. Fish Tank as a Design System isn’t some fancy company project, it’s a product; a product with real customers, with goals, and real value that it brings to the consumers of Bloomberg Products. A tool that speeds up development time with pre-styled web components, built-in accessibility features, and functionality.
Over the past year, we’ve worked closely with Bloomberg Government, Tax, and Law development teams to gain adoption of the Fish Tank Design System in Bloomberg BNA products like the BGOV mobile app and BloombergLaw.
Next Steps
When I joined the Fish Tank team as a UX Engineer in addition to my UX role at Bloomberg BNA in 2018, the Design System had shipped out less than eight components.
One year later and we’ve delivered over eighteen fully functional reusable web components, with plenty more on the way with the adoption and support of several Bloomberg development teams.
In the Future, Fish Tank as a Design System will continue to grow as a Design System in order to support more company products and continually produce web components as it gains more adoption throughout the company.
