Atlassian marketing design system

The problem

Atlassian’s digital properties–including Atlassian.com–were owned by different teams driven by different OKRs, and therefore, competing priorities. There wasn’t a consistent end-to-end development experience, which often extended deadlines, expanded scopes, and caused cross-team friction. This led to short-term solutioning, which in turn accumulated tech debt. Forcing all-hands to scrub and update the websites biannually disrupting roadmaps and annual plans.

Scope creeped.

Deadlines were pushed.

And team animosity grew.

Success metrics

Among the organizations, there were two types of squads: Agile and Kanban.

The Kanban teams wanted to have 20% more completed tickets by the end of the quarter. The agile teams wanted to have each team scope their projects more clearly for  an accurate burndown.

The biggest opportunities for deliverables were to provide an easily accessible single source of truth that both developers and designers could reference. This would entail a comprehensive pattern library with thorough documentation, including a status tracker on missing or incomplete components that was regularly updated.

The next opportunity would be in establishing consistent rituals for designers and developers to review work together early and often. We also wanted to have a quarterly meeting cadence to determine the direction and needs of the design system.

Pattern library improvements

I gathered representatives from each team to champion, evangelize, and reinforce the new, evolving process. This became a new working group. 

• I established a weekly, open project review for designers to consult with developers to identify technical limitations or justify scope changes and pivot accordingly.

• Developers held their own regular code review to minimize future tech debt and eliminate one-off components that resulted in biannual site updates. 

With these efforts we were able to comprehensively document all available components and align the available designs with the code more directly.

I constructed a prioritized roadmap, which would be revisited by the teams quarterly, and found opportunities to build new additions into the pattern library into concurrent projects capacity.

Process improvements

The execution

Single source of truth

Previously, the understanding of available components were distributed across different css files, art documents, or were brute forced through on a project. We decided to build the complete pattern library–including constraints–within Figma symbols. This allowed for rapid prototyping and more obvious signs of deviation. I was able to use Atlassian’s own tools that the teams were already familiar with to detail each component, process, and communication channels. With Confluence, I relieved a lot of confusion about the functionality, the limitations, and the development status of different parts of the pattern library. I detailed the use cases, the contexts in which to be used, the extensions for each component, and links to the code repository for onboarding developers to access.. I made sure to have office hours and chat channels open to answer questions or provide any help I could.

Evangelizing

The team and I had no intention of sending a memo and calling it done. I established shared expectations for future processes, rituals, and relationships. I was still the prime point of contact, but I had many more invested individuals distributed across the organization to champion the marketing design system’s continued evolution and maintenance.

I developed an onboarding process for all new and existing designers and developers to make sure each role had what I needed to do their work in a way that wouldn’t hinder any of their collaborators. I shared this information by visiting each team’s weekly meeting to share the new practices and how and why they were adopting them.

After the initial information sharing, I designed and facilitated a workshop that would go into more detail about the roles and responsibilities of designers, developers, and PMM’s. I included an empathy building exercise that exposed the gaps of each other’s expectations and approach, while encouraging more cross-team communication.

Outcomes

Design systems are more than a sum of their parts. They are an ever-changing, organization-wide effort. Without a community of support, more tech debt is accumulated, work is more obfuscated, responsibilities can be less clear. On smaller teams, it’s possible to function without a design system. However, when it’s time for that team to scale, resources and time are more scarce and the work and tech debt can become unwieldy.

I delivered an accessible single source of truth, recurring rituals, clear practices, and better communication between PMM’s, developers, and design teams. The Kanban teams increased their capacity and completion by 31%. Additionally, the agile teams began achieving their burndown much more consistently than before.

In terms of scaling, it accelerated the timelines and reduced the effort to incorporate the future digital properties of the companies Atlassian acquired, such as OpsGenie, AgileCraft, and Code Barrel, for which I led the design migration efforts. I also collaborated with the Trello team to integrate their unique brand under the Atlassian umbrella.