If you happen to be in the digital product industry, chances are you’vealready heard about design systems – is a bit of a buzz word right now. Design systems are a solution enabling collaboration and consistency, especially when a product design team and the product itself grow over time.
When CDL’s product design team started working on the redesign of our core apps (Boost, Nourish and Thrive), there was a small dedicated team. The collaboration was fairly easy: each designer was working on a product individually. We then decided to change our product design approach and treat our apps structure as one backend with the ability to customize the UI by sector – driving the scalability. This Core Product Design Strategy, as we called it, facilitated collaboration between all the teams that touch our apps, such as development, product management and quality assurance.
However, our team was growing; collaboration among designers became challenging, and the design work was becoming inconsistent. UI elements like button, fonts, and sizing were starting to lose alignment and this was an issue that needed to be addressed. As a team, we decided to explore the idea of a UI library: a single file where we could store all the design components of core product that everybody could pull into their files. The goal was to spark collaboration among designers and helped designers reuse existing design components – streamlining work flow.
So far, we had solved the issue of WHAT to use, but we didn’t specify WHY, WHEN, WHERE to use elements. More importantly, we needed to decipher HOW to use and create new components. Creating a solution that responds to all those questions and fills all those gaps was a natural step in our journey.
Creating our own design system was indeed the right move to improve and fix all those issues. In theory, it made sense but it was a big task to tackle. In the beginning, it felt like looking up from the base of the mountain, you can see the peak but you’re just not sure where to start. We decided to take a step back – pull everything out into the open and take an inventory. Even though most of us had an idea of what a design system was, it was important to do research. We then looked at design system trends and tried to capture what resonated with us. We were working tocreate our own uber-customized version of the design system that would work best for Compass Digital Labs.
Once our main content was organized and our design system had a name– YAY! We had a long wish list of ambitious goals, too long for the first launch of Playground, so we broke it down into phases. Our first phase would include sharing most of the elements, components and patterns of our products with the product design team and development (at this point, we have grown by two more apps). Our second phase will focus on training the team in how to use and create new pieces of the product. Our third phase will be to create a website that explains the why, how, when and where of each element, component and pattern; making all of this information easily accessible. Our fourth phase will focus maturing site content. All the phases after Phase 4 focus on maintaining, improving and updating Playground. We are currently days away from our first launch, and we cannot describe how excited we are to share this with the rest of the team! This has been a tremendous opportunity for all product designers on the team to sit back and rethink ways to make our team operate more smoothly, be more scalable and continue creating user-centered experiences. Perhaps things won’t ever be perfect, but that’s the beauty of our system and our product design approach: explore, play, create—and if it doesn’t work, iterate!