Design Director: Max Kahls
Creative Director: Ralf Lukowsky
Senior Art Director: Michael Dielmann
Senior Copywriter: Henning Lemke
Project Manager: Marie Boy
Design Direction, Icon Design, Guideline Design
Among the many Design Guidelines of the BVG, there is only a small chapter existing that covers the field of pictograms. Until then, it only defined certain rules for colors and very top level design principles. Besides that there was no system for digital icons in place. This lead to a growing number of pictograms that didn't correspond with the existing system.
The initial task was to define a Design System for pictograms and icons which incorporates the values of the BVG and create guidelines, that specify the construction.
As briefed, the team from the agency Die Botschaft and I developed various design concepts that reflect the character of the brand. We incorporated movement, lines, connections, and other elements to come up with several cohesive design routes. Since there was no connection to the digital icons, I advised the BVG to view it as a holistic system with channel-specific characteristics if needed.
Initially, everything went smoothly and the responsible team at BVG was pleased with the direction we took. However, after a few rounds, it became apparent that the effort to change the existing design system was impossible for the BVG. Changing the pictograms on hundreds of train and bus stations, thousands of vehicles, and even buildings would be a massive undertaking for small icons that were working fine thus far.
Thus, we decided to focus on the existing pictogram system. I analyzed every little detail of the system, attempting to find similarities among hundreds of different designs, such as line thickness, corner radius, filled vs. outlined, perspectives, level of complexity, and more. We needed to identify the core of the design and create new guidelines based on that.
Additionally, I extended the traditional pictograms with characteristics needed for digital environments. As pictograms by nature are not interactive, the opposite can be true for digital icons. Therefore, I defined different states that an icon could have, including Default, Hover, Active, and Inactive State. Since the icons in digital environments are typically displayed smaller, I also had to redefine the line thickness slightly.
In the end, we developed an extensive guideline for pictograms and icons, defining every necessary detail to recreate such symbols. We also introduced a toolbox that makes it easier to create new symbols with people.