Autodesk design system

Background

Autodesk is a software company that helps people make the world around them. Back in 2018 Autodesk aquired PlanGrid, BuildingConnected and more to help build out a constructive group called "ACS".

The Project

In 2018 PlanGrid joined BuildingConnected and BIM360 in forming the construction group within Autodesk. As a result, there needed to be a single unified design system for the new group and this project was to establish that.

The Problem

Unify 4+ design systems across 3+ companies in around a year timeframe.

My Role & The Team

Lead designer working with 2 designers, 1 PM, 15 engineers from 2019-2021

Background

What is the Autodesk Construction Cloud?

Autodesk construction cloud is the new unified solution from the “Autodesk contstruction solution” team at Autodesk.
It is a single unified tool that connects all parts of the construction process together. Such as pre construction bidding, pre construction estimation, build execution, change orders, project management and all the way to close out and asset management post handoff.

From acquisition to unification

After the acquisition of PlanGrid, BIM360, BuildingConnected, and Assemble in 2019. We kicked off unification efforts to have a single unified solution for our customers. This spawned the need for a single unified design system in order to build cohesion across the portfolio.

Examples of the various products before unification

Autodesk construction cloud is the new unified solution from the “Autodesk contstruction solution” team at Autodesk.
It is a single unified tool that connects all parts of the construction process together. Such as pre construction bidding, pre construction estimation, build execution, change orders, project management and all the way to close out and asset management post handoff.

Core problems needing to solve

- Unify 3+ design systems in to one
- Establish a effective contribution model for the growing team
- Establish a process to build cohesion throughout the product

Setting a vision

Clarifying our audience and role

One of the first things we did as a team was establish who are we going to serve and how are we going to serve them.
‍
Instead of trying to cater to all the orgs at Autodesk, we decided as a construction org to only focus on our newly formed group instead of trying to support other orgs close to us. Serving them would come later. 

To give a sense of size, our org was about 1600 people with 1000ish R&D team members
We also decided we need to keep our platforms across devices such as iOS, Android, Windows and web.

Designing for cohesion not consistency

We also evaluated and aligned on was our take on “cohesion” vs “consistency”

Sometimes when speaking about design systems the word “consistency” usually comes up But consistency as a narrative is limiting, especially to our customers. And we don’t want that.…we wanted to be consistent, but only to a point – when we strive more for cohesion and retain flexibility, we can be more efficient to each unique user’s workflow.- Also the factor of our effort to unify our various products in 2 years, being more accepting of cohesion is more achievable and realistic given technical underfoot of getting our products together

Aligning our visual language

We explored various degrees of separation but landed on staying as close as possible in terms of visual language, but forking components to serve our diverse set of needs and velocity we were looking to achieve. With the goal in mind to contribute back when ready.
‍
We also looked to identify how will we work with Autodesk’s existing design system and visual language (HIG), while keeping up with our desired velocity and unique set of needs as a org.

Collaborating on a vision

Once we felt we had a strong foundation in place and assets that the team could play with, we created a “design jam.” This included teams across 3+ main gems, 100+ designers for 2 full days. During this time each designer took the initial set of assets and explored how the current design system components could work for them and where they failed.

This providing us endless insights into what we needed to improve and prioritize.

Planning

Establishing a Definition of Done

The first step was establishing a definition of done where as a org, we can all align on expectations for the release.
‍
We broke our definition of done into 4 key buckets, Gold Steel , Aluminum and F (not acceptable).

Things marked as gold are items that we all should just be using component wise. This was things like buttons, typography and colors.

Steel is where it can be using the components but at very least look and act the same. Examples here were like trees and tables. Complex items that may need to align to customer goals more then consistency.
‍
Alluminum is where it looks the same but doesn’t need to really act the same. Examples such as patterns or complex interactions.
‍
F, is just an assessment where things failed.

Tracking our progress towards a v1

