• Explore
  • Open roles
  • Twitter
  • FAQs
  • Terms
  • Discord
  • Support
  • Privacy
Jerry Hong
Jerry Hong

Systematizing Pallet Design

As we crafted Pallet's core features, I worked with the executive and engineering teams to begin elevating our design practices. Static, messy files became a set of organized specs centered around a new design system.

Sole Designer, 10-person team • May → June 2021

Context

When I entered Pallet, we had just worked with Z1.digital to define Pallet's brand and lay out some initial UI. However, the provided specs were static with a scarce set of components underlying them. There was no proper scaffolding for engineers to build designs out — other than by eye.

A lack of specificity in designs led to unpleasant interactions in the product.
New components like toasts didn't match our rebranded visual style.

A System for Designers and Engineers

Struggling with manual frontend tasks in my first weeks, I decided to build a design system and lead by example in my design work to make everyone's life easier — engineers and future designers alike.

Color, spacing, and layout had been defined by Z1, so I focused on building out reusable atoms and molecules that appeared throughout Pallet's interface.

Design for inline job post editing solely using design system components.
Modal template

Atoms allowed us to explore microinteractions — hover, press, and select states for common components breathed life into an otherwise unresponsive interface.

Sorry this feels jank. I don't have an M1 🙄

For engineers, atoms in the design system modeled how a Figma component could be broken down analogously to its implementation in React, portraying both its "base" component and the manifestation of different state-dependent styles.

Guidelines in the system helped explain edge cases to engineers that couldn't be expressed with variants and constraints.

UI specs mirrored their implementation's counterpart in the layer breakdown, and appropriate layer names and constraints improved their clarity.

Engineers could test the responsiveness of components themselves.

This overhaul required the support of the engineering team to have any effect. So I prepared a curriculum to demonstrate specific design-engineering handoff practices in Figma.

Sample of the curriculum. Engineers were elated to learn how much Figma could make their work easier to implement and more pleasing for the end user.

Outcome

As the visual style morphed in the last weeks of my internship, I halted work on a system that now needed a total refresh. However, Pallet's new design practices allowed the engineering team to evolve the product with increased productivity during a crucial period for the company. Ultimately, I took great joy in learning how to set the designers and engineers around me up for success.

On a final note...

If your team is interested next year in a designer who thinks deeply about engineers and systems, I would be delighted to hear from you. Once my master's concludes around mid-2022, I'm seeking to work on complex problems with passionate folks that can nurture my early-career growth. jerryhong1@gmail.com!

edit: nevermind i got hired by airtable but always feel free to reach out :)

Send Jerry Hong a reply about this page
Back to profile