Design Pattern

OVERVIEW

ROLE

Design Pattern: A collection of UI elements, code and their variations, patterns (both design and development) and standards, with the aim to improve consistency, velocity and quality of digital products and the product design process.

UX Designer
Research, Interaction, Visual design, Prototyping & Testing

Background

DAT's products were originally created by separate third-party developers. Each application was built with different development philosophies and aesthetics. DAT's suite looked like a collection of unrelated programs. The different frameworks and backend languages made implementing improvements and maintenance a nightmare.

The Challenge

I love working on green pasture projects; it's always fun to innovate. But the realities of large scale development and rapid deadlines requires a unified system of components and patterns which are already refined and validated. This enables designers and developers to avoid repeating themselves, freeing them up to solve bigger problems and produce higher quality work.

As our products grow in size and complexity, we find that our components need to adapt for different use cases. The library needs to grow organically, changing as products change, but maintaining a core consistency across all products. A Design System is the most efficient way to organize and distribute designs, code and usage guidelines.

Consistency creates fertile soil for innovation and creativity.

Understanding the Problem

My first step was to review all DAT products and their style guides. I created a small team around the library project and we interviewed designers, developers and product managers to determine our company's unmet needs. A key part of this process was to listen to team members and communicate how a design system could address their pain points and improve their workflow.

Designers knew that redesigning common patterns from scratch was a waste of their time and resources. Developers knew it was overly time consuming to build and maintain different patterns for each product. No one knew which designs were cannon. The lack of shared language often led to confusion, strife and unrealistic expectations.

Design Approach

I facilitated workshops with the design team to define the technologies and tools we could use to improve design workflow. I also worked with lead developers to determine what the company-wide core technological stack would be. A major request from development was to streamline the asset handover process. Most importantly, we needed to create a single source of truth for every design.

Design's first step was to create a grid system and breakpoints to create intuitive layouts while maintaining consistency across our products. The resulting library needed to impliment standards for color, layout and typography styles for quick and easy customization.

We ultimately decided on a 16 column, 8pt grid system. Our designs going forward were created with a modular philosophy and responsiveness in mind.

All tools designed as flexible modules for easy rearrangement.

A Shared Design Language

The core philosophy behind any design system is Atomic Design. We break all web elements into Atoms, Molecules, Organisms, Templates and Pages. Frameworks such as React lend themselves to envisioning our projects as complex interfaces comprised of small building blocks.

It was essential that the library get buy in by every team at DAT. The eventual goal was that any developer, new or old, could plug into another team's product and feel confident that they had the baseline knowledge and tools to start working.

The library provides developers with an intuitively organized library of components of every level of complexity, from buttons to headers to full modules.

We wanted our index and groupings of elements to follow common best practices, but it quickly became clear that the library needed to also honor the historical systems used throughout the company. By interviewing our internal staff, we created a hybrid system that was popular with both stakeholders and developers.

Documentation

A pattern library is only as good as its documentation. If the library is to be a useful tool for developers, designers and managers, it must communicate how context effects each element and show best practices of how to impliment it. Good documentation helps internal and external teams quickly adopt the platform, and work in harmony with each other.

Within the library, we wanted to make it clear to designers and developers why certain decisions had been made. Everyone has their own way of working. We felt it was important to explain what was fixed, and the risks involved in changing certain aspects.

I asked for input from multiple engineering leads to ensure the documentation was consistent and easy to understand.

Library Design

A library that is difficult to navigate is useless. We focused on intuitive layout, using icons and color to identify categories and a breadcrumb so the user always knows where they are in the library. We used simple, uncluttered icons while maintaining color variation between sections.

The design team uses the library differently than developers, who use it differently than stakeholders. The design system's landing page provides three gates - one for designers, one for developers and one for managers. The guidelines behind each section are tailored to keep these sections succinct and relevant.

I implemented a floating left-side navigation so the user always has a visible index, leaving room to add more components as our products grow. Each title page contains quick links to its subpages to improve findability.

Outcomes

The DAT pattern design system brings together design and development values. It provides usage guidelines. It serves as company memory, a pathway for evolution and a teaching tool for onboarding new workers.
Upon launch we showed development time reduced by 75%. Designers could now create wireframes at 10 times the speed previously possible. Adopting the system enabled the teams to rapidly prototype new features, improved the onboarding process for new designers and developers, as well as speeding up the handover process.