Creating a Design System
Lead Designer
I organized existing elements across our designs, created new ones (including components with auto-layout and variants), and designed dynamic templates for our design team, third-party vendors, other departments to use. I worked cross-functionally with other designers from third-party vendors, engineers, stakeholders, marketing, and copywriters to ensure this project would benefit all parties.
The Impact was Efficiency and Consistency
Creating this design system improved efficiency of time (including time it took to create a design and removed simple time-consuming projects from our bandwidth that could now be done by other departments) and consistencies of designs across our suite of products.
By creating a Design System, our team saw increases in efficiency and consistency across our designs, and removed the back-and-forth between design and other departments
Our company was growing really fast. Which is a good thing, but this also meant more initiatives and projects. But, we only had two designers to handle all of this work... luckily we added another team member to help.
Now with three designers, and more projects – our team was forced to split up and take projects on our own. This became a problem as we started noticing inconsistencies appearing across the different channels of our designs.
We decided to put together a design library of our UI components that we had each been using, and over time it started to fill up. This was great!
But, our new workflow consisted of opening up the design library to find what we needed to copy and paste into our own projects. Organization and process was lacking. At this point it was easier to create new elements rather than to find what we needed. Again, over time, without a process this became messy and didn't really solve our issues. Different projects still had different designs being used.
We were wasting time. And, we were starting to bring on more designers from third-party vendors to assist our team.
With more scaling on the way, we needed something better. I was assigned to lead the creation of our Design System in Figma.
After launching, I also served as the go-to person for all things Design System-related. I helped teach our team, as well as other departments, how to use auto layout and variants which helped by removing the time it would take for them to put in requests for projects that they could now tackle themselves. For example, our copywriters were now able to use Figma and our Design System to edit copy because our designs were built to adjust accordingly with auto-layout features. Outside departments could now create designs for simple forms and landing pages based off the templates that I created for them, and ship them off to engineers themselves. This saved the design team a ton of time!
Our design team now had quickly modifiable versions of components to use that stayed consistent
This is a demo of the different variants we created for an alert/banner component. This is super easy to customize by other designers, copywriters, or any other team members while keeping our design principles intact (such as padding, margins, etc.) without breaking anything.
Our marketing team A/B tested notifications, alerts and cookie banners a lot
This is an example of how someone in the marketing department could easily overlay a new cookie banner on top of a screengrab of the home page to create new mockups to send to developers themselves. This allowed the design team to focus on heavier design projects instead of being asked to put together a package of different banners for marketing to A/B test.
Button variants were helpful when creating designs to test and get feedback from stakeholders
This is an overview of the different options we built into our button components. Things like primary vs secondary, links, icon-only, and other options, all while being dynamically sized, can easily be integrated into any design while keeping consistency throughout the brand and products.
Dynamic page templates saved time for designers by eliminating requests for simple asks
We had a lot of email and info-capture pages with forms throughout our web platform, so this is an example of a page that any of our marketing team members and copywriters could easily go into and design quick mockups themselves for our devs to code. This worked well for creating sections of more fuller designed landing pages.