OVERVIEW

2018 the GEMA approached me with the request to create a lightweight design system for digital applications. This means a system that has just enough components for the current needs. The purpose? Ensuring consistency in the visual design and helping designers achieve great design solution faster.

CHALLENGE

The only design files the GEMA could share with me were Sketch files of the look and feel of the re-designed corporate site. No guidelines or style guides, nothing but different digital products with more or less different designs. The challenge was to identify similarities, preserve them as far as possible, and develop a consistent design language for all future applications.

GOALS

  • Design components for all platforms assuring consistency
  • Set and explain guidelines

TOOLS

  • Figma
  • Sketch

ROLE

  • User Interface Design
  • Corporate Design


PROCESS

By analyzing the products and components it turned out that the pain point was the lack of a strong foundation — the ‘atoms’. So I started the process  dealing with Brad Frost’s Atomic Design methodology and established design systems such as IBMs Carbon System.

I organized the style guide in the atoms: typographic system, icon library, colour palette, card + shadow styles and grids.

Then I moved on to set up the molecules of the system. Examples of components included input fields, buttons, and drop-downs. The next step was to bring atoms and molecules together:

BILD

LEARNINGS

  • A design system is a living system that keeps on growing
  • It takes a village to raise a successful design system