Design System

Alchemy

My Roles

Design System Designer, Product Designer

Tools Used

Figma, Miro

year

2023

The Problem

Alchemy a new internal team member product at Neudesic, needed a customized design system that was scalable and easily managed.

The Solution

A clean & clear visual design language. The ability for designers and developers move quickly. Components that create the optimal experience for users that meets branding & business unit approval.

Approach & Planning

Principles | How to Start | Resources

TL;DR
Defined the guiding principles of the design system. We started simple with the intention of growing with the product. Brought in design system resources we knew well such as Carbon, Material, and Designership.

Principles

Clean, Clear, & Accessible

  • Because this design system supports a team member related product it has to be easy and clear to use.
  • We knew from the start that accessibility was important to us, and we wanted to meet the highest standard possible.

Inviting & Delightful

  • User need to be delighted to use this product the first time and need to be equally excited to come back again.

Easy to Iterate and Implement

  • The design and implementation needs to be easy to for the design team and developers.

How To Start

Defined Roles & Processes

  • Defined who is involved in the design system from both a designer and developer.
  • Planned processes for implementing new elements and how to make adjustments.

Frameworks

  • What UI frameworks are being used? In our case it was Flutter with the intention of moving to React.
  • Where is data being stored and moved?
  • How are we managing work?

Access & Technical Needs

  • Created Figma files and a Github repo for all who needed it.

Existing Resources

Bringing in Existing Elements

  • We brought in existing patterns, components, and documentation we liked such as, Material, IBM Carbon, & the Designership.

Building on Previous Knowledge

  • We also made a point to lean on previous knowledge the team had.

Visual Design Language

Foundations | Common Components| Custom Components

TL;DR
Singular design (color, font, icons, etc.) elements where defined in tandem with initial designs. Common components were created, custom components were added as needed.

Foundations
‍

Brand Colors made into Tokens

  • Take the main branding colors and create complimentary colors to use on them.
  • Included background & surface colors.
  • Color contrasts were made to be as accesible as possible.

Typography

  • Designed for maximum flexibility and includes more than needed. This was done with the intention of removing later.
  • Users search for products based on number of performers, length, pedagogy, and word of mouth

Layout Grids

  • Customized grid with fixed side nav bar was created
  • Made to accommodate the smallest plausible mobile screen.

Icons

  • To icon components were used, a 283 library component used for iterating and a more focused that is used for development.
Long green arrow that slides in from the left.

Simple Components

Buttons, Input Fields, Toggles, etc.

  • In tandem with the designs, we created basic molecules and organisms we know would be needed in an application like Alchemy.
  • This was all of the simple things like, buttons, alerts, toggles, and input fields

Complex Components

Modals, Accordions, & Product Specific

  • Once designs were more developed and validated, more complex components were added to the design system.
  • This included components with a lot of other nested components, and product specific elements.

Processes in Practice

Connecting Code | Adding from Design to Dev

TL;DR
Design tokens are continually updated in both Figma and code base and components are connected to components in Github. The process of integrating into a design system is smoothed.

Connecting to Code

  • Connecting foundations and components to code
  • Connecting to Github repo.

From Design to Dev

  • New addition is introduced to team
  • Design is iterated on
  • Reviewed by team
  • Implemented into Figma File
  • Implemented into Github Repo
  • Pushed in next release

Let's Work Together!

Thank you! Your submission has been received and I will be in touch in the next day or so!
Oops! Something went wrong while submitting the form.
Joe Millea
Product Designer
joe.millea@gmail.com
763.607.7880