How Apartments.com “Kondoed” their design system

Design systems are all about maintaining order. That’s what attracted Alexandra Clotfelter, Interactive Art Director and Senior UI/UX Designer at Apartments.com, to devising them.

Alexandra discovered design systems when working as a web design consultant. She told us, “As soon as I saw Tidying Up with Marie Kondo on Netflix, I thought, That’s exactly how I approach design systems.”

Now she’s launching Mortar, Apartments.com’s first-ever design system. She joined the company in early 2019, a move that she hints may have been influenced by the fact that Jeff Goldblum (the actor widely-recognized as the internet’s collective crush) was their spokesperson.

Her partner in engineering is Jake Anderson, Apartments.com’s Senior UI Front-End Developer, who went to college for design. He knows what life is like on both sides of the fence, and he fully believes in the power of a design system to save everyone time and frustration.

We sat down with both of them to discuss their experience with the art of building and launching a design system. 

Answers have been edited for length and clarity.

Inside Design: Alexandra, how did you become a design system architect?

Alexandra: I’m extremely organized in my home life and everywhere else, my desk, my files, everything. I can’t function unless everything has a home.

At my previous job, I was working as a web design contractor and I got annoyed by the scattered documentation and styles and components, so I started researching more about design systems. Then, when I started building out that design system, I fell in love with the audit process. I had a big board with red string everywhere like a conspiracy theorist. I loved shaking everything out of the drawers and closets and going, “Look how much stuff we’ve piled up!” and then finding homes for all of it.

I’m Kondo-ing all of our design styles and components into the most beautiful, usable system I can. But it isn’t so much about what sparks joy. It’s about what serves our needs best as designers, developers, and users. It’s about finding your lowest common denominator versus what you accumulate reactively when you’re in a hurry. I love giving people space to be creative, instead of worrying about what color a button should be. 

Jake: I’ve been saying we need a system like this since my first year here. Now we have people like Alexandra on the job to make it happen.

When the design side is organized, the developer side is happy. But when I first came on board five years ago, I found that we were doing things on an ad hoc basis, page by page. We’re really coming out of that now that we’re launching Mortar [Apartments.com’s design system].

Design better and build faster with InVision’s Design Systems Manager.

ID: What sparked the design system initiative at Apartments.com?

Alexandra: The design team knew it was time for a design system because they were facing persistent collaboration challenges. Apartments.com is a large team distributed across two offices, in Portland and Atlanta. We have separate teams working on separate parts of the Apartments.com properties, and it’s challenging to stay in sync.

The developers had already bought into the design system too, because the collaboration process was broken. Developers were constantly frustrated with designers because they kept finding out about updates to the design after the specs had been handed off and “approved.”

ID: Tell us about the path to launching Mortar.

Alexandra: First I talked to the stakeholders and creative directors to make sure we were all on the same page. Then I spoke to the lead developer about the concept of a design system and enlisted his support. He was willing to dedicate an entire developer to it, and that developer was Jake.

Jake: I had already hand-rolled some Bootstrap frameworks. Consistency is important from page to page; it creates a feeling that the user is still on the same site as they move from property to property.

But mainly I was after the reusability. We have over 150 developers here. The only way to create consistency is to create reusability across components. It makes design and product happy, and makes us happy as we maintain everything. 

Click here to check out Mortar live in DSM.

Alexandra: The design team and I spent four months auditing everything and building the component libraries in Sketch before we got DSM licenses.

We went through iterations of sticker sheets, tweaking things. When we got closer to the real thing, we used a ticketing system to create stories for each of the components and make sure they got final approval from the two creative directors in Atlanta and Portland.

Once the components were approved and fully baked, we started building documentation. That was when the DSM license arrived. Then we migrated all our libraries and documentation into DSM. 

ID: How is the rollout going?

Alexandra: It’s going well! We’re in that awkward stage where there are still some legacy projects that were created before Mortar existed. For example, a new project might end up getting rolled out as-is, because it predates the design system. We’ll apply Mortar to a later release instead. 

The designers have been very positive. They can see how this makes their jobs easier. 

Jake: At first people struggled to understand how this bridges the gap between design and development. But over the last month or so the relationship between design and development has improved so quickly. 

It’s a more straightforward way to work, and we get more products out at the end of the day. You might be able to build two additional features in a sprint, for example, because everything is reused.

Alexandra: It helped that we went through the InVision DSM kickstart process. The InVision consultant met with us for a series of how-to sessions about best practices, governance, everything we’d need to drive adoption.

Learn more about DSM here.

The governance meeting was one of the most helpful in the series. They [the consultant] recommended using Google Forms and flow charts to determine if you need a new component, and having a Slack channel for design system questions. I also have a collaborator’s guide explaining the philosophy behind adding a component. Our Google Form for that is similar to the one we saw during the kickstart training—and it has lots of Jeff Goldblum images on it.

ID: How has Mortar affected developers so far? 

Jake: It’s been a big help. Recently, for example, I worked on a project for teammates in London. They handed me a design structured in components, which I spent a week building. Then, when I went to London, I was able to snap everything in place on the site. 

That could have been a six-to eight-month project, but I was able to do it in two months because I was able to look at InVision, pull specs from Inspect, see all the reusable pieces in DSM, and attack immediately. With a design system, we have the full picture of what we’re building in one place.

ID: What advice would you give to teams starting a new design system?

Alexandra: Here’s what I’ve learned from the two I’ve built so far:

• Building stakeholder buy-in is the most important step. You’ll need to dedicate a designer and resources to it [your design system]. Make the case. 
• During the auditing process, it’s important to slow down. Really spend time diving into the entire product, shaking all those screens out of the closet, and figuring out all the worlds your websites and apps encompass. 
• Give the design system as much time as it needs to become something useful for your organization. Listen to your [design] team. Same with developers. They’re just as much a part of this as designers. 

Jake: I’d say work on communication. Keeping an open line between developers and designers really helps. Now that we’ve got Mortar in place, we’ve developed a good synergy. We’re driven to consolidate our work and make it reusable and consistent. Design and UI developers are trying to accomplish those same things with their separate methods.