PROJECT
Improving table interactions to increase customizability and adoption.
Role
Product Design Intern
Company
Atlassian
Timeline
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.
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
That was an overview of the project. If you'd like to learn more, let's get in touch!
Made with Framer and hot tea 🍵
