How the VP of Design at Rocket Companies approaches design thinking at scale
Design Delivery
Every product team today strives for operational efficiency, and that becomes more challenging as the organization grows. Rocket Companies — a distributed team consisting of over 160 designers — is a great example of how this plays out for teams sharply focused on shipping great products at scale. Their designers, developers, and product managers have no choice but to find ways to automate and standardize their communication, collaboration, and design delivery processes to keep up with the intense demands of business growth.
At Harmony, Zeplin’s user summit, we got together with Andy Vitale, design industry leader and Executive Vice President of Design at Rocket Companies, to talk about his approach to scaling design systems to achieve organization-wide efficiency. We covered the importance of design systems, how to measure their success, and how to create a design system that empowers teams to collaborate efficiently and build great products.
About Andy Vitale and Rocket Companies
Rocket Companies is a Detroit-based fintech company for mortgage, real estate, and financial services. They're a trusted digital solutions provider that helps customers perform complex financial transactions quickly and easily. While a huge focus for Andy is leading a massive team of designers, DesignOps, and design system experts at Rocket Companies, he is also a member of Adobe Design Circle, an adjunct professor for Kent State University, and serves on the advisory board for multiple organizations and educational institutions.
What are ways design thinking has changed over the years?
Andy: Over the last 20 years, I've seen many changes. Design thinking went from focusing on a project as a single problem — a website or a printed item — to different screens on an app and the mobile experience. Today, we're looking at a holistic, end-to-end ecosystem and the user's journey through the whole process. Stakes are higher than they've ever been before.
How are design systems essential for scale?
Andy: The needs for scaling design have changed drastically. For example, we used to have file repositories and one UI kit, but design systems have now evolved into incorporating button style and even voice and tone.
We started to see this evolution of tools — Zeplin being an example — of how we can house this influx of information in a way that the entire team can access and in a way that we can share with developers. But now, we go even beyond that. We need fully functional code that everyone can access and source-of-truth design files that all product teams can access. It's also crucial that we maintain the ability to change designs based on states and needs.
All these needs start as atoms that get built on top of each other until we have fully functioning patterns within our design systems. Now, the need for design teams is consistency — both in look and feel and in the code and how we bring those things to life together.
Design systems over the last 10 years have become this living, breathing thing that teams are fully focused on, and companies have invested in for keeping designs consistent.
Andy Vitale,EVP of Design at Rocket Companies
What are the challenges you've faced when scaling your design team?
Andy: When you start scaling in specific areas, communication can become challenging. You have to be mindful that things might not help today, but over time — it's about consistency and trust.
And when you have to prove the value of the work the team is doing with design systems, it's important to take on pilot projects and have ways to communicate, share best practices, and learn what works. If everyone works off the same design system, it becomes easier to have an impact and contribute to its improvement. Having a single design system allows best practices to surface and then use those best practices across different teams. Whether it's improving conversions or optimizing call-to-action elements, you can share those successful practices without starting from scratch. It's crucial for scaling because it saves time and effort and establishes a strong foundation.
How did Rocket companies create their design system?
Andy: We noticed adoption wasn't high in an earlier version of our design system. We realized early on that we needed to factor the needs of other teams into the equation, understand the pain points of all the different teams, and co-create something together.
So when we set out to create the design system, it involved a mix of top-down and bottom-up approaches. Teams shared their pain points, and leaders socialized those ideas to gain buy-in from the rest of the organization. The questions we used at the start were:
What can we build?
What can we co-create together that will help all these teams?
Everyone wants great work, fast shipping, and the highest quality — how do we empower and help everyone achieve that?
We conducted interviews and audits and realized that rebuilding the design system was necessary to increase adoption across the entire org.
As a result of that process, we launched a new design system this year, though it's still a work in progress. It includes an updated color system, typography kit, spatial system, grid system, and iconography. Our initial launch had 39 unique components, 274 component variants, a fully functional UI kit, production-ready code in Angular and React, and robust documentation. But that was just the first version. We're now on version 2.2, constantly improving it based on our learnings.
We have a design leader and an engineering leader who hold office hours where people can ask questions, discuss code or visual components, and address any challenges or areas that need improvement. It's a way to build a community around shared ownership of the design system's usage.
Andy Vitale,EVP of Design at Rocket Companies
How do you measure the success of your design system?
Andy: Each organization has a different way of doing things or certain metrics that are important to them and their design system's adoption and success, but there are three areas we focus on at Rocket Companies:
1.Time savings — Ensuring our product teams spend time on the right things. Our experiential time is cut by 70% because our design system incorporates best practices we've learned from other areas.
2.Quality of designs — We want to deliver high-quality designs, so we ask questions such as: Is the quality of work improving? Can we look at the design and code and realize this is better? Can we quantify how much better it is through conversion, NPS scores, etc?
3.Speed to market — We want to ship designs and build quickly. We use our design system to quantify how fast we get things out.
Design systems are internal tools. It's not what the end user sees, but it's a critical ingredient to ensuring you deliver quality products on time. They need cross-team collaboration to be truly successful.
How do you empower your entire team to understand the value of your design system?
Andy: It's constant evangelization and education. We host lunch-and-learns and educate teams in meetings and during office hours to help communicate the design system's true potential and showcase what it's capable of doing for each team. We treat it like a product — we want to show people how a design system can solve a problem for them.
We're always learning. We're always looking at tools and how things evolve. Any time a tool can enhance collaboration and get us to an outcome faster, we want to experiment and see if it works for us.
Andy Vitale,EVP of Design at Rocket Companies
Contact us today if you'd like to learn how Zeplin can help with design system adoption and scalability, and watch Andy's session and others from Harmony to learn how your entire product team can work more efficiently together.
Fin
