Building Cruise’s Illustration System

Silas Reeves
5 min readOct 5, 2022

--

Illustration as a professional discipline is deeply personal. I believe that an illustrator brings their own experience and aesthetics to everything they create.

Since joining Cruise last year, I’ve had the opportunity to bring my own experience to bear as we build the illustrations that will define our brand.

My preferred method of inspiration is to look deeply at vintage or historical references rather than contemporary work. Sure, I’m aware of what other people are doing–lots of tech companies use geometric characters, for example. I want to get close to the source, to find an emotional touchstone.

A retro/vintage style illustration of a stack of three people using binoculars
Example of author’s previous work for a freelance client showing the influence of vintage illustration

Early in my career, a mentor told me that if you wanted to do good commercial work, look at art and the world around you. It was a lesson I never forgot and I bring it to everything we do. So let us first consider art and the world around us.

Sketchy, hand-drawn lines and bright warm primary colors painted in joyful splashes and washes delighted me as a child. One can find examples of this combination across illustrated children’s books and even in many modern art museum’s collections. How might we infuse that sense of child-like delight in our illustrations?

To me there is a wonderful energy contained in line work or brushstrokes that are slightly imperfect, revealing the hand behind the crafting. Visually complex objects like a car or a city block begin to feel more approachable if rendered with gently simplified forms, lines suggestive of a brush, and a generous openness of the canvas.

20th Century writer and psychologist Elias Canetti opined that “cities begin in the mind.” To me this idea suggests that our cities are ever changing collections of concrete, glass, dreams, history and struggles.

We could ask for no better city to begin with than San Francisco. Historically being a space for people to express themselves and endeavor towards a brighter future, our iconic city has a personality all its own.

An illustration from Miroslav Šašek’s book, This is San Francisco showing a street-level view of a a busy city street. Illustration is hand painted in watercolors using bright primary colors.
An illustration from Miroslav Šašek’s book, This is San Francisco

But how does one capture that vivid sense of expression? Here we looked again at art, specifically at children’s book illustrations such as Miroslav Šašek’s This is San Francisco.

Šašek’s compositions are lively and dynamic, showing bustling SF streets. I saw in these compositions a charming possibility in the watercolor forms that are both contained by hand painted lines and allowed to bloom out and merge with one another.

In our illustrations, maintaining the architectural and natural details that make SF unique adds to the sense of expressiveness. To enhance that sense of place, we looked at how we might bring in location details. Landmarks like Sutro Tower, the Chinatown Gate, Lombard Street, and the Painted Ladies help to ground our illustrations in lived experience. Every street we draw is a real location, with real history in the place we call home.

Examples of illustrations using SF characters and locations. On the left is an illustration of a rider getting out of an AV to meet their friend at the Giants stadium. On the right is a rider unlocking their AV outside of the Chinatown Gate in SF.
We use architectural details and locations to create an emotional connection to the cities we serve
Three illustrations of SF characters- On the left is cyclist riding with their helmet in the bike lane. They have a french bulldog in their backpack. A Cruise AV is driving in the lane behind the cyclist. They are sharing the road safely. The middle illustration is a medical professional checking their Cruise app. The right illustration is a couple going out on the town in SF walking away from their Cruise AV.
Examples of our characters — a cyclist with their pup, a medical professional, a couple out on the town

San Francisco’s cultural and physical fabric is given life by its people. Inclusion and representation are guiding principles for us and we wanted to create characters who are reflective of our riders and the broader SF community. We looked at a diverse set of photo references, reflected on the people who make up our neighborhoods,, and worked with our team members across Product and Content to gauge how inclusive the characters felt to them and keep us from unconsciously bringing in biases or relying on stereotypes. We want everyone to see themselves in our characters and settings, and we continue to seek feedback from our colleagues.

Three illustrations- The illustration on the left is of a lawn bowler in Golden Gate Park getting out of their Cruise AV and walking towards the lawn bowling area. The middle illustration shows two riders walking across a crosswalk with a notification appearing on their phone. The right illustration shows two riders inside of a Cruise AV checking their seatbelts to ensure they are buckled up.
Additional examples of our characters — A lawn bowler, riders in GGP, riders checking their seatbelts

Keeping with our approach to a balance of technical precision and the handmade, we chose to draw our compositions in perspective rather than making them flat. This depth allows us to ground the scenes in their environments, adding to the sense of place. Like our AVs the city is always moving and evolving. We want to be true to that alchemy. We dubbed our combination of sculpted cars and drawn characters the “Friendly Line” style. This style allows us to bring warmth and humanity to the illustrations.

Comparison of vintage concept car renderings and an illustrated autonomous car drawn in vector
Concept car renderings help inform our combination of sculpted and drawn elements
Comparison of light and dark UI modes showing an illustration of an autonomous car in inclement weather conditions with Sutro Tower in the background
How the Friendly Line style lives in product as the UI color theme changes

In making the magic of San Francisco come to life, I asked myself what colors come to mind when I think of SF and the bay area? Headlands and Marina, our yellow and green tones, come from the hills of the headlands national park beyond the Golden Gate Bridge and the wide expanse of verdant–at least during the winter months– lawn that edges against the bay itself. Our sense of community continues to shape our approach to everything we craft at Cruise.

This animation of Golden Gate Park uses our colors to highlight the uniqueness of the park
Illustration of how the Friendly Line style can be used in user interfaces within the mobile app. Two illustrations- the illustration on the left is of a rider’s hands holding their phone and pressing the “Get Help” button. The illustration on the right is of a rider’s hands holding their phone as a route over a map displays, an abstract city skyline is visible behind their phone.
When we are being more informative, we can leverage more simplified illustrations
We’re currently exploring how animation can contribute to delight within the product experience

Our “Friendly Line” illustration system can flex to be informative within the product, and exudes delight across all contexts. By focusing on reflecting our riders and the cities they live and work in, we’ve built a robust foundation for future illustrations and animations.

--

--