Co-creating our Atlassian Design System values and principles

jennie § yip
Designing Atlassian
8 min readJul 14, 2021

--

The Atlassian Design System is powered by a team of over 30 designers, engineers, and content designers. As we scale, it becomes harder and harder to coordinate the growing team to work towards the same vision.

Currently, it’s really hard to answer questions or concerns in a cohesive and consistent manner. We often ask and get asked these questions:

  • Why are we working on this?
  • What are the design system’s priorities?
  • How do we push back?
  • Where is dark mode?
  • Why aren’t you doing dark mode?
  • Will you do dark mode?

…and the list goes on. Unfortunately, we don’t always have the answers.

To help this situation, we’ve been crafting our values and principles to align around a clear set of shared beliefs and goals. Some benefits:

  • Creates a clear identity
    They help us embody what it means to be Atlassian Design System.
  • Establishes a shared language
    They help us speak the same language to communicate with each other better.
  • Creates an aligned point of view
    They guide us through the creation and continuous implementation of the system.
  • Supports onboarding and engagement
    They help us onboard, get buy-in, and encourages engagement.

As we mentioned when we launched our new home for Atlassian Design System, we are shifting our perspective of how we view the design system. Identifying our values and principles was a critical and foundational step in our evolution and maturation.

We’re excited to bring you on the journey ✨ of how we developed our new values and principles as one Atlassian Design System Team.

We strongly believe in the power of co-creation to capture the perspectives of our diverse, multi-disciplinary team. The outputs of our workshop show us how much design systems are about people.

They highlight the importance of:

  • Working together across silos and disciplines.
  • How we collaborate and interact with each other, including our consumers.
  • How our success comes from invisible things, like culture and process, that brings us together.

With a strong internal focus on quality, our values and principles couldn’t have arrived at a better time.

Atlassian Design System Values & Principles

We have three values, each paired with its own principle.

Foundational ✨

We solve the common problems for all, small and large, to provide a solid foundation that consumers can confidently build upon. We avoid consistency for the sake of consistency and reject infinite flexibility.

Trusted fundamentals before comprehensive patterns

  • We solve common foundational problems, enabling consumers to focus on their product experiences.
  • We provide opinionated building blocks, which allow consumers to compose more complex, bespoke experiences. We don’t support unlimited flexibility but offer a robust foundation for consumers to build upon.
  • We ensure quality through research and clear standards (accessibility, responsiveness, reusability). Otherwise, it can’t exist in the system. (Build with heart and balance).
  • We consider scale, starting with enterprise-level platform needs.

Harmonious ✨

Our building blocks work together to create a suite of products that feel familiar, cohesive, and part of a family. We strive to gain trust through intent and purpose.

