CASE STUDY
DaVinci Design System
The redesign effort tied to, at the time, a first of its kind design system with coded components and specification nomenclature structure.
CLIENT/EMPLOYER
TIMEFRAME
March 2012 — October 2013
ROLE — SR. UX DESIGNER
UX Research, Product Thinking, Interaction Design, Visual Design, Concepting, Prototyping
TOOLS USED
Sketch, Adobe Photoshop, Adobe Illustrator, InVision
Overview
ABOUT THE PROJECT
The LinkedIn homepage team was in the midst of a redesign around 2012, and it became increasingly apparent that we needed a systematic way to guide and facilitate all the various redesign efforts that were forthcoming.
TEAM
2 Designers & 4-6 Engineers
THE PROBLEM
Initially, the plan was to use the product I was assigned to at the time, Company Pages, as a launch pad for other teams to learn from what would become the new look, feel, and interaction patterns of the LinkedIn product stack through the use of a simple UI kit and documentation.
However, through discussions I had with my manager and engineering advocates, we realized that we needed to spin up a specific effort to provide an easy-to-use and centralized system with documentation & code that would allow teams to reduce the complexity and time taken to complete a feature redesign.
6-12 weeks
PRE-DAVINCI REDESIGN SCOPING
For newly spun up redesign efforts
The challenge
Create a way for our product teams to efficiently redesign their products based on work done by the homepage team.
Speak the language
One of the first issues we had to contend with was nomenclature. Engineers speak about components, colors, styles somewhat differently than designers, and in an effort to bridge that gap we spent time interviewing various internal teams to come to a potential solution.
This led to a schema that pared down the language into easy to digest and apply verbs and terms that made sense in a human-legible way but could still be applicable and composable from an engineering standpoint.
The result was a massive success. As we defined states, components, and variants you could effectively tell a developer that you wanted a “small primary button” and the SCSS would generate on load to deliver the button style, size, and prominence as the designer requested.
Knowledge is power
As with any design system, we needed to deliver a way for all consumers of the system to know what was available and how best to use something in the system.
With no-code/low-code solutions for this kind of comprehensive documentation not available at the time, effort was taken to create UI kits for multiple platforms (Photoshop, Illustrator, and even Fireworks) and an in-house documentation site with as much up-to-date design parity as possible.
Alongside these artifacts, we established office hours sessions that were available to all teams to submit work for. The meeting acted as a review against existing patterns but also afforded us the ability to take note of new patterns and pattern merges that might be needed.
Outcomes & learnings
The effort ended up being an unparalleled success across multiple domains. Engineering teams were able to build products much faster than before, designers had fewer questions about run-of-the-mill patterns, and product owners could more predictably understand scoping and timeline as teams would have less overhead in all their respective areas.
DaVinci, as a project, also helped spin up a v2 project called Art Deco which led to the current LinkedIn visual aesthetic and patterns. The foundations laid here made it possible for massive user growth, retention, and overall reduction in user friction when using LinkedIn products.
Reduced by ~40%
TECHNICAL DEBT
These numbers are in contrast to how LinkedIn would normally have designed, engineered, and launched a product prior to the adoption of DaVinci and are estimates based on discussions with product, engineering, and design leads.
Sped up by ~35%
TIME TO IMPLEMENT
Reduced by ~30%
TIMELINE ESTIMATES
OUR SUCCESSES
Customer service tickets reduced by almost 32%; on-site phone calls reduced by 46%
New tickets showed a higher inclination towards new feature requests
CEO Jeff Weiner evangelized the design system efforts during company-wide meetings