PROJECT

Confluence Tables

Confluence Tables

Confluence Tables

Improving table interactions to increase customizability and adoption.

Role

Product Design Intern

Company

Atlassian

Timeline

3 months

5 months

Outcome

Shipped in 2023 🚢

OVERVIEW

During my internship on Confluence's Content Experience team, I worked to improve the table creation UX.

Confluence is an enterprise knowledge base with dynamic pages(like Google Doc) for creating, capturing, and collaborating on any project or idea.


The project was successfully shipped after my internship. What's the project about? Please read on. :)

PROBLEM

Table-creation experience has one of the highest number of complaints at Confluence.

Currently, Confluence tables have three default widths that can be manually adjusted with a breakout button:

Current table: 3 fixed widths adjusted by a breakout button

In our internal feedback portal, our customers were not happy with this.

To help myself and the team better understand common patterns of table interactions, I conducted a competitor analysis of similar documentation products, and synthesized two major pain points of Confluence's table behavior:

Watch how dragging a single column ⭐destroys ⭐your table:

PRINCIPLES

What should an ideal table creation experience on Confluence be?

After learning more about the problems, my team sat down and asked ourselves: "What should an ideal table creation experience on Confluence be?" After discussions, we came up with three principles. These principles served as North Stars that helped us to both brainstorm solutions and to narrow down ideas later.

Principles for ideal table behaviors

(Content edited for confidentiality)

SOLUTION

Improved table resizing - more default widths, adjustable with handles

7 table sizes, as opposed to 3 sizes now, would be available in the new version

After rounds of iterations and usability testing, we landed on a much better table interaction model. 7/8 participants from our usability testing enjoyed using the handle component to resize table width. Providing more default table sizes will also guide users to more effortlessly adjust table sizes.

Improved column resizing - minimized impact towards adjacent columns

When people are adjusting columns, limiting the adjustments to only affect adjacent columns will prevent other columns being accidentally changed. This column-resizing model would make the experience less error-prone.

7 table sizes, as opposed to 3 sizes now, would be available in the new version

Made with Framer and hot tea 🍵