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
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/4kO22cFtDBPBpKYlSmhZ/f1edcbf2-e167-4adb-bbd1-308a1d54a973.png?_a=DATAdtfiZAA0)
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/4kO22cFtDBPBpKYlSmhZ/2070a3e0-df44-49d2-9604-b3791823226c.png?_a=DATAdtfiZAA0)
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.
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/48c85468-4447-468b-b1cd-f839a6094269.png?_a=DATAdtfiZAA0)
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.
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/26a20237-b647-45d4-befe-8ed2d377968b.png?_a=DATAdtfiZAA0)
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/ebdc7f43-7f72-4193-a520-277a14c1f3de.png?_a=DATAdtfiZAA0)
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/3c7045fc-c572-4fe0-919c-46ee4cd22874.png?_a=DATAdtfiZAA0)
Atoms allowed us to explore microinteractions — hover, press, and select states for common components breathed life into an otherwise unresponsive interface.
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.
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/64bde751-7480-4623-b9e6-03f61216b94f.png?_a=DATAdtfiZAA0)
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/19cd925d-2959-4a2b-bff4-324aecfecbb3.png?_a=DATAdtfiZAA0)
UI specs mirrored their implementation's counterpart in the layer breakdown, and appropriate layer names and constraints improved their clarity.
![](https://res.cloudinary.com/read-cv/image/upload/c_limit,h_2048,w_2048/v1/1/pages/VKoVjCn5SHO5LQEa2DK55iyK1gx2/HXsJH5jfqJnjFY83AkH5/6c36ecb1-3af1-4943-9810-485a56901dbb.png?_a=DATAdtfiZAA0)
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.
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 :)