We had the chance to catch up with Udacity’s design system lead, Jennie Yip, and hear all about what they’re up to with Veritas. Here’s some of our top questions answered, enjoy!
What is your role at Udacity and what is your favorite part about it?
For the past two years, I have been leading the planning and implementation of Veritas, our design system for Udacity. Design systems spark empathy, collaboration and moments of delight — I really enjoy those moments when a designer and an engineer begin to speak the same language, or when a designer or engineer is pleasantly surprised by something small we implemented for them. As a hybrid, I love being able to create tools to bridge the gap between these two disciplines and help designers and engineers work better together. “Better together” is one of our core Udacity values.
What is the name of your design system and how did you come up with that name?
Our design system is a product, so we were thoughtful about choosing a name for it. We considered names related to a source of truth as well as Udacity’s mission around democratizing education. In the end, we chose Veritas, which means “truth” in Latin and often appears in the mottos of many universities.
How supported is the design system effort at Udacity? Did it start off that way or did it take time?
The support for our design system truly began after our Udacity rebrand launched back in 2016. During the rebranding effort, I created a CSS framework and Sketch UI kit to support the development and design of new pages with efficiency and speed. I realized later that this framework was part of the foundation of a design system, but it wasn’t built to scale beyond the rebrand project.
It was time to treat our design system as an actual product and investment. I conducted multiple meet-and-greets and pitched to leadership, designers, and engineers to get buy-in. By designing the right team, exploring the proper processes and cultivating relationships with our champions, we were able to build a sustainable, reusable, and reliable design system. Within nine months, I hired another UX engineer, and Veritas Design System emerged.
What is the layout of your design system team? Does anyone outside of the team contribute?
The design systems team consisted of two full-time UX engineers, and occasionally one or two designers. Product designers were rotated in quarterly to design components, learn about systems thinking, and become champions of the system. We also worked closely with product engineers to get feedback on the design system, to ensure the API of our components are working well within the products.
You recently celebrated your first year of adoption for Veritas and publicly shared it. What motivated you to make your design system publicly visible?
The Veritas site (https://veritas.udacity.design) has been public since its inception. The code and repo are still currently private. We planned to eventually open source it and have always worked with this intention. Working in this mindset motivated our team to work very diligently, ensuring the system was of the best quality it could be at all times. So, we didn’t do much work to make it public; we just shared the URL in a tweet and dribbble post to celebrate a year of adoption! 🙂
What are the major pieces that make up your design system?
For designers, Veritas provides Sketch libraries as a source of truth. These libraries include our foundations of design, as well as the symbols for all our components. We also offer a variety of Starter Kits, which are templates that scaffold every design project with the grid, color palette, breakpoint art boards, and more.
For engineers, Veritas was designed as a monorepo as a single source of truth. We provide three NPM packages: veritas-design-tokens, veritas-styles (a SCSS framework with helpers/mixins), and veritas-components (a UI library of React components). Consumers only have to install the core NPM package they need for their projects as a dependency, and the infrastructure handles the rest. We architected these three entry points into the system to support various tech stacks across the ecosystem of products built at Udacity.
The last major piece of our system is the Veritas documentation site. If something is not documented, it doesn’t exist. Much of the time spent designing every token, style, or component was equally spent on documenting the API, naming elements, crafting effective usage examples, and noting best practices.
How do you measure the success and adoption of your design system?
The adoption and success of Veritas were measured through a variety of qualitative and quantitative data. Before the launch, we documented different sources to create a baseline. This way, we were able to compare the data and impact made within one-year of adoption, from April 2018 to April 2019. We did this in a few ways:
- During the 8-week pilot of our prerelease (before V1 launch), we created a feedback survey to to understand the inefficiencies in our current design and development workflows. The study was a collection of 21 questions to gather measures on time, usability, and confidence, and was sent quarterly. Throughout the year, we could see the happiness level rise for our designers and developers.
- We use Github at Udacity, so I was able to utilize their search feature to check on adoption. A bit manual, but it worked for the data we were interested in. We measured the number of repos adopting the system (search results can list repos so we can see who is installing which package), and to what extent Veritas was being used (some teams only need tokens, others need Sass helpers, etc). This search feature also helped us discover Github PRs/issues across the Udacity organization. I used this as a chance to proactively reach out and offer Veritas tips or help, and to observe how developers were using Veritas to improve it even more.
- I love CSS! CSS Stats is a tool which allowed us to measure how Veritas is scaling design and development at Udacity. We took a baseline of our main product for Udacity, the Classroom, and witnessed some amazing results. Aside from the obvious decrease in overall file size, the drop in some of the numbers correlated directly to the fact that our designers and engineers were designing and coding consistently together.
What is the biggest challenge that you and your team have faced with the design system?
Often, many think the hardest part of a design system is getting buy-in and building the system. So many people focus on “the launch,” but it’s the months before and after the launch that are the most important.
When we were conducting the meet-and-greets across the company, we thought we had evangelized too early, since everyone kept asking where the system was and when it would launch. (We were heads down for nine months). Upon reflecting, I found that evangelizing earlier was actually really beneficial for us, as we had visibility and support from those we pitched to. After our V1 launch, a lot of the adoption happened eagerly and organically throughout the company.
The biggest challenge, for me, was the realization that design systems are hard work, but evangelization and adoption to those unbeknownst to design systems is even harder. Cultivating relationships to create champions of Veritas required interacting with people at all levels across the company. Some may think a design system is a blocker to creativity. Some may not understand the benefits of a system and how we can use it to save money. Some may not understand why a dedicated team is needed to support it. Some may not know that it’s a living system, so the work is never done. We have to continuously evangelize the value of the system even after the heads down work is done.
What advice do you have for someone in the early stages of starting their design system?
Remember that everyone is a design systems pioneer, and we are all learning from each other as technology changes. Every design system is different for every company. What works for one company might not work for yours. The most useful thing for my team has been taking the time to do some self-reflection. I conduct quarterly reflections for my team, and it helps us identify what has and hasn’t worked well. From there we can iterate to build better processes to continue improving on Veritas Design System.
About Jennie Yip
Jennie is a hybrid design engineer with a heart for elegant user interfaces, simple user experiences, and beautifully crafted code. She collaborates seamlessly with designers, solving problems in an engineering mindset but with a keen eye for design. Creative and meticulous, she thrives best in companies that invest in design and treat design systems as a product, serving other products.