Building the Organic Design System
Company
Organic Ventures
Role
Lead Designer
Timeline
2021 - 2023
Background
The Organic product suite started with a design system that looked more like Material UI (because it was Material UI) than anything that reflected our brand. We partnered with a branding agency to think through some brand activation pieces while also considering how this could work directly in our product.
As time went on and our little startup developed a personality we updated our brand & design system to reflect that.
Process
Using the principles of Atomic Design, I reverse-engineered our product in Figma and broke it down by components and design patterns. From there, if we made a change to base elements it would reverberate upstream to components and then templates.
Once I had a good foundation of components, I worked with our engineering team to build the system in Storybook. I also spent time advocating and evangelizing the importance of a design system, which got the whole team on board.
Results
The response was overwhelmingly positive. We moved faster designing and deploying features, and could spend our time thinking through solving the right problems vs moving pixels around in Figma.
Our design system significantly impacted our product development process as well, we could quickly have conversations around loose wireframes and decided whether or not we had existing components that could achieve what we had in mind.
As our design system evolved we kept a lot of the core functionality of Material Design while making it feel more like ✨us✨
Redesigned multisite selector - originally this was an ugly dropdown that took up a huge chunk of real estate and used on almost every single screen in our product.