When I was given my first assignment at Cisco Umbrella I immediately felt the pain of having an ill-executed design system. Information was often stored in the heads of individuals in the team and shared verbally. It was a regular occurrence that designers would present designs in critiques and only then discover that they were not referencing the most current components. It was understandable, given that the design system was scattered across different files and folders which were often inconsistent within themselves and the guidelines for use were nonexistent or vague at best. Designers would use their best guess as to which things they should reference.
As the team grew larger and more distributed relying on tribal knowledge was proving even more insufficient. With no single source of truth to assist in awareness of existing patterns, designers submitted mismatched designs. These began to make their way into the application (for example, there were seven different versions of an alert banner found in an audit) resulting in effecting how users experienced Umbrella.
I proposed a process for auditing the system and steered the team toward sessions based on the Atomic Methodology proposed by Brad Frost as a starting point for organizing the design system. A shared slide deck was used to capture screenshots, gifs and note where we found the component or pattern. From there we were able to identify areas of alignment, inconsistencies, and suboptimal designs within the design pattern library (dpl), the UI Sketch library and the Umbrella dashboard.
Once the prevailing components and patterns were identified, named and grouped, I created a spreadsheet that organized ux assets, noting variations, component statuses and documented usage. While the spreadsheet was valuable, we all recognized that long-term we would need to create a more sophisticated method of tracking components and sharing guidelines.
What we really needed was a website, but it was not possible to have a dedicated frontend resource to build and maintain it from scratch. I partnered with a frontend engineer in reviewing wikis and Confluence, but these were all cumbersome, slow and inflexible. I was able to source Frontify, a tool for creating style guides, to host our website. This eliminated the need to depend on an engineering resource to update the content and became something that the design team could maintain ourselves.
Umbrella Design System Website
A JIRA board was created to track progress on changes to the design system. The spreadsheet content was transferred into the new Umbrella Design System website and has since been expanded upon. The Umbrella Design System Website is intended to facilitate the process of evaluating, promoting, updating and deprecating assets between the UX team and the DPL team and aid in bringing consistency to the application. I created sections for each arm of the Umbrella Design System and an FAQ.
UX Guidelines: The purpose of the UX Guidelines is to provide documentation of rules, behaviors, naming, descriptions and statuses of the various elements, components and patterns used in Cisco Umbrella.
UI Sketch Library: The Umbrella UI Sketch Library is a set of Sketch symbols used by the Umbrella UX Design Team to create user experiences. The UX assets are based on the Atomic Design System. In this section of the website the user is presented with a step-by-step guide to getting started with the UI Sketch Library, and supported plugins to increase efficiency.
Developer Resources: Design Pattern Library and Core CSS are the primary references for UI engineers who are building user interfaces for Cisco Umbrella. The developer resources are owned by the DPL Team, which is led by engineering.
Copy Guidelines: The Style Team is a cross-departmental team of writers and editors that is chartered to set and maintain standards of readability, usage, correctness, and consistency for Cisco’s technical content. The Cisco Technical Content Style Guide provides writers and editors of Cisco’s technical content with style guidelines. Adhering to the Cisco Technical Content Style Guide ensures that Cisco’s technical content across all business units remains consistent in style, organization, and terminology.
FAQ: This document is collection of the responses to the most frequently asked questions about the Umbrella Design System. It also includes the ability for users to submit new questions for the FAQ.
Core Design System Team
Supporting this project and it’s processes are three team members — myself, another UX designer and a front end developer. Together we make up the “Umbrella Design System Core Team.” The front end developer manages and keeps track of updates to the Design Pattern Library and Core CSS. In order to reduce error and confusion that would occur with multiple contributors, we have designated one designer to make all necessary updates to the UI Sketch Library symbols. Meanwhile, I write all UX guidelines, manage all updates to the Umbrella Design System Website, and the FAQ in addition to administrative tasks.
Design Operations & Administration
I recognize that the Umbrella Design System is, at it’s core, a service design project with our core users being the UX product design team and frontend engineering. It was important to communicate a clear process for promoting new components or updating existing ones. This not only demystified the process but made it accessible to all members of the UX product design team.
It was vital that we shared our processes, measured engagement, tracked progress, and maintained active communication. As such, I implemented various measurement and tracking tools, shaped our internal ceremonies, developed channels for knowledge-sharing within Umbrella and shared detailed process frameworks and templates via our FAQ as shown below:
Quarterly Design System Engagement & Satisfaction Survey
Google Analytics for Frontify
JIRA Project Tracking
Platform Component Count
Monthly Design System Retro
Bi-weekly Design System Planning Meetings
Monthly Design System Sync Up
Bi-monthly SBG Common User Experience Meeting
Onsite Demo of Frontify App
Design System Monthly Release Update Email
WebEx Teams Design System Chatrooms for General Chat & Core Team
JIRA Bot for WebEx Teams
New Hire On-boarding Deck for Design System
Frequently Asked Questions, FAQ Submission Form
RESULTS & NEXT STEPS
In the year since it has been reintroduced, the Umbrella Design System’s latest incarnation has been received very positively from the UX Product Design Team and frontend engineering.
UX Team Stats
Perceived Satisfaction: 4 / 5
Site Usage: 2 x per week
Frontend Engineering Stats
Contribution to DPL: 23% increase
The next steps for Umbrella Design System is to continue to address our backlog, increase engagement within the frontend engineering teams and for the design pattern library to converge with the UDS Website to truly become our single source of truth. For now, the website serves as a starting point for UX product designers and engineers to learn about and engage in the design system.
DESIGN LEADERSHIP & MENTORSHIP
Due to my work on the Umbrella Design System, I have been recognized as the UX Lead for Design Systems in discussions regarding design systems for Umbrella within the Security Business Group (SBG) of which Umbrella is a part. In this capacity, I help to influence the SBG “Atomic” design system, and engage in regular meetings to assess UX assets. I serve as a mentor for junior designers within my team and a resource to veteran designers with questions regarding the design system. I also help provide guidance to peers within the SBG who are in the early phases of the developing and reassessing their design systems.
I regularly keep abreast of shifts in design systems by attending conferences, workshops, etc. and bring what I learn back to the team.
Cisco Umbrella (2017 – 2019)
Design System Lead: Frances Liddell-Rodriguez
UI Kit: Katia Guttierez
DPL Eng Lead: Zach Pride