Primer — Part One

How do you design an identity for a company that’s always changing?

The Problem

When Primer came to us, they had a name but no visual identity. We were tasked with creating a unique and dynamic style to complement their refined, high-tech, machine learning brand.

In our landscape analysis, we found their competitors were literal and simplistic in their visual interpretation of AI, relying on static abstract nodes to show data. Our approach was different; we’d use our data points to create concrete shapes and textures to show how Primer’s analysts turn abstractions into concrete ideas, weaving disconnected data into real narratives. Simultaneously, those conceptual visuals would be dynamic. The landscape that Primer analyzes is constantly changing, so a brand of stoic, static imagery would never do it justice.

Guiding Principle

A dynamic company isn’t properly represented by static branding.

The Process

Design a living logo

The core of machine learning is constant change. Primer’s technology is continually learning for itself, just as a living, breathing human analyst does; updates and changes happen in front of a user’s eyes. With that in mind, we knew machine learning couldn’t be represented by a static logo—Primer needed an animated mark.

The logo we landed on mimics the behavior of Primer’s synthetic analysts, connecting seemingly disparate data points to form concrete objects. It transitions from one dimension to three, starting as a single point, becoming a line, plane, and finally a concrete shape—the same way Primer’s technology starts with isolated data points, connects them to form a web of ideas, and outputs a fully-shaped narrative.

Tell Primer’s product story with motion

Our next challenge was to communicate how Primer works. Rather than asking users to invest long periods of time in reading copy, we opted to show instead of tell. The homepage animation we built for Primer simulates sample data analyzation, showing how a machine reads a disparate dataset and transmutes it into a coherent, condensed, singular narrative. The animation makes sense of a complicated process with 20 seconds of thoughtful motion graphics.

This animation started as a prototype we created in After Effects to show our concept to Primer’s team. Once we landed on a concrete idea, we built the multi-timeline animation—a precise synchronization of the scrolling text on the right and the narrative generation on the left.

The homepage animation is powered by GreenSock with SplitText, plugins that allowed us to animate the text letter by letter to simulate typing. We also built the animation in such a way that Primer’s team could update and add new content whenever they wanted, an important requirement that empowers them to own their site content ongoing.

Making the empirical ethereal

We carried the ambient motion theme throughout Primer’s website, developing custom hero animations on several subpages. We wanted the website to feel like it was moving and working in real time, but concurrently needed these animations to enhance the UX, not distract from it.

We landed on subtle, abstract mesh textiles formed by webs of non-linear data sets. Single featured data points highlight the complexly woven, intricate nets of data that Primer’s technology sifts through to shape concrete stories.

Building these animations required a lot of exploration and learning; initially we didn’t know if this idea was possible. It helped that Andy, our lead developer, has a background in 3D; he used three.js to composite the landscape and textures and add in delicate motion, while the animated data points display with CSS.