Richmond is a design system made for complex, information dense applications.

It is a fork of the Ant component library and it’s built for the Angular framework.

Project:

When I joined StreamSets, there wasn’t much in the way of branding so I was starting with a blank slate. There was a logo that existed, and with a couple of minor color tweaks it wasn’t too bad. The website, on the other hand, is an entirely different story.

The existing products were built with the Bootstrap and Materialize component libraries. The reasons for the two different libraries for two similar products still remain somewhat unclear, but I saw this as an opportunity to start from scratch, or at least work our way towards scratch.

However, the need, in my mind, was pretty clear. Considering the changes that needed to be made to the products and the future direction, it made sense to have a component library that was robust, extensive and totally customizable for our unique use-cases.

Scope

First it was important to asses the current state of things and figure out what the options were given the timeline. After much research and many discussions with the front-end team, I determined that we had the time, ability and need for an entirely new component library. This was not a decision made lightly, especially since front-end resources are almost always in short supply.

The fact that we were using AngularJS and definitely didn’t have the time to switch to ReactJS narrowed down our options considerably. It didn’t make sense to build our own component library from scratch so we unanimously settled on reskinning the Ant design system and creating custom components as needed.

Challenges

The ultimate challenge was the timeline and keeping far enough ahead of the engineers, but the day-to-day challenge was to keep all of the growing team of engineers in sync.

Another initial challenge was getting buy-in from the engineer who was almost entirely responsible for building the first two applications himself, who at this point was off working on another app. A non-trivial task to be sure, but we eventually got there.

Icons

Material Design icons were the best around by a long shot, so in order to move in a new direction I needed to put together a comprehensive catalog of cohesive icons that addressed a number of use cases unique to the world of DataOps.

The final collection of icons came from multiple sources. I created most of the icons by scratch, gathered some from open source libraries, and contracted from from designers in Romania and Ukraine. In the end we were all happy with the look and feel of the entire collection.

Previously the icons used for the pipeline stages (the largest and most complex ones) were all in PDF form with no original vector files. Since we wanted the icons to be purely code so they could be super small in size and infinitely scalable, I needed to make most of these icons by hand. Also, to make sure things didn’t clash, I only used colors from our color palette seen at the top. These are the types of details you really need to plan from the beginning.

Tables and Filtering

One of the most important features in an information/data heavy application is the functionality and usability of tables and lists. The front-end team and I put a lot of thought into this. We were on the fence about whether or not to customize the out-of-the-box tables or use something like ag-Grid. Ultimately we decided to start simply and see how far we could get with the most basic option and then bring in bring in ag-Grid later if/when the need presented itself.

One of the big asks from the user interviews that we conducted was to have better table filtering and bookmarking. To address one of these concerns I came up with the design that you see above. This design allows for unsophisticated users to perform powerful and repeatable searches while at the same time allowing for power users to perform the complex text queries they are used to.

Pipeline Designer

The pipeline designer sits at the heart of StreamSets. There are quite a few competitors now, but we were the first to implement a pipeline designer canvas. It’s gone through many iterations over the past few years, but the goal has been to maximize screen space and give the user contextually important information. With everything that can go on at any given time, it can be super easy to overwhelm the user.

Full Overview Image and Drawer Styles

Next Project: FedEx TRAC & Route System