AutomotiveLeadershipCompany News

From a Block of Clay to a City: Designing the Second Iteration of Applied Intuition’s Brand Language

Applied Intuition’s updated brand and website features over 20 completely custom animations. Learn about our process of visualizing the complex and abstract concepts of AV software development.

September 10, 2020 • 6 min read
Website 2520hero

Last year we revealed a new logo and brand for Applied Intuition that were designed to scale up with the core mission of the company. We also debuted a new website with the first iteration of our brand language: bold uses of white space, selective color, and strikingly minimal, clay-like 3D imagery.

Not only has the Applied Intuition brand matured since that launch, but we’ve also significantly expanded our product portfolio and customer base. In short, the story we were telling on our website was lagging behind the reality of our progress.

These two factors were the impetus for launching our new website, which was designed and implemented completely in-house. In this blog, we’ll share our methodical approach to creating a far more informative, vibrant, and richer expression of the Applied Intuition brand and other visual updates that make our new website more robust and dynamic.

Q5x9648f0oebimyovzmitkqwhrg0b Qk54qnb9baor Xe7dxvodbfxqfv P5 Puwvsgwbzbtnkwuza4b7zjwvzmzjcc2 Haxxeyrymndjwmbfq4y Kuv Kwpfvm6n5iyxokhichg

The homepage of Applied Intuition’s new website

Creating a New Car From a Block of Clay

If you’ve spent any time on our website, you probably remember the little blue Applied Intuition car driving around a city block. We began the evolution of our design language with this car because it’s the smallest unit of our brand DNA, meaning that we could use the design decisions we made here to inform every other aspect of our brand and website.

Because of the thick trim around the vehicle base, lug nuts in the tires, and slatted grill, the original Applied Intuition car felt like a relic (similar to the VAZ-2101). While we wanted to retain the overall optimistic nature of its design, the new car also needed to embody the primary shift taking place in the automotive industry: from producing gasoline-powered, human-driven vehicles to electric-powered, software-driven vehicles.

Hjmomgl0balm0otwrer04ztseq Nfghrkrhfbcuz6aukjkciew Nkgaopp8smpi0qcuxuy5uwvv7 Tosndensozmwqk7lyqkwqj Az2smme9 32unzo8w3u08j3 Afgl4ry95h7

Before (left) and after (right). The new car feels like it glides in from an all-electric, software-centric future

With this goal in mind – and taking inspiration from some of the best designed vehicles on the road today – we began to carve out crude shapes from a digital block of clay.

1svuwvl4 Giqfcs Xbfhtivtvwcuvd4teu3upvtzomo1zgkroc6vpg2gbpoklovucqxfe6tknm T1 Glujzu5ie223kinkr2mwsiaj3qetlouxxc42iqeqekkytmnjoojwhkymac

The very first renderings in search of the right vehicle shape

From adjusting rough angles to key lines, we molded and sketched our way into details like headlights and taillights, windows, and doors.

Zezbfeqinzza5w Hmax8lbrmtxs3sszvgr Lot6gtl8nlfurmlyepoyqtjokrvbifikneypbglrg Bus8tjy1zutytctnmexisgd5uzeteenu7t4krz0rkobgxponptu4j45 L05

Rough lines provided guides for details such as doors, windows, and lights

But as we added sleeker, more futuristic details (like the continuous taillight, roof, and windows), the mood of the car became too aggressive. So we rounded both the lights and mirrors and created large, button-esque rims to compensate. These exaggerated, toy-like features ensured the car was futuristic and friendly.

One of the defining attributes–and our favorite detail of the car–is the ridge line that wraps around the rear of the vehicle and falls just below the windows on each side. Both this and the subtle indentation of the hood were inspired by James Turell’s Roden Crater.

Ivhyvppthbehkq2ofswhmej6woudljazrvgcx6szgbtvuv0ulnw7tcx747w7ynojozljrh Jz0od D9m Rz Gqbs Ywbm Gap6dkptrwzqfsljy7ivkt 0chiei4q4coupz8dxu1

The ridge line that wraps around the rear and side of the car was inspired by James Turell’s Roden Crater

Imagining a Factory for Autonomous Vehicle Development

With the car complete, we moved on to creating its surrounding environment. While our previous set of 3D animations communicated the outcome of autonomy by showcasing the car on open roads, we wanted to focus the next narrative on the process of autonomy: software development.

6o6dq9ilfv1oeekxfi9fy R0ok6ryqtohpnwncpzs2s F45yfnhhxqebz3lbgsnj6hv4cqc2omeigtjr8seoiammm6wtsmlnfeonzxz2kfz0kn Xwgrwpaqoqwrn917bqxmkqwfs

Our original animations focused on depicting the outcomes of autonomy, but not the development process

Depicting the complex and abstract ideas of autonomous vehicle software development (like “drive data,” “perception,” “validation,” and “simulation”) in a simple, compelling way is challenging. We’ve seen others rely on visual cliches–like Matrix style 1s and 0s, or software engineers sitting at desks––to communicate these ideas. But we find these approaches both uninspiring and stuck in the uncanny valley.

In search of a fresh form of expression, we turned to the physical manufacturing and assembly of vehicles as the central metaphor for our visualizations. We translated the production lines for chassis, doors, and paint jobs into a factory for creating and assembling the many elements of AV software development.