Meeting system needs before delivering features

  • We bring in all perspectives to co-create and shape our design language.
  • We finish what we start, especially before starting something new — a limited, but complete, cross-functional experience is better than the sum of many incomplete, single-function solutions.
  • We are informed by continuous feedback. (Don’t #@!% the customer).
  • We don’t stop at shipping — documentation, support, deprecation, and maintenance are always considered for the best consumer experience.

Empowering, for everyone ✨

We strive to make our design system work for everyone who relies on it, regardless of discipline, skill level, or tenure. By enabling as many people as possible to use the system, we multiply our impact.

Bringing people on the journey before helping for the moment

  • We bring consumers into our process to educate, build trust, and create a sense of shared ownership.
  • We prioritize the best service experience. We take the time to provide consumers the right amount of resources, support, and context. (Open company, no bullshit).
  • We optimize for self-service through our tools and information. We want consumers to independently make decisions with confidence.
  • We want consumers to become champions — we inspire them to improve their craft — and in turn, we improve ours too.

Our journey

Defining what values and principles mean to us

Everyone approaches and thinks of values and principles differently, so we started by gathering inspiration from other design systems. Then we crafted clear definitions of what values and principles mean to us, along with where they fit with our strategy, mission, and vision.

Defining what values and principles mean to us

At a high level, values are fundamental beliefs and what we hold true. The strengths of our design system and team center around these core values.

Meanwhile, principles are guides to behavior, how we achieve our values. They guide how we live the values and influence the results we achieve.

Values should be:

  • Inspired by our mission
    They help us work towards shared goals and promises.
  • Enduring and inherent
    They represent essential fundamental qualities of our design system.
  • Applicable across the team
    They work for everyone, not just a few individuals.

Principles should be:

  • Inspired and driven by values
    They help us live and embody our values.
  • Practical and actionable
    They help resolve practical and real-world questions in specific situations.
  • Capture our sense of prioritization
    They help us make tradeoffs to balance conflicting priorities.

Above all, our values and principles should be memorable and relatable — they are easy to refer to and bring up in conversations. And with everything we do, our values and principles are applied with heart and balance.

Understanding how we fit with other values and principles

At Atlassian, we have a variety of values and principles: company values, design principles, voice and tone principles. Some teams also craft specific design principles for their product. We thought about how our design system values and principles relate to everything else.

This diagram was created when the Atlassian Design Principles were born. It illustrates how all of our values and principles are interrelated:

Atlassian Design System values and principles work in tandem with all of the others, not in place of them. They help our team align on what kind of design system we want to build at Atlassian, what needs we address, and how we address them. And they’re not just for our design system team — we hope to use them to enable contribution in the future.

Running remote workshops with the team

We facilitated two workshops with 30 people in a fully remote setting. One workshop focused on values while the other focused on principles.

We started by sharing the history of how the design system has evolved from Atlassian Design Guidelines in 2012 all the way to Atlassian Design System in 2020. We brought people on the journey ✨(our principle demonstrating Empowering, for everyone) by sharing context, brainstorming, discussing, and sparring ideas together as a team.

The overall goals for these workshops were to connect as a team, align on a shared vision by establishing a set of values and principles, and most importantly, to have fun!

Output from our Values workshop

Things we were mindful of during the workshops:

  • The immediate outputs aren’t final
    We knew we wouldn’t come out of the sessions with any final values and principles. Synthesis takes time — a smaller group would refine them afterward to share and spar back with the wider team.
  • Words can be misinterpreted
    We encouraged everyone to be very clear with their words. For example, does “accessibility” mean “something is easy to access” orcompliant with WCAG accessibility standards”?
  • Framing is important
    Based on our definition of principles, we framed our principles as “important thing > equally important thing” to help us stay conscious of what we tradeoff between competing priorities.
Synthesizing Principles workshop

The fun stuff

We didn’t forget to make time for some fun team bonding! To help the team carry out our goals, we established a playful, curious, and authentic environment. We led each session with a creative icebreaker.

Session 1: Draw your teammate… as an object
Everyone picked a teammate to draw as an object. We each gave three clues to describe them and then guessed who everyone else drew.

Guessing which object is which teammate. We have a lot of HTML+CSS Wizards on our team. 😉

Session 2: Alien interview
Our scenario — A UFO had struck earth. The media interviewed aliens about how they got here, their home planet, and their impressions of earth. We had 1 alien, 1 translator, 1 interviewer per rotation. The alien spoke gibberish, the translator translated the alien’s language, and the interviewer asked the questions.

👽 Some of our team aliens, Tim and Douges 👽

Jamming, sparring, synthesizing, and co-writing

The breadth of discussion and outputs from the workshops was incredible, even a little intimidating! We were blown away by the immense amount of ideas that surfaced.

As we synthesized, clear themes emerged. Then we began to refine and co-write together as a team. We would jam, review, spar, and repeat this process until what we had felt right.

Jamming on all the drafts!

Throughout the process, we made sure the values and principles stayed close to the team’s original beliefs and intent (what we hold true). We constantly referred back to the workshop discussions, groupings, and voting exercises as we sparred drafts.

What’s next?

Our values and principles are coming to life! ✨ It’s incredible seeing them being applied with little effort to evangelize them.

We’ve published our values and principles on atlassian.design for everyone to use (and hold us accountable for). We’ve been highlighting the usage in our team rituals and conversations. We’ll continue to look into new ways to encourage adoption, such as adding questions to help the team apply these principles. We’re also jamming on some fun visual things.

As our living design system evolves, we expect that the values and principles will be refreshed, to ensure that they still help us achieve our goals. In the meantime, we’re excited about using values and principles to cultivate a clear identity for ourselves, establish a standard baseline for quality, and guide our team towards an aligned point of view. The importance of co-creating these values and principles together as a team was key. One team, one dream!

Cheers ✨

Thank you for coming on this journey. We hope you’re inspired and are just as excited about our team and the future of Atlassian Design System.

A special thank you to our Atlassian Design System teammates for their participation in the workshops and co-creation of our new values and principles.

Special thanks to Jocelyn Wong for designing the cover illustration.

Thank you to our workshop facilitators and co-writing partners:
Alexandra Periera, Jocelyn Wong, Tim Swan, Eleni Misthos, and Jennie Yip.

--

--