Redesigning the Column Selector

We created a design system that can offer infinite visualizations of charts, graphs, and data sets, taking inspiration from Play Date's design.

The creation of The Prospective Company provides us with a unique opportunity to contribute product design to an open-source project, Perspective, developers have designed for years. We partnered with Thought Merchants to evaluate the current user experience and set a design strategy forward.

The platform will only get more complex as we add functionality, so we must create a design system with affordances for future functionality and paradigms we can scale on.

The first order of business is designing an interface with nearly infinite permutations of charts, graphs, tables, and data sets. There is a certain beauty in embracing that chaos. Instead of containing the complexity of infinite visualizations, what if we embraced it? What if we admit that we cannot wholly control the visualizations? How does that influence our design strategy?

We stepped back and reimagined how to feature our data like a hero. Let's create the UI as a portal into your visualizations. In that case, we could create a resilient design strategy to adapt and be a chameleon to the customer's desired direction. Fantastic! Now, what do we do with that information? We look for inspiration!

We fundamentally believe in well-designed products and take inspiration from spaces outside the business intelligence and analytics world. Play Date, a new portable game system, was recently released. They reinvented a GameBoy-like experience utilizing a black-and-white display. Upon further review, the Play Date device is a portal to another view...a game, but we can apply that same thinking to Prospective's design system.

Playdate example image

We laid out a black-and-white application chrome, which became a portal into the data visualizations. The ability to play with your data is an enormous appeal of Perspective. It can quickly render visualizations of big data sets, and we want to encourage that interaction.

Redesigning the column selector into a literal "Lego block" the customer can play with is a big unlock. So much information condenses inside; all of it signals the customer context. We need to be efficient!

We introduced drag handles to encourage you to move the object around, an icon system, and a big on/off button at the end. Now that we have these blocks, we can move around. We need to separate the visualization controls from the visualizations themselves. We created a pixel-based texture to distinguish the control surface visually. It feels like GameBoy, right? Exactly!