Compass, Atlassian
2023 - 2024
Summary
During my time at Atlassian, I contributed to the Compass component library by collaborating closely with developers to align on core component properties. I helped maintain consistency by contributing new components and ensuring they adhered to the guidelines set by our core systems team, supporting a cohesive and scalable design system across the product.
Role
Lead Product Designer
Team
Compass product designers x 6
Context & Problem
Compass was a relatively new product within Atlassian, and like many early-stage initiatives, the team was rapidly iterating to find product–market fit. With priorities shifting frequently and most energy focused on feature delivery, the component library fell low on the team's list of priorities. There was no formal process in place for maintaining consistency across designs, and the lack of shared, reusable components often led to duplicated effort and inconsistencies in UI execution.
To support my own onboarding and reduce friction for others, I began creating reusable Figma components for common patterns and UI elements. This organically evolved into owning the Compass component library. I worked to make it more accessible and useful—supporting teammates in contributing their own components, maintaining quality and consistency, and gradually building a shared design resource that could scale with the product.
Team & Constraints
Given that the product was still in the process of finding product–market fit, we experienced frequent pivots in direction and feature focus. This meant some components needed to be updated shortly after being shipped. To avoid wasting time and effort, we had to be selective about which components were added to the library, prioritising those with broader utility or repeated use across the product. High-impact elements like navigation patterns and icon sets were prioritised.
However, like many early-stage teams, we were resource-constrained. Everyone was time-poor, and maintaining or updating the component library often took a back seat to more immediate product needs. While we aimed for consistency, updates to the library happened less frequently than we would have liked. Despite this, we focused on high-leverage changes that could support the broader team without creating unnecessary overhead.
Process
Created surveys to understand which components worked the best for our designers and what could be improved
Worked with the design system team to align our library best with them so that others could use our components where needed
Had catch ups with developers to make sure that we could align on the properties. They could run me through the code. I was going to try and get into the code by we didn’t get around to setting it up. But to save time on the developers end of things
As part of improving the Compass component library, I created surveys to gather feedback from designers—helping us understand which components were working well and where usability or clarity could be improved. I partnered with the design systems team to ensure our library was aligned with Atlassian-wide standards, making it easier for other teams to adopt, reuse our components where relevant and navigate our Figma library file.
I also met with developers to align on component properties as they were implemented. These sessions helped bridge the gap between Figma components and the components in the frontend. While we didn’t have time to fully set up my dev environment in time for deeper hands-on contribution, with time would help close the loop between development and design.
Solution
I took ownership of the Compass component library in Figma, contributing the majority of components myself while collaborating with other designers on the team to ensure consistency and coverage.
Impact
By establishing and maintaining the Compass component library, we significantly reduced the time designers spent searching for or recreating UI elements. Having a central, consistent set of reusable Figma components meant teams could move faster when mocking up new features or iterating on existing ones. It also improved the overall quality and cohesion of our design work, as shared components reflected agreed-upon patterns and were aligned with Atlassian’s broader design system.
This not only accelerated the design process but also improved cross-team collaboration—making it easier for new designers to onboard, for developers to interpret designs, and for product managers to understand the UI at a glance. The component library became a shared language, allowing us to focus more on solving user problems and less on duplicating UI effort.
Reflection
Maintaining the component library while being resource-constrained was definitely a challenge. With limited time and shifting priorities, it wasn’t always possible to keep the library fully up to date. That said, the feedback on the components we did create and maintain was consistently positive, which reinforced the value of the work. Personally, I found having ready-made, reliable components to draw from incredibly helpful when designing new features in Compass—it allowed me to work faster and stay focused on solving problems, not reinventing UI patterns.
This experience deepened my appreciation for investing in design ops and systems thinking, especially as an individual contributor navigating tight timelines. Optimising our workflows as designers isn’t just a nice-to-have—it’s essential when we’re wearing multiple hats.
Looking back, I also saw opportunities to better bridge design and development. Being more embedded in the codebase could have helped me create more accurate, reusable Figma components, especially for handover or for teams outside of Compass. It’s something I’d like to lean into more in the future—strengthening the connection between what we design and what gets built.