Byton design system

Client

Byton

Timeline

June – August 2019

Roles

Design system creation & management
UI design

A design system for the future of electric vehicles

Background

Byton is in the startup phase of designing two electric vehicles targeting Chinese and American markets. Both vehicles have five interior screens, including a 48-inch high-resolution display across the dashboard. The digital experience includes customizable widgets, hand gestures, and voice command.

The design teams within Byton work around the globe, with no global library to manage the UI system encompassing the five screens. I worked with their team to create a streamlined design library to empower their UI designers to work efficiently.

Goals

Collaborate with a team of 5 designers to assemble three Sketch libraries including UI components, type styles, color styles, screen templates, and documentation on best practices.

Adapt to evolving design requirements. Design UI elements for new screens while simultaneously establishing the library to house those components.

The design system must accommodate English and Chinese languages, light and dark modes, and a customizable pop color depending on the interior trim of the vehicle.

UI guidelines

We designed templates and guides for primary UI layouts, taking into account the various screen dimensions. This was foundational to creating a cohesive system based on a common grid and interaction principles.

Atomic design components

We established a library of components based on atoms. This allows the design team to quickly re-skin UI elements for different use cases and efficiently perform global updates for each instance of the element.

Text and layer styles

We culled the existing text and layer styles across all screens and created a consistent usage pattern. Each screen required a unique set of styles due to resolution and color calibration differences, so we catalogued over 6k styles to accommodate each use case.

UI design

We worked in tandem with the larger design team to produce new screens for an evolving feature set. As new screens were designed, we catalogued the new UI elements. Our hands-on usage of the library provided valuable insights for how we continued to organize the components and styles.