Internship - Product Design

Internship - Product Design

Design system for OmniSynkAI, an ERP startup

Design system components I worked on
Design system components I worked on

Timeline

Spring 2024

Tools

Figma

Lottie

Roles

Product designer

Team

Individual

4 designers/

researchers

4 designers/

researchers

Overview

Design system and product design intern for OmniSynkAI

Created a primitive and semantic variable system

Created a primitive and semantic variable system

Created and updated design system components

Contributed to the web editor feature

Created a primitive and semantic variable system

Created and updated design system components

Contributed to the web editor feature

VARIABLES

I began my internship by creating a primitive and semantic variable system.

Initially

Designers were using different colors for the same use cases

General lack of organization

Variables names were unclear

Designers were using different colors for the same use cases

General lack of organization

Variables names were unclear

Nested structure for the variables I created. There are 3 categories: Elements, Components, and Patterns
Nested structure for the variables I created. There are 3 categories: Elements, Components, and Patterns
Nested structure for the variables I created. There are 3 categories: Elements, Components, and Patterns

Color

Primitive color variables were made of hex color scales, while semantic colors took the primitive tokens and added contextual names. Semantic color tokens were split into universal, component-specific, text, and border colors.

Primitive color variables screen in Figma
Primitive color variables screen in Figma
Semantic color variables screen in Figma
Semantic color variables screen in Figma
Token structure diagram, the #463F4B hex values feeds into the product-700 primitive token, which is then used by the icon-primary and text-secondary colors
Token structure diagram, the #463F4B hex values feeds into the product-700 primitive token, which is then used by the icon-primary and text-secondary colors
All colors in the design system laid out

Size

Primitive size variables comprised of multiples of 4, while semantic tokens were split between corner radius, spacing, and padding.

Primitive size variables screen in Figma
Primitive size variables screen in Figma
Semantic size variables screen in Figma
Semantic size variables screen in Figma

Typography

I used Figma's new typography variables to create a type system (though letter spacing doesn't work quite yet).

Base text style screen in Figma using typography variables
Base text style screen in Figma using typography variables
Semantic Typography variables screen in Figma
Semantic Typography variables screen in Figma
All of the text styles used in the design system

COMPONENTS

Work was done to alight past components with the new variable system. Overall, I made small changes to most components.

Changes

Applied new color and size variables

Applied new type system

Refined auto-layout to ensure

New Components

I added new components when requested by the product design team.

Reflection

My first internship! Yay!

Design System Practices

A large part of my time was spent researching best practices for design systems, and I used Uber Base and Wise's design systems as my main source of inspiration. I also used Designsystems.surf a lot!

Company Culture

Although this internship was remote, I spoke with a lot of others in the company, including fellow designers, researchers, engineers, and managers. I gained lots of communication experience, and also used new software including Zeplin and Confluence within the organization.

© Chris Sanders 2024
© Chris Sanders 2024
© Chris Sanders 2024
© Chris Sanders 2024