The Atomic Evolution of a Dinosaur in the 21st Century

Project Type: Design System
Kickoff Date: March 2021
Team: 1 UX Director, 1 UX Design Lead/3 UX Designers, 4 Development Leads
Tools: Figma, Confluence, Zeroheight, Slack, Miro, Sheets

Product Overview

ADT, the oldest security company in the US (nearing 150 years), recently partnered with Google to allow ADT customers to link their Google accounts to their ADT system and add Nest devices to their homes. To do this, ADT is rearchitecting its current DIY platform (Blue by ADT) to serve as the baseline for this new “agnostic” solution which will revolutionize smart home connectivity —giving customers greater freedom, flexibility and customization within their own personal technology ecosystem.

Problem + Goal

Over the last decade, ADT has released five unique security-based applications that lacked a consistent and cohesive visual language. 

• Each product leveraged different codebases, with inconsistent development and design teams

• Antiquated and inaccessible, and don’t follow any established principles for best practices of UX

• Many industry giants consider the organization a “dinosaur,” including a good portion of its customers

There was a clear opportunity to establish a systematized, standardized mindset and approach that would unify our products for the future by creating and implementing a design system that is supported by proven principles and experience standards. 

This system would help to spring ADT into the 21st century as an evolving “tech” company, pivoting from a traditional “services” model and embracing a modern approach for its 7 million customers. This moment was more than just optics.

Nebula broke ground as ADT’s first robust design system in Q1 of 2021 and continues to evolve and integrate across teams today. Before Nebula, ADT had leveraged only ill-defined, lightweight branding and style “guidelines” for its products without consistency. As a result, product development was not properly planned and ultimately unpredictable. Nebula:

• Creates a unified and logical visual language

• Allows for design and development work to be created and reproduced quickly and at scale

• Alleviates strain on resources to focus on innovation
  

Audience

Nebula directly benefits both designers and engineers in their daily product development work streams through establishing better processes and documentation. While a tool for internal teams, Nebula ultimately serves ADT customers through its framework of documentation and efficiency. 

This design system functions as an:

• Educational tool in articulating the elements—components, patterns, interactions, principles—that make up our future product suite and how they all fit and work together with purpose

• Recruitment tool to help attract top design and development talent interested in building cohesive products within our evolving smart home ecosystem
  

Roles, Responsibilities, Leadership

The need for a design system has been a fundamental priority since I joined ADT over 2.5 years ago as its UX Director. I spearheaded this project, got top leadership support, built the diverse team that would execute it from scratch, and created short- and long-term strategies for its evolution, and continue to direct its daily cadence. To do this I approached this project with several tactics:

• Planting “Seeds” early - identify stakeholders that would understand the need and solution, and encouraged them to advocate for the system;

• “No Experts” mindset—level playing field, everyone has an equal voice - empowered the direct team to own the project collectively, encouraging their feedback and using it to help refine strategic roadmaps;

• Competency growth, thought leadership - learning as we build, discovering best practices and the tools that bolster, and sharing our knowledge along the journey;

• Education model of “Up, Out, Back In” - teaching and sharing systems design knowledge across teams and organization to reinforce understanding and need, with feedback driving the conversation;

• “Two-way street” of directing/mentoring - as much as I’m driving, I’m learning from the team and project to hone my own leadership style;

• Inspiration, motivation, empowerment, support, respect, honesty, flexibility, community - all key aspects of this project that help to keep it balanced and growing;

Scope + Constraints

The teams involved in the creation, adoption, and application of Nebula are 100% remote across four separate timezones within the US, so coordination is vital.

Nebula is working towards supporting the first version release of ADT’s agnostic smart home platform (ADT+) in mid-2022. This project will target our existing DIY platform (Blue by ADT) and transform it with a complete rebranding effort, the addition some newer, more modern UI components and interactions, and functional integration of Google account linking and adding/pairing of non-ADT Nest devices and technology.

We planned to build our own, internal site to host Nebula, but due to a resource (people) deficit, we’re using Zeroheight as the near-term solution to stand up the system we’ve crafted in Figma.

Working Process + Actions Taken

We approached our design system using Andrew Couldwell’s “Laying the Foundations” and Brad Frost’s “Atomic Design” as the foundational points of reference. 

One of Couldwell’s focuses is on the importance of advocacy and buy-in of the system. Since systems design thinking was something new for ADT, we would have to strategize on selling the idea to the organization, especially around value and utility. That green light would launch the next step for identifying and crafting the foundations. There we leaned on Frost’s paradigm of “Atomicity” to solve for the holistic challenge of components that would define our future products.

I assembled a small, tactical team of UX designers to map our structural needs while performing some competitive analyses. We focussed on 30 established, robust design systems currently supporting popular technical products (Google’s Material Design, Apple’s Human Interface Guidelines, IBM’s Carbon DS, etc.) for best practices, perspectives, and modeling. 

Once we completed the analyses, I outlined the project goals in a strategic proposal using our gathered data for leadership to green light so our team could progress and scale as needed. The business approved the ask quickly. 

Constructing a foundational design tokens document was a critical, prioritized next step. Without it, Nebula was dead in the water. To get this off the ground, we had to collaborate with our internal Brand team to confirm and integrate newly crafted branding guidelines (which, at the time, were still incomplete, so we had to escalate). I held multiple empathy workshops with cross-functional teams (UX, Engineering, Product) to align with Brand and get their feedback on the best ways to integrate their newly crafted guidelines into Nebula and help define the tokens.

Guiding principles were an equally critical need. I put together standards that served as a “Northstar” to guide the system and team. We introduced rules for design, color, typography, motion, content, layout that anchored our foundations and served as fundamentals.

• Established a design system manifesto—“pillars, not built on sand” - positive outcomes over cool features; empowered teams over top-down decision making; customer needs over internal priorities; shipping to learn over shipping when perfect;

