nebenan.de Design System

At nebenan.de, I initiated, led and coordinated the multi-platform design system efforts that moved the company from 3 different Sketch-based UI languages to a unified, consistent and accessible cross-platform product design experience anchored in a modular set of Figma components and a clearly documented pattern library.

Read on
2022-2024
product design
design system
ux
ui
David Swales UI DESIGNER
Florie Salnot PRODUCT DESIGNER
Leticia Bialoskorski PRODUCT DESIGNER

Note: this page is an excerpt of a more detailed case study, available upon request

The Brand Dial

Part of a comprehensive Brand + Product Redesign project, a key requirement for the design system is to be intentional about brand expressiveness. In the initial introduction of the brand to a new visitor, whether it my be a landing page, a digital ad or a printed flyer, the brand should communicate confidently, clearly and optimistically to capture attention. The further the user travels down the signup path, the more the brand goes out of the way to make place for a frictionless user experience: clean, clear, light and consistent. The Bran Dial embodies this ability to increase and decrease brand 'intensity' as required.

Consistency

The nebenan.de platform can be experienced on multiple devices and platforms: there is an iOS app, an Android app, and a website available on mobile as well as desktop screen sizes. The design system ensures a consistent cross-platform brand experience using the same base, and adapting for platform-specific UI where needed.

Documentation

Through comprehensive guidelines, components, patterns, and best practices, the Design System actually comes to life and can be used. For every atom and component, an anatomy breakdown has been created, as well as usage guidelines and possible variants and properties.