Atlassian — Editor

Atlassian utilises a rich-text editor in products like Confluence and Jira for creating and editing content. I was tasked with improving core editing features such as copying & pasting content and formatting tables.

My role:

User research, design principles, UI design, Prototyping, Usability testing and prioritising backlogs.

Results:

• Increased Undo/Redo actions in the editor.

  • Undo’s increased +4.5%

  • Redo’s increased +11.5%

• Increased discoverability and usage of table formatting options

  • Editing cell background colour increased by 60x

  • Merge cell increased by 27x

  • Split cell increased by 30x

• Reduced reformatting or “clean up” of content that was pasted in the editor

Lessons learned:

01
Regular usability testing helps build team empathy.
When I first joined the Editor team I wanted to speak to customers and get closer to their pain points through usability testing. Sharing the videos and insights with the wider team helped build customer empathy and put a face to the customers we are helping with our improvements.

02
Taking the time to come up with design principles.
I must have spent hours with my engineers and Product manager coming up with all the scenarios and behaviours we wanted for copy and paste. However, the long time it took to come up with some core principles helped us make decisions later on in the project and ultimately save time. They are still referred to today!

Research

Using various data points, such as community tickets, usability testing, and internal feedback, to identify areas for improving the editing experience.

It was clear that some of the core features in our editor needed improvement before introducing any new features. I wanted to understand how our editor was being used amongst all the other products our users had in their toolchain. After interviewing some customers I was able to map out at what stage our editor became important, it was mostly copying across and organising content that were the primary jobs to be done.

Usability Insights

To improve usability, I conducted a basic test by having research interviewees recreate a document through various editing tasks. This helped me see in person why some of the most used features were difficult to use.

Editing tables was proving difficult

Tables are one of our most used tools as it helps organise a variety of information on a page. The problem was that editing and formatting tables were complex due to the cell options appearing only on hover and having a small click area that needed to be included.

Formatting difficulties with bulleted/numbered lists

The inflexibility of bulleted and numbered lists prevented users from completing their tasks. Users faced issues such as the inability to start a list from any number, difficulty inserting images without disrupting the list, and the inability to combine different lists.

“Looked like it should have been intuitive and easy but wasn't letting me create lists and change the font. Wasn't clear why I couldn't create the things I wanted.”

Copy and pasting has unexpected results

With users often using external products like Google and Microsoft and copying content into Jira or Confluence, we had to ensure we could retain their formatting when it landed in our products. In addition, we heard in interviews that customers would create messy or work-in-progress in other products and then bring the final results into their wiki.

Improving discoverability of undo/redo and indenting of lists

We recognised that not all users are users familiar with keyboard shortcuts, and some rely solely on the mouse for editing tasks. To ensure our editor was more accessible, buttons must be displayed prominently. The most significant missing toolbar buttons were undo/redo for correcting errors and indent/outdent for formatting lists.

“I really miss having an undo button, and I just don't understand why that's not here. It's just so standard”

“Okay I'm having a little trouble with this indention thing here, um there's no other ones I can do here.”

Design

Tables being one of our most highly used features, I wanted to start with some quick wins of improving the discoverability of cell format options.

Users often struggled to complete basic tasks, mainly to do with cells. We were technically constrained as we couldn't do drag-n-drop of table rows and columns, so I opted to add our cell options into our floating toolbar as a start. This would improve discoverability so users didn't have to rely on a small hover icon that only appears on the cell you are hovering on. Below you can see where we moved the new cell options menu into the floating toolbar.

Defining familiar copy-and-paste behaviour

“I'd rather have the simple formatting because I copy and paste content to other platforms. And, now I have to paste and "clean" up the formatting that Trello has incorporated. Not helpful.”

The above quote gets to the crux of the pain point with copying and pasting content, nobody wants to clean up content they have pasted across. To solve copy and paste, I worked with my team to set up some guiding principles to help make decisions when thinking through all the different scenarios and content blocks that affected pasting content.

Below are a few examples of the principles in action, the engineers working on this project often referenced them when they were unsure of the behaviour.

Updating the UI of the toolbar to help discovery of tools

Some glaring omissions from the toolbar made some tasks especially difficult during testing. No undo/redo buttons were the most impactful as that was a safety net for users when they made a mistake. The other addition I planned to make was to put the indent/outdent buttons in as not everyone was familiar with the keyboard shortcuts.

Results

As a result of hard work from the editor team, I helped contribute to several highly requested features, which all contributed to an improved user experience. I helped close several long-standing community tickets and solve critical customer feedback requests. This included improving the behaviour and functionality of core features such as bulleted and numbered lists, copying and pasting content, and making undo/redo more discoverable.