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. Vectorform advised on how to build and manage a global design system that scaled for multiple languages as well as form factors.

Goals

Audit, consolidate, build, and test

Assess existing designs and provide a solution for scale and consistency for the hundreds of screens already built out by Byton global teams.

Evaluate prototypes more rapidly

Unlike a mobile app or a website, an in-car experience requires unique hardware and prototyping solutions allowing designers and engineers to product test more effectively.

Establish a framework for the road ahead

The Byton M-Byte was just the first model in production with plans pointing to additional trims and even a second vehicle.

Results

1K+

Screen comps aligned with the new design system.

08

Multi-device prototypes built to demonstrate music, navigation, and in-vehicle settings.

50%

Estimated reduction in time required to build common screens.

Working with Vectorform this year was a great experience, and we couldn’t have delivered on schedule without their design team. They were exceptional in coordinating with our distributed teams in California, Germany and China.

André Nitze-Nelson
Head of Advanced Digital Product Experience - Future of Mobility

Multi-themed Collaboration

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.

International Appeal

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.

The Design System and Prototypes enabled the distributed Byton design group to continue exploring UX concepts across the various in-vehicle screens, now under a unified and consistent design language.

Roles

  • UX/UI DESIGN
  • Unity development
  • Design system implementation
  • Project management

Deliverables

  • Multi-screen Design system
  • Unity Prototypes
  • Custom maintenance documents
  • Simplified Hand-off solution

Concentrations

Byton At CES 2020

Byton showcased the true potential of the highly intuitive user interface, the BYTON Stage Display, by announcing partnerships with ViacomCBS & Access, CloudCar, AccuWeather, Xperi, Aiqudo, Road.Travel and Garmin.

Read it on their blog

 

Work

View All