car2go

Design system

Creating a design system and documentation for a consistent design language used internally around the globe.

car2go is a fleet of free-floating vehicles of different types. This allows people to find, reserve, rent and return vehicles not only in certain predefined spots but everywhere within car2go's area of operation.

Year
2018–2019

Platform
iOS, Android & Web

icons_hero@2x

The challenge

Designing for scale

car2go’s user-base and global scale expandes from day to day, so we needed a system that can hold up with that rapid growth.

From the start we wanted to be sure to create a system that other people could use, build upon, and that can be extend internally.

Working closely with engineers, product managers, operations, marketing from the beginning ansured trust withing the comany.

car2go_type@2x

Anatomy

The x-ray of an app

Based on the Atomic Design approach by Brad Frost, the Design System and its components are build with a hierarchy in mind like it is used in chemistry.

Grid
Spacings
Typography

Colors

Icons
Illustrations

Active States
Empty States
Animation

Alerts
Buttons
Cards

Map Views
Forms
Lists

Loading Indicators
Menus
Content

This provides a rich context for everyone involved and builds up a shared knowledge base and a fundation to build new features in the future.

The outcome are documented guidelines to keep the app and web materials, elements and components consistent, organized and available to everyone at all times.

car2go_icons@2x

A simple color palette

Primary colors

Blue


The primary brand color

Black


The base UI black

White


The primary brand color

Accent colors

Hierarchy & usage
Primary colors

We build a show-and-tell documentation to ensure an easy grasp of example compositions to understand when to use what components.

The new system makes it easier than ever to browse our collection of of components, usage & hierarchy.

car2go_hierarchy@2x

A system is always an ongoing project and will grow and adopt over time. We were solving a variety of creative problems along the way and I had the opportunity to work with amazingly passionate people. This documentation is the result of a lot of effort and expertise of a talented team of engineers, product managers and designers.

Caroline Lewandowski
Product Designer