Ef W78vzqybrof Iyviwtpmwhmr8yslaa4aot5zyt1xhgy2jo 0lavolrqx8vb24x8uofehikvrvbhbkoda13vj0hlje8zwwqr6igvtnjmrradacpozlvbtlxezat33abzjfswvi

Screenshots taken from the Free Documentary’s “The Porsche Manufacturer” video (https://youtu.be/F3FUH9fVC_M)

The factory setting provided a logical framework and ample visual references – like assembly lines and mechanical arms – to successfully convey concepts such as extracting and sorting through data captured from drives and simulations.

Xhhmktsdy6e3ryd8cwub90xutsnz0b7w9 J Txmnckjx Counn60idqlvos Txbjzllmrekvycweor5yh9ltqmuvmw6jvvk Yi Hs9clyjeqqr7wj5 Yr Xpdjr1ojsab7rzwv1y

We used tunnels in the factory floor to create continuity between animations

We pushed the factory concept further by creating imaginary machinery that reflects the digital nature of software, like this cylinder that holographically transfers software onto the car via factory floor...

Ghrgtf7csiovrvywialzqlcgk4 1r1ycztqr36oupko 3laa0esatbrydexte1l5rtsq9jw6oaxdg8v40rsdo Ihk4sfr6wnwvgfwxc8agnifh9y5y41d2lpaccxfmhneqp Djuc

The factory floor continued to have an important role in linking together animations

… or this hydraulic treadmill that hallucinates immersive scenes around the vehicle as a way to communicate the many different use cases of simulation.

Pxlboyz7fmclzpq O7wtqxbucqssdbzest94chupkiqzd8abonmrt4f7z5gmxm Xhzlcw U1ybw0ajefe3lelf48jqnufelpi2pfk7zimhcyjeoueikjqzefyc0rvegv6mfhs4xd

In a series of 5 different animations, the accompanying computer screen also matches

Bringing It All Together in a New City

The last piece of our brand imagery in need of an update was the city block. We went through several, rapid rounds of iterating on the city layout, tweaking the density of buildings and roads in our attempts to identify the optimal looping route for the hero animation on our homepage.

Ppv5xcdpoul5isvfkqfwilazredqndjgjjqpcayaehto0l8zxupw Gmme93om8npo25wdfyyx6cw40 T Vllmbh4lq2gviphpiiqre0anmwksufrg8wd4ctkwa2z8zpmpzpai Zo

The city layout was inspired by downtown areas of Los Angeles and Vancouver

The final city design was the culmination of everything we had put into designing a brand new car and factory: the continuous window and roof of the hero car informed the glass computer screens on the equipment in the factory, which informed the large glass windows of the buildings. And the way the cubes of data were transported underground in the factory animations inspired the transition of the city roads into underground tunnels.

F6qpdtuvuxr Zqx8jewy1 V6omsel9k31mpc3uukenejddeg9 Did0fisgarbnvbd6sixuffaclnqzzucu Wxncwvpf3d 7ehrmd8wuahfiiz Rpoilkyxb Mij5ar0f32x7r01x

The final city design

Building a Stronger Visual Presence

We’ve invested heavily into these animations because they bring an energy level and sense of liveliness into the website that static images simply can’t achieve. The dynamism of the animations led us to creating more interactive elements on the website, like clicking through the different modules on the simulation page.

Mbrlddy50 V1hdt2ls88npjk55drw4pkynkq1l2jidor 6f4m4urjvzxo0bjmo9ikw Xmsneopf6vlh1v4hw3easze2lgji 6oomoxd67hod8rxzat2foknlxc1midm0qxjrzj D

The new website (right) features more interactive elements throughout the site compared to the 2019 version (left)

While a core part of our brand language is rooted in the concept of white, pages in our previous website didn’t have enough contrast to break up extended moments of white space. In this iteration, we changed our headlines to be a larger, bolder, font and introduced a light grey into the palette (made from the dark blue text in the Applied Intuition logo at 3% opacity) for an improved visual hierarchy.

We also leaned into Applied Intuition’s dark blue for the first time as a way to distinguish Applied Intuition’s Professional Services from our products. The rich, dark blue background on the services page is unexpected but still on-brand.

P6wflin4m Zs Wzl0xm1vltkvsnxrn28 Dawk3ctdzslitkj I Qhzoglbq29lxv 9jwzzmldjbadlzchiz 9gikeeftfsxogtr15twvnnymfvbqf Lzao8bizckxabhrqgolv1v

2019 Applied Intuition Services page (left) and 2020 Applied Intuition Professional Services page (right)

Creating Original Design Solutions

At Applied Intuition, we think deeply about the core concepts that drive our design decisions – like Kenya Hara’s book “White” or Kris Sowersby explaining his Signifier typeface – because doing so is the only way to create original work and solve novel problems (also because it’s fun. Look at all those animations!)

Originality is crucial for design at Applied Intuition because developing software for autonomous vehicles is a labyrinth of technical challenges. And you can take it from us: building tools with a great user experience that makes it easier for engineers to develop autonomous vehicle software is far more challenging than designing a website.

If you’re a product designer who resonates with the ethos and creative process covered in this article, check out our careers page – we’re hiring!