Chauncey
Technology
Chauncey Live connects Unreal Engine virtual experiences to real time web interfaces. This innovative start up provides developers with the tools to create virtual controllers for web based collaborative video games, real time special effects for AR concerts, and more.
Services
Design System
UX/UI Design
Development
Platforms
Web
Mobile Responsive
The Real Thing
Say that again, asking for a “friend”
During the kick-off meeting, the Chauncey team definitely had to explain what their platform does a few times. We love working on complex projects and problems; any designer worth their salt should. But to create the best solution, we really needed to get in the weeds, have no ego, and embrace the “there is no such thing as a dumb question” mentality.
Design System
By having a design system in place, teams can work more efficiently. Designers can focus on creating new components or refining existing ones within the system, ensuring a cohesive UI. Developers can leverage these designs and guidelines to implement the UI quickly and effectively.
Unique color system
The major benefits of the come down to simplification in colors used on the website and ease of use creating component simply by layering the same semi transparent cards over on another.
This made developing more complicated components for the dashboards a breeze and kept the development simple since only one background color needed to be used on the front end for 90% of the app.
Text colors and sizes were also simplified on the front end as only 4 colors were needed and the opacity system handed emphasizing and de-emphasizing various text depending on the depth and brightness level used.
This made developing more complicated components for the dashboards a breeze and kept the development simple since only one background color needed to be used on the front end for 90% of the app.
Text colors and sizes were also simplified on the front end as only 4 colors were needed and the opacity system handed emphasizing and de-emphasizing various text depending on the depth and brightness level used.
Background Elevation Colors
Elevation colors are various opacities of white used to stack over each other to create layers and depth.
#121316
Background UI
#191A1D
Background Elevation 1
#202124
Background Elevation 2
Foreground Elevation Colors
Foreground elevation 1 is the most used elevation. Using this Color/opacity for the background of elements in elements naturally creates depth and contrast between parent and child elements.
Other elevation levels are used more sparingly in the design and are mostly used to create contrast between elements like cards and buttons that are at the same depth/layer.
Text Colors
Other elevation levels are used more sparingly in the design and are mostly used to create contrast between elements like cards and buttons that are at the same depth/layer.
#FFFFFF (85% Opacity)
Bright Text
#FFFFFF (75% Opacity)
Normal Text
#FFFFFF (60% Opacity)
Dim Text
#121316
Dark Text
GRAPHS WITH A PURPOSE
All too often, graphs look cool, but don’t actually provide value. With so many metrics being tracked to monitor usage and understand the impact of creations, the graphs needed to be simple enough to gather info at a glance, while allowing further investigation with filtering mechanisms.
The team was just genuinely excited to work on Chauncey from day 1. We collaborated to find a technical solution that worked within our current framework, the could get us to market ASAP, and would then scale into more robust versions.
Dan Tello Lead Engineer & Co-founder
Once the design system was in place, it all began to manifest into a complete User Interface. UI components were designed to be reusable and independent, allowing developers to easily integrate them into different parts of the product.
This modularity ensures scalability as new features can be developed by combining existing components. We collaborated to the Chauncey engineers to develop a React frontend application and Go backend.
Ready to grow? Reach out