Atomic Systems and Data Visualization

Product

Figma design system and documentation

Team

5-10 Cross functional designer

A burst of post-merger innovation led to the creation of Axiom, an atomic design system designed to create unity through a common language. 

In the process, cross-functional designers represented their product needs across the research continuum . With inputs for brand, a high level mission statement and core values designers discussed, researched, iterated, compared, and created. What emerged was a foundational system. A system of flexible Figma and React components to use as building blocks for the work to come. 

System Parts

  • Principles

    Design principles are derived from the companies core values. Principles should be reflected in every area of the design and visual mood of the user interface.

  • Voice + Tone

    Voice and tone guide writers and designers with specific examples of how and how not to apply principles in practice.

  • Color

    Color guidelines included various palettes, tones. Typography features styles and example strings.

  • Formatting

    Design principles are derived from the companies core values. Principles should be reflected in every area of the design and visual mood of the user interface.

  • Atoms

    the smallest, fundamental components of a user interface, such as buttons, input fields, and icons

  • Molecules

    the smallest, fundamental components of a user interface, such as buttons, input fields, and icons

  • Organisms

    relatively complex, distinct UI components composed of groups of molecules and/or atoms

  • Templates

    Page-level wireframes that define the content structure and layout of a page by arranging organisms, molecules, and atoms into a concrete structure without final content

Data Visualization Library

As the designer representing analytics I took lead on creating a flexible set of chart and dashboard assets. These charts are flexible and able to support categorical and numerical data.