We live in an increasingly harried and disjointed world. This makes building cohesive digital products exceptionally hard. Bridging the gap between Strategists, Designers, and Software Engineers requires a new approach to how these projects are managed. Even small teams can struggle with cohesion.
Fortunately, something new has emerged from the digital noise:
Design Systems and Design Operations (DesignOps). Like Agile methodology, a Design System provides an important framework to create cohesion across miles of code. From conception to roll out, DesignOps is the new way to set a course for creative projects that then use the framework to follow a project to the end of the line. But more than a framework, a Design System is a library of stored details that serves as a sort of style guide to bring together the front and back end of any digital project.
This article looks at the new discipline of Design Systems, and the flag carrier for this new framework, the DesignOps professional, who has one of the hottest roles in the creative field in 2018.
Let’s start with the core of the idea: Design Systems.
UX geek Nathan Curtis defines Design Systems as:
A library of visual style and components documented and released as reusable code for Developers and/or tool(s) for Designers. A system may also offer guidance on accessibility, page layout, and editorial and less often branding, data viz, UX patterns, and other tools.
The most important word in Curtis’ definition is “library.” A Design System seeks to create shared knowledge between Graphic Artists, Back End Programmers, and Front End UX Experts. It’s like a really good sub sandwich; there are layers upon layers, building a cohesive whole that together makes something consistently delicious.
Hungry?
A Design System is a collaborative set of repeatable code within a project that sets design standards via HTML, CSS, and JavaScript with documentation guidelines for programmers. It seeks to build a cohesive experience throughout the product lifecycle, bringing together people, design, and process to ultimately create a digital product.
A Design System is a playbook, really — a set of best practices that cross between disciplines to create a codified system for a digital design project. Think of it as the next evolution of a style or brand guide. But unlike an archived style guide, a Design System is a living architecture within the digital product.
The point here is that graphical projects can grow disconnected via a big dispersed team so that the vision of the agency strategist or the client never stretches across the full stack. By the end of the project, you’re already thinking about V.2 because you’ve lost something in the translation.
A Design System creates a concrete visual style and couples it to UX features such as forms, buttons, or headers to create human-centric interfaces. But it is the DesignOps professional that really creates the cohesion across the project.
“Digital means we are all remote and because of that, the pain called by poor collaboration tools impacts us heavily.”
— David Malouf
Think of DesignOps almost like a Project Manager. Project Managers are the managers of a digital design project from start to finish. By creating a Design System, they help create a single source of truth for a digital project. By serving in the DesignOps role, they nudge, they cajole, and fight to keep the project moving forward while never losing sight of the unique vision at its core.
DesignOps really has four key goals in creating the system library Nathan Curtis was so gung-ho on:
DesignOps is part of the Design Systems team — this team can wear the hat of a Designer in order to understand their conceptualization of the product. But they also must understand engineering requirements and the limitations between the Designer’s vision and what the code will really hammer out. DesignOps professionals need to be part IT nerd, part Graphic Designer, but also resident whip cracker, coach, and general translator.
That’s a lot of hats.
But without DesignOps something almost always is lost between the creative vision at the front end and the product that ultimately gets rolled out. Each iteration of the product wears away a bit of that vision until the final product ends up disappointingly myopic.
To put things more concretely, DesignOps creates the visual library or style guide with colors, conventions, objects, design patterns, and documentation. They use the Design System to map out minute detail, from the exact design requirements of a rounded edge to animation timings, and much more.
Having all of these questions answered and carefully documented means that the workflow stages will move forward much more quickly. Decisions will be faster. The work will be done more quickly without the tiny variances in brand standards that kill the cohesiveness of a digital product.
The DesignOps professional handles all technical documentation related to installation and troubleshooting. Like DevOps, they also own automation testing on the front end along with cross-browser testing, the flow of versioning, visual regression – and more.
Even small teams could benefit from Design Systems/DesignOps.
That’s because the framework provides reusable components within a digital product that saves time. The DesignOps role helps provide the guiding hand across the project. You’ll find the role helps reduce debate and helps foster collaboration – especially in the remote workforce.
Contact Artisan Talent to kick the tires of Design Systems/DesignOps. We believe it’s a necessary component of your next digital project and we can help you find the right digital professional for your company.