Background

LangChain itself, is the AI-first toolkit that developers love, allowing them building with GenAI. The platform offers as well two other products - LangSmith and LangServe. We’ve had the pleasure to conceive a new fully thought-out website and with branding that will give the brand more character, thus making it even more recognizable.

Hero Image

Hero Image

Challenges

The previous website contained an unusually high amount of repetitive content and user flows. The biggest challenge became eliminating the superfluous in order to create new, intuitive calls and naming that would be tailored to developers familiar with the terminology and new potential users. Langchain at the time had 100k+ users, so it was important to customize the entire site in such a way that users didn't have to learn how to navigate the site completely from scratch.

Project execution process

Branding and Website Development

We began the process by creating a fresh and thoughtful visual identity that creates a system for several products. We went for something organic - while the brand is clearly techy, the colors and shapes are rooted in nature, as is LangChain's stochastic parrot. We focused on slightly off-kilter colors, thus not using black or white.The leitmotif became lines, which I used by matching them individually to each product - LangChain, LangSmith, LangServe.

In parallel, work on the website continued, starting with the creation of new navigation, user flows and structure. After moving into the design phase, I decided to use macro typography, which harmonized with the organic linear theme present in the form of animations and dividers on the site. Thanks to all the treatments and the new visual identity, we got a clear, minimalist layout that doesn't overwhelm, attracts the user's attention and, above all, makes it intuitive and effortless to find what we really need.

With the platform growing, we designed and built a site with scalability in mind. Leveraging Webflow Enterprise allows the LangChain team to easily manage the content while not having to worry about the insane amount of traffic the site gets.

Before and After Page Redesign

Before and After Page Redesign

Structure for the website

Structure for the website

Agents Page

Agents Page

Components

Components