For the widely publicized launch of Byton’s inaugural vehicle, the M-Byte, the brand needed a cohesive UI design system to support a global rollout. With design teams distributed across China, Germany, and the US., and a vehicle that boasted five interior screens (each with unique requirements), the company required a design system that enabled their design teams to collaborate more effectively. Launch advised on how to build and manage a global design system that scaled for multiple languages as well as form factors.
Support for light and dark modes at the heart of the system led to more productive discussions between departments and helped to ensure the content was displayed as intended in the launch vehicle.
Test driving designs
Prototypes on the target hardware within a to-scale model allowed the design team to ensure that the experience they created at their desk held true when translated to in-vehicle.
Five screens, one experience
Scalable components using density-independent pixel units were leveraged across various screens to drive increased efficiency in production. This ensured that rear seat entertainment echoed the level of consideration that the front seat experience provided.
Byton is an international brand, so the design system supported both Latin and Chinese characters to allow for refinement of all typographic characteristics, and to account for written content in several languages.