To keep the entire R&D org up to date as to what has been done, what is in the works, and what is coming up. We created a tracking doc that collaborative the design system team would update statuses and then broadcast out in order to make sure feature teams where aware and could plan work accordingly. 

Executing

Guidelines and specs

After we finished our XD vision exercise, gathered all insights from the various teams and began setting a foundation for outlining how we will execute components for teams to use. 
‍
It was now time to get our component libraries fleshed out in great detail so our platform engineers can provide the necessary components to the feature teams.
We focused on our core “atoms” first such as color and typography, and even design tokens. Before moving on to core components such as buttons, text fields and navigation. This following the definition of done categorization
Ontop of building out the various components, we also set out to unify and build a single repository of design guidelines our team can consume.
‍
We felt these were crucial part of our initial release as we saw so many similar questions arise and engineers stuck on understanding component logic without them.
‍
These were both new set of guidelines written as well as unified versions of our company wide guidelines, and guidelines from the 4 unified construction design systems.

This was a great area of collaboration as our various team members drove a majority of their development, especially on the pattern documentation side.

Icon Library

One of my personal favorite projects was building out our unified icon library. For this library we built off what we had on the PlanGrid side first. I then partnered with the teams to determine gaps and worked to fill those gaps so we can have an all encompassing library that lifts our cohesion across the products.

Mobile playground app

For our mobile libraries we built demo apps to QA and test components in the field. This helped increase the quality of our components both from accessibility and usability to interaction and cohesion.

Establishing a collaborative process along the way

Onto of building out components and documentation we also built a strong collaborative culture where we did things like “Figma office hours”, “Design system office hours” and “Design system council meetings” where weekly we open our doors and discuss top topics relating to the design system that week.

Polishing

Creating a way to track internally

After launching v1 of our unified solution, we on the design system team created and implemented a tracker to see component usage across teams and repos. This helped us understand team behavior and where we should best spend our time in effort to get all teams using components more.

Auditing the initial alpha release

Later on in mid 2020 (a year going into unification) we were marching towards a initial alpha release. and as a result we new we needed to set aside time to evaluate and QA the work done so far on our product in order to ensure what our initial set of customers would see was top quality and what we have envisioned
‍
We established a thing called “cohesion reviews” where within the entire R&D org, we focused on  a “theme each week. Such as Layouts, navigation ect. During that time we’d audit the product, note issues, note what next steps were, and worked with each team to get fixes into there sprints. This of course with the help of leadership making it mandatory to resolve before any feature work is started.
‍
This went on for several weeks till it was time to release our alpha product.

Setting a strong foundation going forward

After launching v1 of our unified platform, we knew we needed a process going forward to instill strong cohesion without heavy platform involvement. We called this the “Experience Quality Framework.”This project was about creating a space where anyone in the company can audit and assess areas of improvement. If something failed to pass during a audit, it would be given a automatic priority assignment which bundled up to areas of focus in terms of what teams should focus on and what platform team will draw focus on.To the right you can see a example checklist template and the dashboard we created in Confluence that showed if a team was doing okay or failing in terms of cohesion.

Outcomes


In late 2020 we finally launched our unified product to the world. The hard work of over 1k team members across the globe, 7+ acquisitions later, and countless hours.
This unified solution focused on simplicity, customization, and innovation.

Accomplishments & Learnings

1) Launched a single unified platform from 6+ acquisitions in just about 2 years

2) Built a platform design team of 3 designers, 4 including myself

3) Instilled a self sufficient cohesion process going forward
‍
4) Established a shared understanding across the org on what accessibility means to the org via a series of shareouts
‍
5) Planned, advocated and Released several accessibility initiatives to better support our various users
‍
6) Built and distributed tools for engineers and designers to better create accessible experiences without much involvement needed.

Explore more

Evernote Collect

Experience Design

Autodesk Design System

Experience Design

Gantri Marketplace

Experience Design

Misc Branding

Branding
HomeaboutDribbbleTwitterInstagramLinkedin