Aligned 1k designers and
12 products around one
consistent layout standard.
Aligned 1k designers and
12 products around one
consistent layout standard.
PART ONE
PROJECT OVERVIEW
The Atlassian Design System (ADS) is a collection of UI foundations, components, patterns and standards used to create harmonious product experiences. We’re on a mission to make it easy for teams to design, develop and deliver high-quality user interfaces.
Grid is a core visual style within ADS, used to position content and craft consistent page layouts.
Company
Atlassian
Role
Product Design Lead
Key responsibilities
Own end-to-end release to Open Beta
Conduct user research with design leadership
Create design system tooling
Publish documentation and educational material
Drive adoption
Deliver roadmap to General Availability
PROJECT OVERVIEW
Without a grid, Atlassian designers lack guidance for visual design. Our products are inconsistent and not responsive.
01
The grid doesn’t meet their needs
02
Don’t know how to set it up
03
Not sure where to apply it
04
Inconsistent layouts and spacing
05
Products are not responsive
06
Design and engineering miscommunication
PROJECT OVERVIEW
Define a new set of grid standards and tooling. Enable designers to drive layout consistency across all products and breakpoints.
01
Fit for purpose — meets the needs of makers and each product
02
Easy to use — easy to set up, supported by documentation
03
Flexible — guidelines on when to follow the rules, or break them
04
Consistent layout — drives visual design consistency across products
05
Responsive design — ensures usability for all screen sizes
06
Improved productivity — a shared language for design & engineering
Red line analysis showing the impact of grid on aligning Atlassian products.
PROJECT OVERVIEW
Layout is fundamental for quality UI. Effective layout allows users to navigate the product and complete tasks intuitively.
Grid is a tool that helps execute best layout. It is used to position content on a page and create a consistent visual structure across all breakpoints.
PROJECT OVERVIEW
As the Grid & Layout lead, I delivered tooling to improve visual design quality at scale for ~1k designers across 12 products in Atlassian.
PROJECT OVERVIEW
I approached this design challenge with two different types of thinking:
PART TWO
DISCOVER
Grid positions content and creates consistent page layouts. The building blocks are columns, gutters and margins.
DISCOVER
There are two types:
DISCOVER
I evaluated industry standards and best practices for grid in other design systems.
Key insights
DISCOVER
I audited key screens across Atlassian products, and found inconsistencies everywhere. Without a system in place, designers work in silos.
PART THREE
DEFINE
I gathered key screens from Atlassian products and stress-tested new grid options to form a hypothesis.
DEFINE
I tested the new grid on multiple products and evaluated different column, gutter and margin values.
DEFINE
I interviewed lead designers across a variety of Atlassian products to understand the problem and build confidence in my direction.
View workshop artefacts
DEFINE
Common themes were identified, by organising insights from the usability study into an affinity diagram.
DEFINE
All design decisions were based on real quantitative and qualitative user data.
I’m confused by all the different kinds of grids, because it doesn’t bring consistency. Give me one grid for everything. Simplify it. Fewer grids is better for everyone.
Lead Designer, Jira
This is building my case for why we need nested grids, because you need a rule set to handle how you do the side navigation and side panels as well.
Lead Designer, Trello
Designers should spec up their screens across all breakpoints before they roll out an experience to prod. It's a long-standing problem of trying to get our team to design for responsive.
Lead Designer, Confluence
DEFINE
Hypothesis
There are two distinct levels of grid, and one is more useful:
Insight
A content-level grid would be more useful for designers than a page-level grid.
9
designers prefer content-level
Designers will get more use out of this grid. It provides better structural guidance for content. The twelve columns divide neatly into equal sections.
3
designers prefer page-level
Atlassian products will be one cohesive experience. Asides will be consistent across products. There will be a sense of proportion between content and asides.
1
designer prefers both grids
Nested grids will provide layout guidance for both content and asides. However, they are complex and require a steep learning curve to set up the grid correctly.
DEFINE
Hypothesis
For a 1440px screen, these values are suitable for spacing:
Insight
These spacings establish a good sense of hierarchy, and feel comfortable across most products. A few products prefer a more compact grid.
PART FOUR
DEVELOP
Changing the grid format from page- to content-level structures it around the most common use case, as many designers only work within the main content body.
DEVELOP
Layout regions are the building blocks of a web page. My layout grid starts below the top navigation, and provides structure to the main content.
DEVELOP
Asides display supporting content. The grid typically fills the full width of the viewport. When asides are present, it resizes to fit the remaining area.
Atlassian teams previously used inconsistent terminology: panel, drawer, slideout, pane, side sheet, etc. I standardised usage of “aside” to improve clarity and code parity.
DEVELOP
Atlassian products have >18 types of asides, with different responsive behaviours. I drove consistency by defining a set of standards.
DEVELOP
Spacing recommendations from my user testing were incorporated into the grid, ensuring it is fit for purpose.
DEVELOP
The grid was validated across a range of common breakpoints.
PART FIVE
DELIVER
I updated grid styles in the Atlassian Design System Figma library. This is the original way to use grid.
DELIVER
I published a grid component in the same library. This is a new way to use grid, with more guidance and flexibility compared to grid styles..
The grid component has four properties, which can be customised to flex for a variety of contexts and layouts.
The component provides layout guidance at a page level. It has inbuilt asides, which automatically resize the grid.
Inspect the grid component in Figma
The grid component comes with a supporting training demo. Video media is an effective show-don’t-tell communication tool for the topic of responsive design.
DELIVER
I published my documentation externally on the Atlassian website, maintaining our thought leadership in the design system space:
DELIVER
I collaborated with the principal design systems engineer to evaluate options for code parity.
Outcome
Grid will be offered as a design-only tool. Engineering has flexibility to implement layout using their preferred method.
DELIVER
Grid tooling and supporting documentation is delivered with inclusivity in mind.
Learning preferences
Documentation uses a variety of formats to support diverse learning preferences. Content can be consumed as text, illustration, or video media.
Responsive design
Grid’s spacing standards enable designers to craft responsive page layouts. Content reflows effectively across all screen sizes and breakpoints.
Alternate text
Images on the Atlassian Design System website are annotated with alt text, to support users with vision impairments or those who rely on assistive technology.
DELIVER
I announced Grid’s Open Beta release across internal messaging channels and a company-wide blog.
PART SIX
NEXT STEPS
After closing out the Open Beta milestone, I roadmapped the next steps towards General Availability and external release.
Adoption strategy
Drive adoption through educational workshops, champions program, and incentives.
Change design workflows
Gain leadership buy-in to mandate the use of grid, and change the Definition of Done to include mockups across breakpoints
Density theming
Introduce a compact grid variant for products such as Jira and Trello, where users prefer tighter layouts.
Monitor feedback
Provide feedback channels and actively review user critique about grid. Conduct more usability testing if necessary.
Measure impact
Evaluate key metrics such as increased design efficiency and consistency across products.
NEXT STEPS
As Product Design lead for grid and layout in the Atlassian Design System team, I drove the end-to-end release to Open Beta.
NEXT STEPS
Karen exhibited maturity, effectively delivering results in partnership with the design team. Her design review and blog post played a pivotal role in the successful introduction of Grid and Layout to open beta. This empowered designers to make better use of resources, enhancing the quality of design outcomes and advocating for responsive and accessible design principles.
Head of Design, UI Platform
Karen’s craft quality is outstanding, delivering work that raises layout quality across Atlassian Design. She entered a project with lots of unknowns on scope, and drove the project end-to-end with cross-functional impact. This work increases legibility and usability for our end users and improves productivity and handover for our designers.
Design Manager
Karen ended up going above and beyond, driving the work to get it used by designers across Atlassian. Karen up-skilled quickly on a dense & complex foundational element. She was enthusiastic about the work and took the challenge in stride, confidently taking initiative on the project to make decisions and change course when necessary.
Lead Product Designer
Karen stepped up to take on a relatively ambiguous problem. She found a solution, delivered a strong opinion and guided the entire design org on using Grid and Layout. She owned design and documentation, and collaborated with me on the difficult decision of creating parity with engineering artifacts.
Principal Engineer