• Guardrails for sanity—don’t attempt to “boil the ocean” - we can’t do everything all at once, so establishing a working roadmap of priorities that can be tackled in a reasonable timeframe;

• Finite brains—“Neanderthal Theory” - there is a limit to our skills and knowledge, so we need to plan, prioritize and scale accordingly;

• Stay ethical, be mindful, have purpose - contributing to society over winning at all costs;

• Embrace a community mindset, but leave the ego at the door - design systems are crafted for everyone involved in the product (creators and users alike), but we need to work together and share a unified mental model with the customer in mind, always;
  

Over the first month, we mapped a logical Nebula structure, created a priority list of atomic elements, started a detailed documentation cadence, and with the help of our UX team’s scrum master, established a “sprint” model to tackle the creation of the foundational parts first. After that, we created all components in Figma and crafted an initial UI kit that contained those primary foundations we targeted. Figma was the ideal design tool since it is cloud-based (which drove collaboration), easy to scale, and built on the principles of systematized thinking.

Accessibility was nascent for ADT, yet a primary need within our product organization. We factored this into the component creation with considerations like contrast, pattern focus order, and affordances for screen reader technologies — and was one of the first teams to meet WCAG 2.1 compliance standards for the organization to date.

Early on, we recognized that learning about design systems across teams was essential. So we created robust education documentation based on our market research and set up recurring “demo” days to walk cross-functional teams through the various value props and essential tools Nebula would bring to the product organization, springboarding its software maturation model.

I secured cross-functional team leads (iOS, Android, Web, and a fourth “web adaptive” that supports our internal-facing apps) from the engineering group to fold into our UX team already crafting the system. I then put together a strategic, remote “war room” approach to best embrace and deliver the work and meet deadlines—where “We fail learn fast”. Finally, I proposed timelines for 2021-2022, set recurring stand-ups and reviews, and created a centralized Slack channel feedback loop to capture active, honest dialogue, and encouraged sharing that promotes continual ideation. 

Nebula has a mobile-first prioritization to support the ADT+ application development lifecycle and release schedule, and the first official release (v1.0) occurred in May of 2021. Soon after, I instituted a monthly “Lunch + Learn” series (with sessions like “Understanding Spacing Tokens” and “Accessibility: What a Design System Actually Covers”) that takes deeper dives into different core design system foundations—their purpose and functionality—and how they interrelate.

In addition, we added an “Anatomy, Specs, and Behavior” section within Nebula—where the design tokens and component annotations would be married and provide clear guidance for both designers and developers alike. 

As a future utility process add-on, we are in the conception phase of a component spec tool solution in Figma (possibly a future plugin?) that designers can use to document components with an engineering-first mindset.

Outcomes

Some of the most noteworthy results of this project (so far!) include:

• Better communication and collaboration with the development teams

• Single source of product truth

• Faster builds and extra time to dedicate elsewhere

• More efficient and focussed product development lifecycle

• Greater design voice in the organization

• Product mindset maturity
  
  
  

Takeaways + Challenges

Nebula still exists within Figma and hasn’t fully transitioned to Zeroheight but is planned for a Q2 2022 rollout. 

Our cross-functional teams collaborate daily on component reviews and integrations into our various codebases through Slack. In addition, the mobile dev leads have taken the reigns to become system evangelists. They have frequent learning sessions with their engineering teams to bolster the adoption and fill knowledge gaps.

The biggest challenges we have (and continue) faced exist around:

• Comprehension - What is a design system and why would we use it?

• Adoption - Embracing it as a fundamental product building tool with an accompanying mindset

• Usage - Integrating it into to the product development lifecycle, ultimately improving process for the sake of the user. Change is not always welcome

• Advocacy - Collecting data points on the system, converting more non-designers into evangelists, and securing resources over time from the organization

Nebula still has a bit to go before a plateau with its component and token libraries. We’ve established a ticketing process for handling identified gaps that provides a queue submission directly into our channels (Slack and Jira), and keeps accountability and prioritization in focus. Still, its tremendous growth within a relatively short time (with a small working support team) is noteworthy and a collaborative win for the product organization.

We still face a significant battle around acceptance from the engineering and product teams, and ultimately breaking from legacy processes. We predicted the front-end developers would understand the value of the utility and embrace it as a solution that makes their work more efficient and consistent for the sake of the customer. Feedback has varied, but the recurring "theme" has been an unwillingness to change their existing process to something new regardless of the benefit. One result is that we continue to have UI gaps across some platform builds—inconsistencies with the components and tokens—resulting in some product builds that still follow older code modeling.

We're focusing on anchoring a dedicated "evangelist" on the design system team to serve as a conduit between teams and onboard non-designers through a direct "education" model. I’m also conducting “Puzzle Workshops” with new front-end developers where they’re time tasked with building multiple, connected app screens in Figma using Nebula’s components and related guidelines. This has proven successful with early adoption and comprehension for those unfamiliar with design systems. It quickly acclimates the developers to Nebula, and forces them to get their “hands dirty” piecing screens together outside of the code, giving them a more holistic context to this shared ecosystem tool.

Team scalability to best support Nebula’s growth from a resource perspective has been an additional struggle. We have plans to boost our numbers in 2022, but it’s a resource drain until that happens and the speed of delivery of new components and tokens is impacted.

The beauty of an extensible, foundational utility like Nebula has made it an anchor for our tech triad (Product, Engineering, Design). Nebula keeps us curious, and that’s crucial for product innovation. It is a motivational example of when proper planning meets passionate minds with an eye for consistency through systemization. Nebula’s future is infinite.

© 2024 thehaupthaus. All Rights Reserved. Designed with ♥️🚀🦾 in the Philly 'burbs.