Led design and rollout of a multi-platform design system that enabled a brand refresh reaching over 25M+ weekly users. Resulted in a cohesive visual experience and full adoption of design system foundations: tokens, icons, and core components.

cover image.png

DeepL’s AI language products faced a fragmented visual experience across devices and platforms. The products, together with the company, grew rapidly without a design system to support the growth.

We had successfully built credibility and trust with our users by providing a product built on quality, reliability, privacy and security, as well as great customer service.

As our enterprise customer base expanded, however, it became clear from the feedback we were receiving that the inconsistent user experience threatened this established trust.

Enterprise users are particularly sensitive to visual inconsistencies, which can signal potential security and reliability issues in web-based products and services.

*Why digital trust truly matters, September 12, 2022

Platforms in question: Web, Desktop (macOS and Windows), mobile (iOS and Android), and various integrations including productivity suites (Google Workspace, Microsoft 365) and browser extensions (Chrome, Firefox, Edge).

Task

Unify the product experience by leveraging the design system, following brand guidelines and collaborating with product teams on its full adoption.

My role

  1. Product design (design system)
  2. Facilitating design system adoption and supporting product teams
  3. Planning and coordinating the rollout across different platforms

Approach

Previous efforts to keep the visual experience cohesive across platforms happened vernacularly and failed short, both in design and implementation. There was very low adoption of the existing design system which manifested as custom styles and components all over the codebase.

We discussed the previous challenges with maintaining consistency with every team and discovered several issues that caused it: