DeepL, biblioteca de ilustrações e modelos para redes sociais

O Creative Studio do DeepL produz elementos visuais para produtos, marketing e uso interno, todos baseados em uma linguagem de ilustração vetorial isométrica com diretrizes da Pentagram. A equipe precisava de uma única fonte bem organizada para esses ativos, em vez de um conjunto disperso de arquivos.

Meu papel

Designer de identidade visual na DeepL, responsável por criar e manter a biblioteca compartilhada do Figma do Creative Studio para ilustrações, elementos de interface de usuário (UI) e recursos para redes sociais.

Equipe

DeepL brand design: Pentagram and Ana Rodrigues

O projeto

O objetivo era criar e gerenciar uma biblioteca de ativos visuais que melhorasse a consistência e facilitasse o trabalho da equipe interna de design. Para usar os ativos da marca, ilustrações ou modelos de redes sociais, a equipe tinha de procurar arquivos por todo o Figma, o que às vezes levava a inconsistências. Já existia uma biblioteca, mas apenas com componentes básicos e um guia de estilos. Minha tarefa era expandir essa biblioteca para incluir os ativos usados diariamente e organizá-la de modo que a equipe pudesse acessá-los facilmente. A linguagem de ilustração vetorial isométrica da DeepL, com as diretrizes da Pentagram, já estava estabelecida, mas cada nova ilustração ficava em seu próprio arquivo separado, em vez de em um sistema compartilhado.

A solução

Curated, not mirrored

DeepL has several products: Translator, Voice, document translation, and others. Each is owned by a different team. They share a product design system at the atom and organism level, but the final app views and UX flows are handled separately by each team.

I built a UI library holding those final interfaces, collecting only the screens actually used to promote a product or feature. The Translator main screen earns its place. Settings, login, and error screens do not.


Marketing work also constantly reuses pieces of the UI, a button or a dropdown blown up to emphasise an option. I added those as standalone elements with a heavily simplified variants panel, in some cases rebuilding the component down to the marketing essentials, so the whole team reaches for the same element instead of rebuilding their own.

Organised by feature, not by component

Most libraries file components by type: all buttons here, all modals there. Inside the UI page I did the opposite, with sections named after DeepL features. Base components, Translator, document translation, voice translation, and so on. Every button, dropdown, and modal belonging to a part of the product sits together, named after that feature, because that is how the team thinks when they open the file.

The solution

Illustrations built to assemble
The isometric illustrations are structured in three tiers. Heroes carry a complex idea and are used on landing pages, the website, and emails. Snippets work like heroes but are simpler, with fewer elements, so they fit smaller designs. Diagrams are informative illustrations that clarify a process. Alongside the tiers, the library holds isolated illustrative elements: cubes, toggles, mugs, arcades. Together, the tiers and the illustration components let someone who is not an illustrator assemble something on-brand from parts, rather than commissioning a new drawing.

Non-adoption is a design problem, not a compliance problem
The whole team could propose additions. I decided what to implement, how, and when to publish. In practice a designer would tag me on a UI they had adapted from product into marketing language. If it already existed in the system, I would find out why they had not used it, because that almost always meant something was unclear or hard to find. If it did not exist, I would build it, connect it to the styleguide, and publish the update to our channels.

Results

  • Turnaround from days to hours

  • Illustration set grew from a handful to 200+ assets

  • Adoption spread past the Creative Studio to marketing content designers