unicorn design system

unicorn design system

unicorn design system

unicorn design system

Unicorn is a group of companies providing information systems and creating 100+ different products.

Story

Despite its 30 years of existence, Unicorn has never had a design system and a single visual language to follow. So the team and I designed a robust design system that can work across all products.

Role

Lead UX/UI Designer

Design System Manager

Client

Unicorn

Challenge

Unicorn develops over a hundred products and the design of the system has to be versatile enough to be used by any of them, whether it's an app for a school or an app for managing the flow of electricity across the Channel.

The brief was clear, to create a design system that creates a clear visual language that everyone can understand while establishing rules that are used across all teams and applications. It is also necessary to think that apps can be used from smartphones to TV and can support all kinds of backgrounds.

Solution

Created a sustainable design system with 100+ components, 60+ conventions, and a variety of palettes.

One of the most challenging aspects was figuring out how to break down this system for long-term scalability and maintainability. After much thought, we decided to partition it into palettes, elements, components, and conventions.

What are the palettes?

Palettes contained the most elementary things like spacings, sizings, and border radii but also motion values.

Palettes are crucial for keeping things consistent in our system, covering colors, sizes, and spacing. We've broken down sizes into different levels like spot, box, inline, and area, so they work well in various situations. The same idea applies to spacing, which can be fixed, inline, relative, or adaptive, adjusting to the screen size.

Ele... what?

Within the elements, we've documented everything from typography and custom iconography to graphics, but most notably, we've put a strong emphasis on shapes.

Our color tokens, which we've dubbed "Shapes" in our visual language, consist of pre-defined color styles for backgrounds, foregrounds, borders, and effects. These are meticulously organized into standardized use-cases, covering categories like Interactive elements, Interactive items, Form elements, and more.

And finally ... components!

We've designed a diverse repertoire of over 200 unique components, strategically organized into distinct categories: Essentials, Segments, Wrappers, and Dedicated offerings.

Each component comes complete with its own dedicated documentation, tailored for smooth developer handoff. This documentation follows a consistently structured format, featuring essential details, classification, decomposition, behavior, viewport specifications, and comprehensive overviews.

Rule + Order = Convention

We've written over 60 conventions, empowering developers, designers, and managers to seamlessly craft functional user experiences, all without the necessity of a dedicated designer.

The conventions are thoughtfully categorized, mirroring the structure of our comprehensive design system. These categories encompass Content, Interaction, Navigation, Editing, Layout, Forms, Onboarding, and UX patterns.

Let’s draw

rectangles together.

me@guycalledkarel.com

© 2023 Karel Balej

Let’s draw

rectangles together.

© 2023 Karel Balej

me@guycalledkarel.com