<aside> 🧑‍🎨

Design system

</aside>

image.png

Let’s start this one with a story!

In May 2022, I joined Mosh into a team of 3 designers. Mosh had just secured a $20m Series B round and was trying to establish a more solid ways of working / processes. Within the first 2 months, the other 2 designers had moved onwards to other companies leaving just me alone to cater towards 3 fast paced product teams.

With initial plans to backfill these 2 design roles, I knew I just had to hold the fort for a short while. That’s where the idea of establishing a design system with a strong set of rules came into the picture. This lined up perfectly during a time where we were trying to transitioning our front-end from Ruby-on-rails to React.

In great success, after the establishment of this design system, my capacity as a designer increase drastically while the workload continually increased, giving Mosh the ability to push back another design hire for the next 18-months.

During this time, I designed and scaled the design system for Mosh as we progressed to open a new brand (Moshy), triple our monthly revenue and reach profitability.

I’ll break down this system into 4 sections

<aside> 🎨

Style guides

</aside>

<aside> ⚙

Interactive Components

</aside>

<aside> ✨

The variables system

</aside>

<aside> 🧑‍💻

Implementation

</aside>


Style guides

The first thing we needed to establish was the creation of our style guides. To do this we focused in on 3 main aspects: