Case Study – Atlassian Content Design

At Atlassian, our product development flow moves through phases and checkpoints. As a Content Designer, I support product and experience initiatives as part of Atlassian’s Design Organization. I’m passionate about improving our customers' experiences through content and service design thinking.

Below are samples of my content design work organized by project phases.

Gather context

I think about the full context of the user experience and what types of content may be needed.

Audit documentation

The words we choose are the building blocks that hold diverse teams together. Terms such as “blacklist” and “whitelist” reinforce the concept that black and white are opposed, and one is bad while the other is good.

"Allowlist" and "blocklist" are clearer, more direct terms that now replace "whitelist" and "blacklist" in the Confluence user interface. I conducted a content audit to identify where whitelist and blacklist appeared in the Confluence user interface and documentation.

UI audit

UI copy audit

Competitor research

The Confluence 7.9 beta release included an accessibility checker feature. I analyzed and dissected accessibility checker messaging patterns through competitor research.

competitor analysis

Investigating accessibility checker industry practices

Ideation

Ideation helps me structure products in a way that guides users more effectively. It also ensures that designs are built in a way that can accommodate the appropriate content.

Accessibility checker panels

My ideation work on an accessibility checker feature included content models for how information should be presented and formatted in panels.

I worked with a designer to model UI copy in Figma prototypes. We designed core experiences to share with the team for concept validation. I made every word count by following guidelines to give people the information they need to move on while also recognizing any frustration and soothing fears:

  • Write for people, not machines.
  • Use neutral and actionable language
.

  • Be empathetic, but not overly apologetic
.
  • Treat errors as opportunities
.
  • Keep text short and to the point
.

error message

Modeling error messages in Figma

warning message

Modeling warning messages in Figma

success message

Modeling success messages in Figma

End to end journey

I work closely with the design team to refine the happy path journey to include what happens when people get stuck and need help.

Accessibility checker documentation

For the Confluence 7.9 beta release, I documented the concepts and procedures for the accessibility checker feature.

Accessibility checker documentation

Documentation for a developer (EAP) release

Team Calendars error flags

While working on Team Calendars for Confluence, I used error flags and links to support documentation to improve the experience for importing calendars containing Jira events.

Before
Team Calendars error message

In the original error message, the title doesn’t clearly indicate the purpose of the message or contain keywords that will immediately draw the user's attention to the issue.

The description contains technical jargon and doesn’t offer any actions the user can take to solve the problem.

After
Improved Team Calendars error message

I rewrote the error message to include three crucial pieces of information:

  • What happened and what the consequences are.
  • Why it happened and whether it will happen again.

  • What needs to be done to move forward.

I wrote a clear and concise title. The tone is friendly and reassuring, but not apologetic. The message includes a link to a knowledge base article I wrote after consulting a developer for technical details.

Improved cloud admin experience

In January 2021, the Atlassian cloud team announced improved user management for cloud admins. Along with editing the announcement, my work on this project involved updating content for 50+ pages of Atlassian Cloud documentation and creating UI copy for 30+ screens, including spotlights and empty states.

An empty state message is used when an area that usually displays content is temporarily empty. Here’s how I redesigned an empty state for admins who manage multiple products in their Atlassian organization.

Before
Empty state message

The message clearly indicates that there is nothing to show. However, it misses an opportunity to give users any additional directions or actions to take.

After
Improved empty state message

I rewrote the message to communicate possibility, what will appear, and how it will get there. I encouraged users to interact with the product.

A spotlight introduces new features and functionality when onboarding or change-boarding users. It focuses attention to a specific piece of UI, like a button or an icon. Spotlights can also guide users through tasks that require multiple steps to complete.

Below is a spotlight tour I wrote for cloud admins. I restricted messages to 3 lines in length and showcased a single update to concentrate on the benefit to the user.

Spotlight tour step 1

Spotlight tour: step 1

Spotlight tour step 2

Spotlight tour: step 2

Documentation health

As we measure results, it’s possible to make content updates to reflect user data. This includes assessing the health of documentation and filing UI messaging bugs for development teams to polish user experiences.

Improving macro documentation

Early in 2020, the Confluence team identified some ways to significantly help people learn about macros. We redesigned the macro documentation to include ideas on how macros might be used, screenshots showing the macro in action, and known issues.

Before
Macro documentation

While the original macro documentation outlined how to configure a macro, it didn’t clearly indicate when to use a macro, or why you would want to use it.

After
Improved macro documentation

We used screenshots to show possible scenarios for using a macro. The content was generic so customers could imagine their own scenarios.

Helpfulness ratings for the macro documentation nearly doubled. While helpfulness improved, we can always do more to ensure our customers benefit from content design.

Successful Atlassian teams use Playbooks to improve teamwork. Check out some popular Plays.

Pick my brain/cortex and let's get started on your project
Enquiries
Push it good
X