Shift - UX & UI

Creating our design system: The pains and gains of growing a product

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.

cdl

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.

 

We needed to have a good understanding of what was and wasn’t working, and what needed to be changed for our own teams’ best experience. Taking an inventory of how we work together and with other teams internally. Clarifying all of this would help us come up with ways of ensuring great design work,   “Our design system will enable better collaboration for us in designing each app holistically, as well as in allowing us to focus on optimizing the user experience.” - Jennifer de Vera   Once our research phase was completed, we started defining our foundation rules. We questioned, analyzed and restructured our design standards. From the details like type of grid we were using to the transitions we were applying to communicate different behaviors, we made sure all aspects were covered. These decisions also needed to be in line with iOSand Android standards and the data we had gathered over the years in terms of user interaction and behavior. We are constantly looking at every aspect of our design from a user/human centered perspective and taking all business and technical requirements into consideration.   After that foundation was solid, we started organizing all the pieces of the product into buckets – design elements (shape, line, colour, etc.), design components (list items, buttons, anything with a specific action or function), and design patterns (elements that might include small functions to accomplish a bigger task).   “By defining rules and developing a modular component library, we speed up future design and development processes, and allow for us to focus on bigger-picture design problems.” - Jasmine Leung   At this point, organizing all the pieces into buckets felt like playing with Legos. We wanted to create a space where designers could play, experiment and create like kids would; but with the ground rules that assures the consistency and quality we strive for in our apps.   “Using the design system reminds me of playing with those giant themed Lego sets as a kid. There are set rules on how the Lego bricks and pieces connect and there is an instruction manual on how to build the Death Star, but you still have the ability to get creative and make something new out of the pieces and rules you have.” - Jenna Piunno   This is when we came up with the name “Playground.”  

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!


gurbir perhar

Pilar Fernandez , Senior Product Designer

Follow us