Starting a design system from scratch
Starting a design system from scratch
Starting a design system from scratch
My Role
Design Management
Product Management
Background
When I first joined the 2U Creative Team in 2018, I introduced the idea of design systems and led the planning and migration of all web, email and advertising projects in to Adobe XD. At the time, Adobe XD was the newest tool in the Adobe Creative Suite that allowed for connected libraries, components, and design systems. Figma was still gaining steam in the industry. More on that in a second. Spoiler alert: We eventually moved to Figma.
Problem
2U's Creative Team manages 70+ University brands powering their online undergrad, graduate and doctoral degree marketing web design, email design, advertising design and more. In order to update brand styles like colors, typography or logos when schools undergo rebrands, changes needed to be made to all live design files across the portfolio. This was inefficient, inconsistent and not scalable. And more than that, if core components like our heroes, sign up forms, or navigation needed updating to match our code, we again needed to make those changes individually.
Goal
We wanted to build a core set of components and brand libraries for each university to have the ability to manage assets in one central location. For example, if UNC wanted to update their brand colors from blue to let's say green, having a design system built and connected to all design files would allow us to update a color in one place and push those changes to their respective locations automatically. Actual magic.
Beyond that, we wanted to stay connected to our cross-functional partners on our web developer team. If, for any reason, we needed to update a core component on our web pages like a sign up form, we wanted to have one place to update that component that would then push changes to all design files.
Plus, we wanted a new workflow for our designers where they didn't have to design from scratch every time they received a new project request. We wanted to be able to share a design system that included pre-built, fully branded components they could pull from to begin designing.
To recap our goals:
- One place to update styles during rebrands
- One place to update core components when needed
- Save designers time when starting a new project
- Better match design to what is actually coded
- Stronger brand consistency across all design assets
Process
In order to understand the landscape of what we working with, we conducted a design audit. We needed to look at every brand and determine how best to build a system for each one that followed a similar format.
We asked a few questions:
1. What are the common assets shared by every school?
2. Which components would provide the most value for designers to start with?
3. Are there templates that would save designers time when starting a new project?
4. What should be built at a global level and what should be built at a school level?
Results
My team built a brand library for every university partner that was connected to our whitelabeled templates. This made it easier to manage brand updates and styles across our entire portfolio. Changes to colors, typography, logos and core components could be made in a few places instead of numerous. This saved our team time for many projects.
We also built fully connected web templates, advertising templates and email templates for our design team. This allowed our designers to not have to start from scratch and they could pull fully formed templates to begin their work. This saved a ton of time when starting new work.
My team built documentation, training materials and supported the team through a support channel in Slack. Overall this was a huge success, built efficiencies for the entire creative team and gave us a platform to expand to Figma.
