Chauncey Live is a platform that allows users to create controllers for interactive experiences built on platforms like Unreal Engine. Imagine a live concert with an app that provides attendees the ability to interact with the visual effects displayed behind the performers leading to unique one-of-a-kind experiences. They’ve perfected the communication between mobile and web interfaces with 3D engines.

As part of their recent efforts to improve their platform, they wanted to build new dashboards for both users and themselves. In the early discussions, it was settled that a Design System should be established to maintain visual design standards and help speed up development and future design efforts.

To start this project off right I imported the files Chauncey used to make the first version of their web application. From here I identified and sorted the various components, colors, and uses of typography based on Brad Frost's atomic design.

Once the components, colors, and typography were organized I went through and consolidated each usage removing colors and typography that were redundant to simplify the Design System Kit as much as possible.

This is where I hit an interesting challenge between the established visual style of the brand, layering components hierarchy, and accessibility of the typography.

Since the brand used black as its app’s background color, I could use a low opacity white as my card’s background color. Then when components were nested the opacities would stack creating the visual hierarchy automatically. This left only one more challenge:

‍“What should the card’s opacity be so that we can get a large amount of nested without failing contrast and accessibility for the typography?”

‍I tested dozens of opacities and typography combinations through the AA and AAA accessibility plug-ins, eventually settling on this solution:

By dividing the opacities into Background and Foreground variations I was able to create a system that let the designer pick and choose the levels of contrast they wanted for various components AND allow them to nest up to 20 basic components while maintaining AA Accessibility requirements.

When pitched, the final system to Chauncey, it blew them out of the water. They quickly signed off on the system pushing me onto my next task, designing the user and admin dashboards.

Here we met with Chauncey to determine critical metrics and walk through competitors in the space. Here we discuss the future of monetization ideas citing metrics like the number of projects, unique connections to those projects, and data usage as the key information associated with a user's account, creating the dashboard to priortize these metrics using the layering system I develped before.

In the end, Chauncey was thrilled with the design and the Design System Kit we provided alongside it. I am very proud of the elevation system we designed using transparency. I am happy it works so well for Chauncey and has cut down on complexity when defining colors in design and development, but it is not perfect

In practice this system can only work for brands using dark or black themes. Using this theme with any colors like red or a color that is in the mid-range of brightness will quickly runs into issues with contrast.