Atlassian UX Designer

Creating a robust component library for the Atlassian Community product team

As part of the Atlassian Community product team, I was tasked with creating a comprehensive, scalable Figma component library that would streamline our design process. The goal was to create a component library that supported a wide range of user experiences and interactive states while aligning with Atlassian's design system and development standards. This initiative was critical to improving design consistency, accelerating prototyping, and ensuring the scalability of our product design process.

  • The component library needed to align closely with Atlassian's existing design system, limiting design choices to those that were consistent with established styles and usage. This ensured that the new components maintained a cohesive look and feel with other Atlassian products.

  • The components had to be designed with scalability in mind, they needed to be responsive across a wide range of screen sizes without requiring significant updates.

  • Components had to support various interactive states (e.g., hover, active, disabled), requiring careful planning to accommodate a wide range of user types and contexts.

  • Given the complexity of the project, maintaining a well-organized Figma file structure was crucial. The need for clear documentation, precise naming conventions, and correct library linking ensured the components were easy to use, find, and update.

Community Home Logged In

Modal Start a Confluence discussion

Action Point

Creating variants with custom properties and values

I developed a robust variant system to address dynamic interactions. By incorporating text toggles and dropdown selectors, I ensured the components could easily accommodate different content states without requiring additional design work. I also integrated functionality for varying text lengths, making the components adaptable across diverse use cases.

AT7.jpg
AT10.jpg
AT9.jpg
AT8.jpg

Action Point

UX Strategy: Accounting for diverse user scenarios and layouts

I constructed an extensive component library that aligned with Atlassian’s North Star design system. The library was designed with intuitiveness in mind, enabling the team to rapidly prototype and test diverse user scenarios and layouts. This approach provided a solid foundation for both current and future design needs within Atlassian Community.

Action Point

Outlining a well-organized file structure for team collaboration

I meticulously organized the Figma files, ensuring proper documentation, precise naming conventions for elements, and correct library linking. This made it easy for the team to navigate the design files, access the right components, and maintain a smooth workflow during development.

Figma File Navigation Components

Figma File Form Components

Looking Back

Strengthening the Atlassian Community design foundation

The implementation of this component library resulted in significant gains in efficiency, consistency, and scalability. It strengthened cross-team collaboration, ensuring smooth handoffs and minimizing errors. Beyond enhancing the team’s ability to rapidly prototype and iterate, this project underscored the long-term value of a well-structured system in achieving operational success.

  • The team could swiftly prototype and iterate on designs, significantly reducing the time required to create and test new features.

  • The alignment with Atlassian’s design system ensured a cohesive user experience across the product.

  • The organized file structure and thorough documentation made it easier for designers and developers to work together, reducing errors and streamlining the handoff process.

  • The library’s design allowed it to accommodate evolving requirements, ensuring it remained a valuable resource as the product continued to grow.

Up next

GoDaddy Product Design

Andium Product Design

Rubric x Squarespace UI/UX Design