Gamalon Design System

An engineering-ready design system for Gamalon products.

process

requirements gathering -> competitive analysis -> round table with engineering -> workflow design -> tool exploration (Sketch, XD, Figma, InVision, Plant.io, etc.) -> component library exploration (Material, Ant, Mailchimp, Polaris, etc.) -> stakeholder meeting -> process documentation -> production

team

Jon Linton, Alan deLespinasse, Ira Ladson, Glynnis Kearney, Matt Tharp

duration

2018 / 1 month

Problem Statement

In 2018, Gamalon launched ambitious plans to build multiple products simultaneously, while also growing the product team within the organization. It therefore became important to come up with a consistent user experience across all of our products, and to provide designers and engineers with efficient workflows to translate this vision into their work.

Outcome

The Gamalon Design System is sits on top of the Ant component library. Gamalon has its own colors, gradients, text styles, and illustrations, and these atoms have been injected into Ant components to make our interfaces and interactions seem distinct to Gamalon. The design system is operationalized using a centralized repository of components and an end-to-end workflow that involves the continuous translation of design into code.

Selected Assets

A selection of assets from the prototyping process are presented here.

[Figure 1] When I arrived at Gamalon, it did not have a design system. One of my first tasks was to create a the atoms of a design system that engineers could use to start building right away.

[Figure 2] A raw Sketch file showing the Ant Design's components, which Gamalon adapted for its own use.

[Figure 3] A prototype showing how we adapted Ant Design's components to the atoms of Gamalon's own design system.