Post Image

How Atlassian Brings Content to Life in their Design System

Carla Hale
By Carla Hale on 12th March, 2018 Updated on 22nd April, 2020

    Design system teams everywhere are having to decide the role content should play in their system. We sat down with Sean Curtis (Senior Developer) and Tony Starr (Lead Technical Writer, IX Platform Team Lead) of Atlassian to look at the unique ways they are incorporating content throughout the organization.

    The role of content at Atlassian

    Atlassian Design System Writing Guidelines

    Atassian Design System Writing Styles

    Within product teams around the world, it can be all too common that content gets relegated to its own, small bucket; just the words. However, the IX team at Atlassian has a holistic, cross-functional, and cross-team approach. Tony states, “Working in the Atlassian Design Guidelines, our design system, content is the main focus of everything. The point of what we do is to make things easier for teams. We aim to take the chaos of everyday, distill it and present it in a way that is useful to them to GSD (get shit done). We’re very team-oriented and it’s one of our philosophies.” Tony’s IX team is a platform team serving the entire organization. From their perspective, content is everything, from the top of the funnel all the way down. This manifests in the UI in semantic colors, animations, and interactions, to name a few.

    “When the latest version of the ADG (Atlassian Design Guidelines) was rolling out, Product and Brand were in the same room working on these principles together,” Tony said. Specifically, they were focused on being empathetic so that every interaction point was appropriate to the user experience. “We weren’t concerned as much with saying how people should feel, so much as how they actually feel.  We came to view our products as members of the team. When a team has a win, we celebrate that win with them. When they are stuck, we acknowledge that as well. This is manifested at all points in the experience, but starts with content.”  Tony said. Workshopping the system, all of these team members would come together, moodboard the system, outline the emotions, principles, and philosophy.

    Atlassian’s definition of their brand tone and voice serves as the gauge by which they measure everything they produce. Their content personality is “Bold, optimistic, and practical (with a wink).” While other design systems are decidedly visual, Atlassian’s has content at its core. Sean explains that Atlassian starts first and foremost with the principles of the system before they touch patterns, components, or code.

    Content at the core

    Rather than content being an afterthought, it’s at the center of what Atlassian stands for, present in the personalities and paradigms of the individual team members. Sean explained how the frontend team has an innate focus on content, leading to code and documentation that is inclusive, well-documented, and accessible. “Not knowing the content you are designing for is like making a suit without the measurements of the person”, says Sean.

    TThe personality traits are baked into each and every component at the building block level, and then when the pieces are put together (component + pattern + UI copy) using the principles as well. The designers at Atlassian always have the voice and tone guidelines in the back of their minds as they create, asking themselves, “How is this bold? Should we be winking here?” It’s also about knowing when not to wink, such as a user running into an error state, even developing  a system called “Voicify” that has sliding scales to help determine how much wink, how bold and how optimistic to be in any given interaction (for copy).

    The IX team has the challenge of naming and documenting the whole platform. Sean explained that publishing a component or system name means it will have cross-platform implications, and it will be used this way forever, comparing it to setting legal precedent. Future changes to names will cause it to break in products across the org. This leads the Atlassian team to be incredibly thoughtful and judicious in their naming rubric. It’s extremely expensive from an adoption and knowledge standpoint, and can cause misalignment amongst teams. Additionally, the platform team is tasked with ensuring that the guidelines and components can work across products, from Bitbucket to Trello. that are made in product decisions for Bitbucket have to apply for Trello as well. Alignment and adoption ensures ensures consistency and allows teams to go faster. Finally, the documentation around components may include even a cross-team marketing and sales aspect—convincing the team why they should use these components and steering them in the right direction.

    Naturally, this strong level of permanence leads to the teams being incredibly opinionated about their naming and documentation standards. Tony explained that during sparring sessions, it forces the teams to empathize, and to try to deeply understand each other’s positions, in addition to coming prepared to make their case. With each individual coming to the table with such strong standpoints, it pushes and excels the platform further. This healthy challenge causes the Atlassian naming and documentation conventions to be even better.

    Through that work, Tony’s team is focusing now on providing guidance, advice, and in the future, hopefully core standards as to how teams should think through naming components. For example, Sean and Tony explained that it cannot be based on appearance. Overtime, the appearance can (and will) change. Instead, they focus more on functionality and behavior and how it serves the end user.

    Functional frameworks and workflows

    The IX team at Atlassian supports the entire organization, including the ADG team and the multitude of product teams. So how do they all come together? IX focuses on being a content ambassador within the organization, hosting bootcamps and training sessions around content. Tony stated that there is growing relationships with other content producing teams. People care about content, but managing across the org is difficult. But all-in-all everyone is receptive, has deep care and wants to make “all the things” better.

    Sean and Tony told us about their rotational programs, specifically around content – writers will sit with the ADG team, participate in sparring sessions around naming and documentation, and even lead cross-team workshops on how they should think through content guidelines as it applies to their teams.

    Interestingly, the Platform IX team has a very different workflow and style compared to other Atlassian teams. They do not work in sprints, but rather use Trello cards to collect and organize tasks. Tony’s team needs to prioritize and shift constantly, making every day pretty different from the last. This allows the team to keep a constant tab on cross-platform needs. Somedays this will be sparring sessions, working with designers on on-boarding flows, or sitting with product writers to get the voice and tone perfect for a piece of copy. This keeps the team nimble, flexible, and truly cross-platform.

    As a small team, they have to balance how they get things done and also how they educate the product teams accordingly. In the future, a self-serve accompanied with more robust education is what Tony envisions as being critical to full adoption across the organization.

    How the Atlassian customer interacts with content

    Like any good interactive team, the IX team has the responsibility of how the end user interacts with the UI in relation to their own content. Incredible thought around emotion and feelings have gone into how the user will feel when writing out the description of a Jira issue, or how they add content to a Confluence page.

    Tony explains that they strive to have the UI “disappear” to the end user as they add their own critical content across it. Atlassian aims to make these tools ones that they themselves want to use, so empathy for the end user and their emotions using the products is paramount to Tony’s team.

    Another shift that Atlassian has adopted this last year is viewing components and content in the exact context a user would see it in. Sean explained “The absence of context is where patterns go awry.” The team strives to look at the whole flow and the whole page when making these critical pattern and component decisions.

    Conclusion

    The content centric approach Atlassian takes ensures that not only is ADG a consistent and flexible system, but one that truly represents the personality of the brand in meaningful ways across the entire product suite and ultimately is useful to what the user needs and expects from the product.

    Interested in being a designer or in designing content at Atlassian? To see available positions, check out Atlassian Design Careers.

    Still hungry for the design?

    UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

    Start your free trial

    These e-Books might interest you