Seeds

– A living design system for Plunk®

About

Seeds is the result of a multi-month dive into building a living and breathing design system for Plunk®.

I was tasked with designing, building and maintaining the system.

Deliverables

Design System

Style System

2020 – 2023

Intro

(a.)
While Plunk shifted it’s target audience, current product, design and developer methodologies were blocking the quick progress needed to launch Plunk Pro™ to market.

(b.)
Ideating and proposing new products or ideas was too slow. On top of this issue, building the products from scratch with no reusable components left developers feeling like they were wasting valuable engineering time.

(c.)
It was decided that Plunk needed an internal design system, one that would scale with the companies needs.

The Growing Plan

01 : Environment Study

Identify core issues with both the product team, and engineering team. Categorize issues into effort and value level, decide on project goals and targets that would be usd to measure the projects efficacy.

02 : Planting Ideas

Research best methodologies, and determine which will best apply to Plunk's use case(s). Sort existing, in progress, and future products into;

A – Supported by design system
B– Not supported by design system

Sort product parts and sketches into categorized elements following the chosen design system methodology.

03 : Grow the System

Build the system while having checks with key stakeholders at key points along the way.

01 : Environment Study

01 : Environment Study

Soil Samples

01 : Environment Study

Goals

01 : Environment Study

Findings

02 : Planting Ideas

02: Planting Ideas

Methodologies

02: Planting Ideas

Compiling Sketches

02: Planting Ideas

Product(s)

02: Planting Ideas

Planning

03 : Growing the System

03 : Growing the System

Colors

Colors were labeled, and made into elements. This ensured accurate usage of the same palette spanning the entire suite of products. Gradients and tones were added for more flexibility across the use cases. 

03 : Growing the System

Typography

Typography was separated by each use case of the lettering. Body text was given room to breathe, while headings were made bold and slightly squished with the purpose of acting as separation in the product.  

03 : Growing the System

Atoms

03 : Growing the System

Molecules

03 : Growing the System

Organisms

03 : Growing the System

Pages + Templates

03 : Growing the System

Documentation

In order to facilitate handoffs to developers from the product team, documentation was created and linked to the code repository.