Tandem Pattern Generator

The Tandem Pattern Generator is an interactive single-page web app where Tandem brand patterns can be drawn by clicking and dragging within the canvas, and exported as SVGs.

A collaboration between me, a Principal Product Designer at Tandem, and Dominic Bales, a Software Engineer at Tandem, it was built using React, Canvas, and a javascript library called Paper.js. Currently it works best at large window sizes in Google Chrome.

OUR PROCESS

Prototyping & Iteration

UX & UI Design
Prototyping

Production

Front-end Development
Componentization
Styling
State Management
Deployment

MY ROLE

I designed the product and wrote the code to draw each pattern combination as the canvas is clicked and dragged.

Dominic mentored and paired with me to build a functioning site around the canvas.

YEAR

2021

Drawing computational patterns, without faking it

In Tandem’s visual branding, computational patterns represent the team’s combination of creativity and programming expertise. Repeating patterns are contained inside three simple shapes, reflecting how technical problems are solved in elegant, dynamic ways.

Previously, our design team was creating brand patterns manually in Illustrator, Sketch, or Figma, and masking them with a larger shape. This sometimes resulted in small cutoff artifacts at the edges of the pattern, which though small, detracted from the power and concept of our brand.

I wanted to find a way to back up our brand concept by actually computing the patterns inside geometric shapes, without any artifacts and tedious manual masking. And maybe we could make a fun, interactive tool out of it, too!

Computational patterns bounded by simple shapes are used throughout Tandem's visual branding, usually paired with solid shapes.

Previously, cutoff artifacts could be seen at the edge of some of the computational patterns.

A chance to grow my coding skills

As a product designer, I’ve come to learn how important it is to understand how our products are built when we design for them. I love geometry and solving problems, and realized this was a perfect opportunity to engineer a product myself, and deeply learn what goes into it.

After trying a few different javascript libraries, I settled on Paper.js because it facilitates user interaction with the canvas, and allows easy SVG exports.

Looking at the browser, the <canvas> element was used to create a space for click interactions, and the paper.js library was used to write code that draws patterns within the canvas.

The site is structured using React, and broken into different components. We were able to get started quickly by using create-react-app and editing the files we needed.

Digging into the geometry

A former physics major and physics instructor, figuring out how to translate visual patterns into code was one of my favorite parts of this project. After pages of sketches and dozens of iterations I was able to break down the geometry and plot each pattern using “for” loops with mathematically defined boundaries that depended on the position of a user’s cursor.

There were tricky differences between different pattern types (like diagonal lines and halftone circles), but that was the fun part!

Early sketches to figure out the math behind drawing a diagonal line pattern inside a triangle and a circle.

Diagrams showing how the boundaries are defined when drawing grid patterns inside a rectangle and a triangle. Point (x1, y1) is where the mouse is clicked and point (x2, y2) is the location of the cursor as it is dragged.

Learning React

While I had some previous experience with html, css, and javascript, I was a bit bewildered by modern frameworks like React and Angular. Our developers at Tandem often use React for client projects, and I realized this would be a perfect opportunity to learn the framework more deeply, and, ultimately, how to better design for it.

I paired regularly with Dominic to build an interactive React site that used the javascript code I’d already written. It was fascinating to figure out how to make the code modular, keep track of changing state, and make sure data was being passed to all the right places.

We broke up the front-end into components (listed to the left). To manage state we used React Context and a reducer function that sends updates to the right places within the code.

Final Product

We are still working to make the site mobile-friendly and add test coverage, but it currently works well for large window sizes in Google Chrome. Features we implemented include:

Drawing by dragging in any direction
Many different combinations of bounding shapes and inner patterns (all of which should work!)
Layering of patterns
An Undo button to remove the previously drawn pattern
Selected states for each drawing tool
A popover menu for background color

Go ahead, create a Tandem pattern! Or view the source code on Github.