Writing · 2020

Design to Scale

A design-ops initiative to scale our design process across a growing team — closing the gap between an underused pattern library and the developers who needed it every day.

Role
Design ops & UX designer
Scope
Process audit, survey, documentation
Team
~28 designers, developers & QA
Tools
InVision DSM, Wiki, Microsoft Forms
Design to Scale title illustration — designers and developers working on laptops and phones among clouds, connected by dashed lines carrying icons for type, images, and messages
01

The Challenge

I was tasked with finding ways to optimize the design process. Though the prompt was ambiguous at first, it became clearer as I asked the following core questions:

“How can we maintain design consistency across multiple products?”

“How do we account for a growing team and onboarding?”

“If a new team member walked in today, how can we transfer our design knowledge efficiently?”

The core questions

02

Survey & Key Takeaways

I felt it would be helpful to send out a survey to developers and some key stakeholders to gather sentiments about our design process across the company. This was conducted out of ~28 people, a majority of them being front-end developers, followed by some information architects, and Q/A.

Survey role breakdown bar chart — 13 front-end developers, 4 QA, 4 product owners, 4 UX information architecture, 3 UX visual design, totaling ~28 respondents

Key Takeaways

  • A majority of people did not know where to find the pattern library or didn’t know it existed.
  • The library was out of date, and so they trusted the information provided at standup.
  • Many developers still prefer to speak with a designer with design-related inquiries.
  • Most people had some level of interest in design regardless of their role or involvement with designers.

Survey findings

Pie chart: 'I know where to find documentation regarding design patterns' — 21% agree, 79% disagree Bar chart: 'How do you receive updates about UI pattern changes?' — during standup 13, by reading annotations 7, don't get design updates 6, after work is done 5, word of mouth 4 Bar chart: 'When I have design questions, I prefer to:' — talk to a designer 1-on-1 19, read annotations 9, look through emails/chat 9, ask during standup 7 Pie chart: 'How interested are you in visual design?' — 39% very interested, 48% somewhat interested, 9% not interested
03

Previous Design Process

Before the change, most design knowledge lived in scattered conversations — Slack messages, email attachments, and one-off questions asked directly to a designer — assets and rationale that were easy to lose and hard to hand off to someone new.

Illustrated chat exchanges showing the old, ad hoc design process — a developer asking a designer where to find an icon, a product owner asking why a design pattern is used, and a developer digging through old marketing emails for a logo file
04

Proposed Solution

The solution was twofold: improve the communication process between designers & developers, and create a central repository for design assets and documentation. We needed a public monument (or Wiki) that team members could call the one “source of truth” for design patterns. With this approach, anyone can consult the Wiki for any general design-related questions and even find assets.

Communication strategy flowchart — demand for a UI pattern flows from designers and developers into a design pattern, through a monthly design review, into the InVision DSM Wiki, ending in a published list of bug fixes and improvements
Screenshot of the design system Wiki's Colors documentation page, showing the element color palette with named swatches and hex values in a searchable sidebar
05

Follow-Up

After I completed a competitive analysis of the tools available, I was able to get funding for this effort. I set up a Bi-Weekly review amongst designers and began auditing our library. The new process has helped designers sync their files and patterns efficiently as well as provided team members with a centralized source of truth for any design-related questions.

Four follow-up milestones with icons — acquired approval from leadership, requested for funding, scheduled design reviews, audited current design library

Audit and Presentation: Alan Gi

Illustrations: BoykoPictures

Credits

Next Project

Ink Casket

View project