Sierra

Launching in early 2024, Sierra is on a global mission to empower organisations, revolutionising customer engagement and catalysing unprecedented growth through AI-first products. Led by Bret Taylor, board chair at Open AI, co-creator of Google Maps and ex-CEO of Salesforce, and Clay Bavor, former vice president of Google Labs, the company believes AI agents to be the next technological frontier — similar to websites or cloud technology in the past.

“The challenge we gave to BB was: how do we communicate about this new, delightful way of interacting with consumers, while also expressing the power of conversational AI for sophisticated enterprises? BB nailed it”.

Sierra’s flagship product, a conversational AI agent, combines the specific knowledge of an organisation with the broad capabilities of today’s AI models, enabling consumers to not only access information but find solutions to their problems. Embarking on the journey to introduce Sierra and its groundbreaking AI, we worked with the team to establish a conceptual framing and creative strategy with which to talk about the company and its products, surfacing Sierra’s values and unique approach. In tandem, we created a website that seamlessly communicates the nuances of the conversational AI product, the revolutionary platform powering it, and its underlying technology.

Built to scale

Our design approach prioritised modularity and minimalism, already anticipating Sierra’s rapid growth. The website features diverse and flexible components ready to adapt to evolving content needs; this responsive design system allows Sierra to construct pages that support various storytelling methods going forward. The dynamic result means the site can evolve with the ever-changing digital landscape, user expectations and technological advancements.

We took a modern and minimalistic visual approach, reflecting Sierra’s own commitment to transparency and openness. Leveraging white space and a succinct presentation of the product, the website conveys confidence in the offering, eschewing unnecessary details or flashy marketing for a user-centric experience. This approach built upon the existing brand guidelines that we further expanded for the web.

An immersive introduction

Given Sierra’s innovative nature and novel product, it was crucial that we be able to quickly convey the essence of Sierra’s offering to its customers. Central to this was first distinguishing between two separate audiences: the customers who will purchase Sierra’s product for use in their own operations, as well as end-users of this service. The need to effectively communicate with two distinct audiences is common to many SaaS ventures, and a task that BB has successfully tackled on many occasions.

To address this need, we developed three film scenarios that showcase the product in action and illuminate the behind-the-scenes activities of Sierra’s product. Through carefully scripted narratives, we depicted diverse use cases, emphasising critical aspects of the product, such as its round-the-clock availability, capacity for empathetic support and advanced problem-solving capabilities.

By shooting relatable scenarios that feature people interacting with an AI agent, we not only highlighted Sierra’s key attributes, but also infused a human touch into its brand narrative. In addition to capturing original footage, we crafted accompanying conversations, shown as a UI layer, to provide contextual insight into Sierra’s capabilities. These films, presented as short loops in the header component of the home page, continuously cycle through, creating an immersive introductory experience for visitors.

In addition to the scenarios in the hero module, we recognised the need for communication that was more focused on providing clear and concise explanations of the product’s features.

Product graphics and contextual colour palette

In addition to the film scenarios in the hero module, we focused on providing clear and concise explanations of the product’s features. To do this, we strategically employed product graphics — simple diagrams that distil complex concepts into easily digestible visual elements. Some graphics served as symbolic representations of abstract ideas that are often challenging to visualise, while others simplified interactions and processes familiar to users. To support less tangible concepts, we introduced motion to selected graphics, leveraging animation to further aid understanding. This dynamic element helps demystify abstract notions and ensures a more engaging user experience.

The colour system, grounded in a neutral palette, avoids overly vibrant or distracting colours for an uncluttered visual experience. Across the site, we used a spectrum of tones as background colours, with each shade corresponding to the type of information represented. Lighter hues are used on elements focused on end-users, while darker tones represent content related to the underlying technology. This systematic approach helps visitors navigate the site intuitively via the contextual interplay of colours.

The combination of visual simplicity, strategic colour accents, and animated elements collectively transform Sierra’s often complex product features into accessible and compelling graphics. These visuals, strategically placed across the website, form a vital component of Sierra’s digital storytelling, providing visitors with an immediate and intuitive grasp of the product's capabilities and intricacies.

Tech Stack

• React
• Next.js
• Tailwindcss
• Framer Motion
• React Aria Components
• Rive
• Sanity
• Cloudflare

Credits

• Ilaria Orsini (photographer+director / live-action footage+photos)
• Francesco Cantoro (dop+editor / live-action footage)
• Courage (production / live-action footage)
• Carlos Chavarría (customer portraits)
• Kait Miller (customer portraits)
• Ben Barry (visual identity)
• Nicolas Vittori (logo animation)
• Robin Barnes (CGI)