Vincent RodriguezDesigner

Context

Nx is the flagship product of the team behind Polygraph, with more than 44 million npm downloads every month. Right after Polygraph, the team brought me back to design the new Nx brand and redesign nx.dev, working with Heidi Grütter, their Product Marketing Lead, as well as the CEO and the co-founders.

Challenge

The brand's main problem was a lack of consistency. With no in-house designer, everyone contributed to the identity, but no one held the source of truth. Each piece reinterpreted the brand in its own way, the website inherited that drift, and it became hard to find a feeling that was unmistakably Nx from one page to the next.

The second difficulty came from the product itself. Nx is a deeply technical tool built for developers, yet it also has to win over CTOs and engineering managers, because its value multiplies inside companies, where it helps teams scale. The brand had to stay credible to engineers while remaining clear to the people who make the decision.

The brand is also split in two. Nx is the open-source part, and therefore free, while Nx Cloud is the paid part and the company's main source of revenue. The line between them had to be clear, so as not to scare off open-source users and to show them plainly when they move into the paid side.

Finally, one of the main goals of the engagement was to make the identity simpler and more approachable. The previous version was intimidating, with highly technical language and aesthetics and long walls of text.

Logo

The goal was not to overturn everything. The blue stays, but it moves to a more saturated shade, bolder and warmer. The logo itself was entirely reworked. Its wave had very little to do with technology and even worked against the product, since a wave suggests chaos more than organisation.

The letters Nx barely stand for anything. They are a leftover of "Narwhal extensions", from the very beginning of the company. So I chose to play with the x and set it as an exponent, to stress the idea of scaling. Nx then reads as "N to the power of x", a project you take on and help grow. Finally, I used rounded shapes to support the friendlier direction the brand was after.

Brand

Since the Nx teams have no in-house designer, I created an online brand book that serves as their source of truth. It gathers everything they need to design their visuals and keep the identity consistent, even without me. I also gave them a custom creation tool, with which they produce on-brand visuals on their own.

The work also covered strategy and positioning, so that users clearly feel the difference between the free and the paid parts of the product. Being free is part of the DNA of open source, and that difference had to be visible at a glance. Every illustration and page about Nx Cloud is therefore set in a light theme, in contrast with the dark theme of the whole Nx open-source ecosystem.

Website

The website crystallised the brand's problems, with too many different colours and a confusing information hierarchy. A large part of the work went into unifying the look of its sections, extending the new identity with cubes and an isometric grid.

Those cubes illustrate the complex concepts Nx sells in simple terms. They are blocks of code that interact with each other according to the concept at hand, from the project graph to caching and the way tasks are distributed in CI. Particular care went into these illustrations, so that every concept is as easy as possible to grasp. I then built the site myself in Framer.

Outcome

The site is now consistent, clear and much easier to navigate. Nx's concepts no longer feel intimidating, and the page now speaks to a far wider audience.