After a couple of years designing at a fast paced startup as the only designer, things got a little messy. We had multiple sides of the platform, our internal admin side, the merchant and creator sides, and the chrome extension. We also went through multiple rebranding and a name changes. Pixel perfect design also was not a top priority. The engineering team also took some “initiatives” on the admin platform. As you can imagine our design debt was building up.
We were looking to hire a few more designers so now was the time to put a system in place before things got out of hand. Don’t get me wrong, I had a system but it wasn’t exactly self explanatory and most of the rules were in my head. The first step was a design audit.
The Audit
I identified commonly used components on our system that require unified guidelines and branding updates. On different parts of our platform, similar components are used in different ways and use different branding styles. The audit will not define the proper use of each component but only point out the current use cases.
Style Guide & Pattern Library
Our Branding and product principles have already been defined in a previous initiative. Next we needed to standardize the building blocks and patterns of our system. One thing I wanted to make sure was that all of our components in figma were intuitive and flexible. Making use of figma variants whenever possible. I always hated when I would get a project back from another designer and all instances of a component were detached. Repeated patterns were continuously added to the library once identified.
Documentation & Engineering Buy in
To make this project a robust design system and not just another style guide, we needed the engineering team to be onboard. I worked closely with the frontend engineer to build a 1 to 1 match of our figma components to a Storybook library. Too often in the past, different eng teams would rebuild the same component because they didn’t know it already existed or an edge cases couldn’t be produced. Ultimately the goal is to help teams build products coherently.
