Skip to content

Design System

Posted on:November 14, 2023

Figma file with type and layout systems.

Table of contents

Open Table of contents

Overview

Summary

Roles

Background

When I first joined Altum, I quickly learned that the “design system” was a bare bones color palette.

Old design system cluttered with unrelated components.

A screenshot of the old “design system”. The only part of it in use when I first joined was the color palette.

Goals

I believed that starting a design system would result in faster launch time by way of less time spent designing while providing a more consistent visual branding across the experience/platform.

Process

The steps of Altum’s design process are:

A graphic showing a loop around Define and Ideate. Test and Observe aren't looped.

The Altum design process.

Define

I began by researching what exactly a design system is and the minimum I needed to make to get it going.

Ideate

Before I left Altum, I finished three fundamental aspects.

Closeup of the type system in Figma.

A type system on an 8 point grid with a 4 point baseline.

Closeup of the layout system in Figma.

A layout system using a combination of a modular grid and baseline grid.

Conceptual card model sheet with inspirations and rough mockups.

A rough draft of a conceptual model that provided a common metaphor to use during discussions.

Test

Testing saw me incorporating the design system’s new additions into my workflow. I also self-gauged using my designer’s intuition to check the feel of using the design system.

Observe

Overall the design system foundation I created for Jenni was a start in the right direction:

Reflection

Learning to create a design system was a challenging yet rewarding endeavor that showed me how difficult it can be to create a set of standards for a product’s visual design.

Next steps

My next move with growing the design system would have been to: