Jira Content Design System

Led the creation of ready-made content components in our Jira Figma library, otherwise known as the Jira UI Kit. Content components provide approved, accessible and localisable content for key design components in Jira.

Problem

While the Atlassian Design System (ADS) provides overarching content guidance on writing for any Atlassian product, it can often lack the required nuances for a specific product.

Both Jira content and product designers weren’t finding adequate guidance in ADS to craft content for Jira, meaning they needed to spend time reaching out to the Jira content design team for alignment. I identified a need for Jira-specific content guidance that designers could easily access when writing in-product copy.

Approach

01. Aligning with design leadership

Before I kicked off, I knew I first needed to secure support from senior design leadership for this initiative. There was no point introducing a new set of guidelines if design managers weren’t going to help promote this to their respective teams. To get leadership approval, I paired with my lead content designer to create a scope page that detailed the need for content components, what they could look like, and how they fit into our overarching content design model at Atlassian. We also estimated the required resourcing to complete this work before the end of the financial year. This scope page was then presented at a Jira design review, and we received approval to move forward with this work.

02. Building content components

I then turned to the creation of content components. I was able to get usage data from my engineering team on which design components were most utilised across Jira product experiences, as well as anecdotal data from Jira content designers on which components tended to have the poorest quality of content. With this data, I was able to build out a prioritised list of components to create. At Atlassian, content guidelines exist largely as standalone Confluence pages that designers refer to as they built their designs in Figma. Because these guidelines were intended for both content and product designers, I decided to build the content components directly within Figma. This allowed designers to avoid switching between tools when designing, and to directly copy and paste assets into their own files.

Good ready-made examples: examples that can be directly copied and pasted into designs
Bad examples: examples that visually demonstrate common content mistakes
High-level template: a template that outlines the structure (word length, punctuation, messaging) of a design component, enabling designers to write components from scratch when there aren’t already relevant ready-made examples
Accessibility annotations: pre-filled accessibility annotations for the design component, providing key elements such as heading ranks, aria labels, alt text and links.
Guidance: a set of guidelines on what to do and what to avoid when using a particular design component, as well as general content guidance for all design components

Error flags in the Jira UI Kit

With guidance from my product design partners, I upskilled in Figma to build the components myself. Once I had an initial draft of a content component, I would share it with the wider Jira content design team for feedback. This meant our team was aligned on content decisions, and also helped identify other scenarios that a content designer might use a component for. I then sought approval from our a11y and localisation teams. Ensuring components were both a11y and localisation friendly meant that designers using these assets didn’t then need to undergo their own approvals process.

03. Scaling across Atlassian

Once I had added several content components to the Jira UI Kit, I start promoting them to the Jira team, as well as teams outside of Jira. I did this by creating a Confluence page and recording a Loom video to explain what content components are, what they can help with, and how to use them. I also presented at a content design “lightning talk”, promoting awareness of this initiative to content designers across Atlassian. Additionally, I hosted a workshop with the Jira content design team to walk them through the process of creating content components, so that they could contribute to the Jira UI Kit. This allowed the continual growth of the Jira UI Kit, and its future viability.

My content components were also leveraged by the Content Ops team at Atlassian to create an AI content writing agent. This agent uses the guidance and structures I specified in the Jira UI Kit to review and make amendments to content drafted by designers.

04. Assessing value

My lead content designer and I then sought to assess the value of content components now they were fully embedded in the Jira UI Kit. We interviewed 10 designers from Jira in total, comprising of 5 content designers and 5 product designers. We asked these designers to complete pre-determined tasks and then rate how easy they found the task on a scale of 1-7, otherwise known as an an SEQ, or “single-ease question” study. Overall, core tasks such as using a ready-made example and writing a component using the high-level template performed well, surpassing the minimum average usability score of 5.5.

Impact

Improved designer efficiency by minimising approvals and alignment processes

Introduced a single source of truth for writing Jira content.

Increased content consistency and quality across Jira product experiences

Reduced design debt by making it easier to ship approved content in experiences

49.85% increase in component usage from Jira UI Kit (511 components downloaded)

142.31% increase in teams’ usage of components (used by 63+ different teams