The Pascal Heynol
Published in

The Pascal Heynol

Unifying Products to a Suite through a shared Design System

Signavio — 2019

tl;dr
Analyzing the state of internal requirements and designing a system of reusable styles, components, and patterns. Set up the new Glucose design system for continuous development, speeding up development, and advancing UI consistency.

Role: Product Design Lead, Design System

Challenge

Signavio is considered the leading provider of process management software for businesses large and small. When they approached me, they had a collection of individually successful and growing products, ranging from process modeling over task management to process mining. each product was technically Strong come out but the user interface and interaction flowers made it clear that they do organic, with changing designers and no clear sense of visual identity.

Building on my experience of creating design systems for Mister Spex and Consorsbank, I set out to help them define a unified visual and interracial language to turn their individual products into a suite.

Approach

Each of the products is big and complicated in its own right, but together they make for a massive project. Each is specifically tailored to the needs of their customers, and so it was crucial to understand the exact requirements to find common ground between them. Plus, make it work for it the teams building the products. For that, I divided the project into three stages:

  1. Learn: Assimilate into the culture, take part in day-to-day product development, and learn about the people, products, and processes.
  2. Build: Define the core parts of the UI and establish a method for building components.
  3. Refine: Handover the work to the quarter designers and developers in the company and establish a sustainable process for future development.

Learn

Key to creating a design system for Signavio that has value for both, the customer and the company, was to understand the three P: Products, People, and Processes. I started out with finding an agreed-upon vision for the system to create a shared understanding, sense of ownership, and urgency among me, management, and stakeholders. Then, I focused on talking to people to learn more about their needs, observed working procedures, and got acquainted with the software.

Initial research and synchronizing stakeholders

With the future outlook and plan in place, it was time to understand the real issue at hand. I conducted a thorough UI inventory, taking apart the products into patterns, components, and styles. This greatly visualized the problem and would serve as a starting point for defining new rules going forward.

UI inventory and analysis

Build

With all prerequisites in place, I could then start working on the design system. Based on my research I could define an information architecture that serves the needs of the organization and supports people in their daily work with the system. Based on the system- and page-level structure I defined templates that would make it easy for others to extend the system going forward.

Information architecture as templates on system- and page-level

Next, I could define a new set of base styles that would serve as the foundation for the rest of the system. Things like color, typography, shapes, shadows, icons, and so on. All other components and patterns would be made up of and inherit these styles through so-called design tokens.

In a collaborative branding workshop, we also defined a brand and early visual identity for the system. This allowed us to position the system as an actual product among the others in the organization and made it easier to spread the word throughout departments. Internal excitement was heating up for Glucose.

Branding the design system and defining base styles

Following the core styles, I went on to define simple components, working my way from the most frequently used forward. Each component underwent iterations and reviews to finally arrive at a thorough definition including the core component and variations, specs, interaction behavior, and usage guidelines.

Reworking buttons and icon buttons for the system

Refine

Eventually, we were able to cover 2/3 of all components and patterns throughout the expansive products. Since I was hired as a contractor for a limited time, the goal never was to cover everything. It was to kickstart a larger initiative and a movement through the company, establishing Glucose as a real product and ensuring it’s development for months and years to come. This was the only way we could keep the system from drifting into oblivion after my departure, as it is so often the case with design system initiatives.

Through a number of workshops with management and stakeholders from design, development, and product management, we were able to come up with an agreed-upon strategy for keeping the initiative alive and growing.

  • Principles: A set of design principles serves as a guidepost and checklist for all departments to ensure what we build stays true to our values and process
  • Governance: Clearly defined responsibilities and roles around the new product ensure continuous development and priority among other products.
  • Maintenance: A publicly communicated maintenance process lets everyone in the organization know when and how they can get involved.

Impact

Together with the amazing team at Signavio, we were able to build the basis of a flexible and modern design system serving the diverse needs of the Signavio product suite. More importantly, however, we managed to establish Glucose as an internal product serving the suite and secured continuous development and support from management.

Glucose is already speeding up designers' and developers' work alike and is on the best way to fully cover all UI components and interaction patterns in the near future. It will play a critical part in bringing all Signavio products together as a suite.

Personally, I celebrate the tireless heroes at Signavio fighting for making this a reality! You rock!

Thank you for reading! Now go back to all cases or simply reach out!

More to explore

--

--

--

Senior Strategic Designer, Consultant

Recommended from Medium

Inspired by Soviet buildings and books: behind the scenes of Readymag’s new architectural editorial

Measuring Density: The History of Urban Form, Lecture 02

Pandemic —A silver lining for designers.

The ultimate guide to mobile projects in Readymag

Telling the stories behind N26

House Construction in Zambia

Terminal Member Spotlight: Riley Donelson

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pascal Heynol

Pascal Heynol

Designer, writer, researcher, engineer — computational product person. Loves art, paints all too rarely. Tries to talk to computers, but they just never listen…

More from Medium

What is a design system?

Interaction Design: 5 Components

Introducing Grida Embeddings - Figma designs made alive. (with production-ready code)

Solution for creating portfolios faster turned to company wide design system implementation