How Intercom brought the surreal, shape-shifting brand identity of Pioneer to life
“If a typical brand is a world with a color palette, type system, and art direction, Intercom’s brand is a universe,” says Intercom Head of Global Creative Studio Scott Smith . Working like an in-house agency, Intercom Creative Studio (ICS) approaches every project by asking: “How do we create the most impactful, visually stunning, exceptionally designed execution that meets the ask?” This has led ICS to build and maintain design systems not just for Intercom and its AI customer service agent Fin, but also subsystems for various campaigns, product releases, websites, and events. All of this lives in Figma, what Scott calls the “nucleus” for a 30-person team dispersed across several countries.
Their latest challenge has been creating the brand and visual identity for Pioneer, the second annual summit on customer service and AI that took place in New York City last month. The brand system would need to translate across motion and static assets for the website and digital campaigns, as well as span the event itself, including stage design, digital screens, wayfinding elements, and merch. In 2024, the visual identity hinged on the idea of a periscope, with some elements falling out of focus as customer service leaders looked to the future of AI. Needless to say, a lot’s changed in a year. Here’s how the team built a brand that feels distinct and reflects how we use AI tools today.
Carving out creative territories
In response to the brief, the team created mood boards in Figma Design to feel out a broad range of creative territories, pulling in motion assets, still images, vector files, and other logos. “It was an exercise in going really wide in terms of concepts and visuals to form distinct territories, and even within territories there were multiple routes for expression,” says ICS Associate Creative Director Daniel Surgeon .
Being in Figma allowed motion designers, brand designers, and copywriters to collaborate and riff on each other’s work. “Sometimes we edited images to get the colors working well together, or we drew on top of images and collaged them to try out an idea,” says ICS Staff Brand Designer Claire W. . Being able to embed videos helped the team bake motion principles into the brand identity much earlier in the process. “If we loved the way a reference moved, we would toss a logo sketch or some messaging over it to see how it could start to function as an actual communication piece,” says Daniel.
The process led them to the idea of an AI superbloom. “At last year’s event, we planted the seeds, and now we’re coming back to see how those seeds have blossomed and birthed new ideas,” explains Scott. This led them to develop a flower motif and a stippled visual style that nods to pollen particles—speaker portraits, for example, are rendered in a colorful dot-matrix effect.
When it came to presenting the territories to other stakeholders, the team dropped introductory frames with the written concept over long art boards for collaborators to scroll through. “It showcased the work in a fresh, dynamic way, and our partners were able to interact with the content and drop comments directly on each board rather than clicking through slides,” says Daniel. As they went through rounds of feedback, these art boards grew higher in fidelity, evolving into case studies. “We could set up distinct pages for each round of reviews, so Figma was super helpful as an organizational tool, too,” says ICS Staff Brand Designer Justin Truong .
Bringing ideas into motion
Bringing any idea out of abstraction is a gradual process of sharpening and refining—for ICS, the pollination idea snapped into focus with a series of 3D flower renders. “We were excited by these flowers blooming in an alien way, using scale or speed to make them feel otherworldly,” says Daniel. “There was a nice parallel between that concept and what’s happening in AI right now.” At the same time, the team was pushing on the superbloom idea, which led them to lean into the visual language of pollen. “We went all in on particles to separate from hyperrealism,” says Daniel, using it to develop the Pioneer logo treatment and other static images.
ICS partnered with the interdisciplinary studio COLORS AND THE KIDS to explore different flower types and ways to animate them. “We dialed in the density of the pollen and how they would move to create a rich look and feel,” says Daniel. “They could be exciting and dynamic in motion, but also be quite restrained and work well in print pieces as well.” Throughout the process, ICS used Figma Draw to mark up each iteration. “We would grab different frames of the video and draw what the motion needed to be, or how the shape of a pedal needed to change,” says Claire. “It was really helpful to not have to bring the work into a different program.”
Prototyping the web experience
It was also “hugely beneficial,” says Claire, to design, prototype, and QA the Pioneer website in Figma instead of having to toggle to different platforms. “Even the smallest feature—the ability to live comment—has been a real game-changer for the team,” agrees Justin. “I can talk to Claire as she’s making tweaks instead of sending a Slack message.”
In particular, prototyping was a useful way for the team to explain ideas to developers, motion designers, or other stakeholders. One of the original concepts for the website was for it to be one long poster, punctuated by sticky or floating elements. “It was a show-don’t-tell mechanism to show stakeholders how something would feel,” says Claire. They prototyped a sticky navigation, scroll behaviors, and hover states. “When we were working with the developer, we could work out the timing of an interaction,” she continues.
“The Pioneer brand is really colorful this year, so we would prototype a color-changing background to make the designs feel more dynamic as we’re presenting them,” says Justin. Now, when you refresh the page, it cycles through a vivid palette that contrasts earth-inspired tones with others that are more unnatural and electric—an experience that the team unlocked through setting up components in the web system. Justin also vibe-coded an interactive footer with a pollen-inspired Pioneer logo whose particles scatter when you mouse over them. “We could take a video recording of that and bake it into our Figma prototype to make everything come to life,” he says.
****
Like what you see? Sign up to get special editions of The Long & Short of It delivered straight to your inbox.
Pastels and slab serifs? Again?
…that’s it?
Very beautiful motion! Making a cohesive system, that can still be used in dynamic ways can be difficult, but this was a very insightful article to read. Appreciate it!