Luna Design System

Creating consistency and improving efficiency with a robust and cross-functional design system.

Project Overview

The Problem

The Workforce suite was more than ten years old and was not originally designed to be responsive. In addition, due to the acquisition of multiple software platforms, the product lines were not integrated, creating challenges for users when navigating between modules.

My Role

UI Designer, UX Designer

Tools

###

...

Execution

We started by addressing our fundamental styles, which encompassed colors, typography, and other design attributes, in order to establish a cohesive brand identity throughout our product line.

#
#

Next, we set up our basic UI elements to assist in creating a consistent interface. We defined our grids and layouts, spacing, border radius, icons, and other important design elements.

#
#

Following the Atomic Design methodology, we started by creating the fundamental building blocks of our design system.

  • These building blocks include elements such as buttons, labels, form fields, and more.
  • We then used these components to build larger components and design patterns. This approach ensures consistency and reusability across all our products.
#

After building a strong base of Atomic components, we brought these elements together to create molecules, which are simple collections of UI elements that work together as a single entity.

  • This included components like cards, alerts, employee tags, and many others.
#

I used Figma features like auto-layout, variants, and properties to create components that are responsive and customizable.

#

Finally, we combined our atoms and molecules into relatively complex UI components called organisms.

  • These organisms form distinct sections of an interface, such as navigation or our notifications panel.
  • Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used repeatedly.
#

Collaboration

As one of the design system leads, my main focus was collaborating with the engineering team to ensure alignment.

  • With my experience in front-end development and React, I made sure to establish a shared language by using similar nomenclature and component structures.
  • Additionally, I conducted quarterly audits of their Storybook to ensure our libraries were in sync.
#

Documentation

To create a more collaborative environment and ensure everyone has access to the same information, we documented our design system in Zeroheight.

#

© Joe Velez, 2023