Dlux

What’s a design System?

A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life…Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. - Invision

It all started Summer 2017…

The design team grew from 4 to 14. Our engineering team tripled. Our company, ZapLabs, was in a major growth phase. We needed a way to keep track of the overwhelming amount of design patterns, varieties of the color gray, and a bunch of new faces.

This is the story of how we grew a team and tackled one of the many challenges faced by other teams in the industry.

The Team

Charles Solla, Director of Design
Michele Weiner, Lead Product Designer

Melissa Gamo, Visual Designer
Jessica Dee, Product Designer

Our Goal

Provide a library of reusable and scalable web components to reduce redundancy and promote consistency throughout the organization.

My Role

In the first 6 months, I needed to define the MVP roadmap and create essential design pattern libraries for our team to begin sourcing. As its primary contributor, I was required to design, spec, hand-off, and sign-off on all built web components. The team leveraged me as the source of knowledge for all product features.

As the DLUX timeline progressed, we were able to add more designers and breakdown responsibilities. This gave me an opportunity to step back to delegate tasks and help mentor our junior designers.

Design Approach

Audit existing products for varying pattern inconsistencies
Work with design and cross-discipline teams to redesign patterns
Create a new shared Sketch library of patterns and components
Integrate patterns into existing features per engineering timelines
Create comprehensive guidelines for design and engineering

Collaborating with Front-end

Our first learning experience came at the end 2017. We launched our first major feature, a global navigation, across multiple sites. This led us to a conversation with our front-end leadership to better understand the challenges of maintaining a consistent workflow. After holding a retrospective, we learned it’s important to meet with our engineering peers early on to understand their needs and technical limitations.

As a result, we looked at several successful design systems. We concluded that we were missing key items; a living code repository and a core foundation of shared principles.

Web Components

In collaboration with front-end leadership, we decided to move forward with vanilla javascript markup. This would allow our component repository to be portable across different applications and frameworks like React.js.

DLUX proof of concept created by 3rd Party Dev teams

An Opportunity and Execution

Historically, our teams were working under the limitations of a legacy code base. By 2019, we had the opportunity to revamp and modernize the library. This meant re-skin the UI, adhere to accessibility law, and revisit patterns that were limited by legacy code.

Each component had the opportunity to be tested through new and existing features. This included living in their production feature for a minimum of two sprints before being ported into the DLUX system.

Our Creed

As developers are guided by frameworks, we as a design team needed to have our own principles to instill in our products. In a first round attempt, we looked at common attributes like Clarity, Beauty, Intuitive. However, they didn’t feel actionable and didn’t seem to feel unified with our company goals.

Following our Lead Designer into a series of exercises, we were able to come up with a list of bad habits. This led to a discussion amongst design and other disciplines on how we could counter them and align ourselves to better serve our audience of real estate agents. As a result, we narrowed it down to the following 5.

Be Useful
Be Clear
Be Where Our User is
Find Confidence
Respect Relationships

Outcomes

DLUX was an incredibly humbling project. I had the opportunity to wear many hats and work with many types of stakeholders. Below is a list of some of the notable achievements that the product team and I were able to accomplish.