Design systems — when done correctly — are much like a fine spiderweb, imperceptible to most but intricate and intentional when they catch the light, their design created specifically to be strong, supportive, and flexible.
Design systems are intended as a foundation to be built on, often taking time upfront to implement so that, later, the system can scale with ease. An investment of this type is hard to advocate for, the return being hard to quantify given that there is no immediate return so the design system nerd in me was thrilled at the opportunity to work on developing and implementing Ellevest’s Marketing site design system.
Beyond just visual design I try to approach this sort of project with empathy and curiosity. How can I make the various teammates, whose job it is to work with this system, easier and more enjoyable? How can I remove unnecessary roadblocks that prevent them from doing their jobs well? And how can this work achieve all of that while at the same time meet business and team objectives? How can I create more efficiency, speed, bandwidth, accessibility, consistency, and brand excellence? Sexy right?
I needed a clear and systematic approach in order to accomplish all of what that would entail. Here is the process that I presented to the team.
Take a little journey with me. I would love to hear your thoughts, how you’ve approached a project like this, or discuss design systems. If you want to collaborate or if your team has a project like this in the wings that you would like some hands on, please send me an email at [email protected].
The initial ask was to take the current design system and translate it into a Webflow component library. The existing system was comprised of a small component library — shared with the product team — and a handful of section layouts that were built as Figma components for designer’s use.
The first phase of this project was informed by working within the existing system. Being new to a system or process allows me to objectively identify what may be missing or unclear. When I am lost or confused, have questions or don’t feel confident, those moments draw attention to the holes in the spider web that is the design system. Those holes make apparent the tools and resources that could be implemented in order to mend them and create ease for all team members.
As is natural at a mid sized company, where designs and libraries have changed hands various times and templates are held loosely with a lot of custom variations, working with the current system felt a little like an overgrown garden.
Digging into the design system was reminiscent of remodeling a house, a lot great work had already been done and there was a lot of potential but the further you get the more structural issues you find. For even the most beautiful of houses it may be, at some point in it’s life span, necessary to strip the house down to the studs in order to fix the structural problems before putting on a new roof. In other words, I needed to fix the foundation before I could rehang the artwork.
Approaching the project holistically would give the team the best chance to take the system and run with it as they scale and grow.
In relation to Ellevest’s Marketing site, developing a design system meant:
Starting the project, it is important to create a lot of transparency into the process. Not only do I need to outline the deliverables, the tools, systems, resources, and documentation I plan to create but I also need to outline in detail my approach to tackling such a massive project.
Presenting the project plan to all team members creates space for buy in, collaboration, and let’s them identify areas they can plug into the project or bring up factors I should be taking into consideration. I see my role as supportive. I am here to bolster the amazing work that’s already been done, more maintenance and mending than overhauling — unless of course that is the ask.
Every company is unique with their own frameworks, softwares, team structures, and needs so in summation the project would consist of synthesizing and refining various inputs in order to create an updated and scalable design system that is then formalized in webflow as a component library.
For Ellevest this meant taking their current design system, the results from my audit, an audit conducted by the brand design team looking at visual design, and the client-first framework from webflow and using all of that to build the new system stronger, with a solid foundation, to build on going forward.
The stages of the project would be as follows:
In tandem with the ongoing presentations and conversations, both a design audit and a component audit were being conducted.
The brand designers having the most insight into the current evolution of the brand, it was important to get an understanding of which visual elements could be phased out, which were favored, and which could be evolved. That information was gathered via the design audit and those comments were then identified as either system wide or component specific so that they could then be sorted and addressed at the appropriate time in the project.
I then conducted a component audit, taking ten pages identified by the team, breaking them up section by section and sorting the layouts by the base component used to create each section layout.
The goal being to determine the scope of the project and priority/order in which we worked through the components. There was a lot of information derived through this audit including which components were most used, what variations were needed over and over again that could be integrated into the new component library, and which layouts were not in the current system but were used frequently enough to warrant including within the scope of the project.
Once the audits were conducted the first design phase was establishing a style guide within Webflow’s client first framework including: