Table Subitems: Project Management, Supercharged!

Project management solution design for Coda

01. OVERVIEW
Project management is a key growth area for Coda, competing with tools like Asana, Airtable, Smartsheet, and Monday.com. We lost 9 deals to project tracking tools in Q3 2023, but received strong feature requests from enterprise accounts, with Subitems being a top priority.
02. MY ROLE
Design Lead  |  Roadmap Planning  |  User Research
03. PROCESS
04. PROBLEM TO SOLVE
In this example, the user builds up a complex system with buttons and indentation indicate what are the high level projects and where the tasks belong.

Project and Task hierarchy in Coda table before Subitems...😂
05. KICKOFF - STAKEHOLDER ALIGNMENT
Opportunity pitching
By showcasing client feature requests and competitive analysis, we aligned all stakeholders on the goal of building table subitems.
Discussed key questions
Key stakeholder questions were gathered during the kickoff meeting, providing guidance and inspiration for further exploration and development.
Collected concerns and risks from stakeholders
We also collected key concerns from the engineer team and sibling feature team as guidance for scoping and feature coordination.
06. DESIGN SPRINT
The next step is a 2-day design sprint.
During the 2 days, I led several workshops to define key user scenarios, map journeys, ideate UX solutions, clarify scope, and create low-fi mocks.
07. FINAL SOLUTION
Subitems break tasks into manageable pieces, improving scoping, assignment, and tracking.
For the initial launch, we made 22 key design decisions, covering core subitem functionality in grids, behavior across data types, and integration with table features like filters, groups, sorting and cross-doc.
Turn on Subitems and view it in grid.
Users can enable subitems by adding them from the contextual menu and configuring the appropriate parent and child columns.
Subitems configuration
User can further edit the parent and child columns in the Subitems settings panel.
Subitems in detail view
The details view is a commonly used format for rows, where users can see subitems displayed as a subtable. Nested subitems are also clearly visible with proper visual indicators.
Subitems for timeline
Subitems must integrate smoothly with other data views. For the MVP, we prioritized Timeline.
Subitems for Cross-doc
Cross-doc table sync is one of the most complex areas in Coda due to intricate workflows and technical constraints. My exploration and solutions were just the first step in coordinating Subitems with Cross-doc.
08. DESIGN ITERATIONS & DECISION MAKING
I led UI/UX explorations and collaborated closely with PMs and engineers on all 22 design decisions. Due to space constraints, only a few key highlights are showcased below.
Subitems hierarchy
The most fun part is exploring how to best visually present the parent - child - grandchild hierarchy for all data views.
Subitems visual indicator
Subitems needs it's own icon and guidance for when and how to show it. The challenge was it can not conflict with the existing table row editing.
Subitems entry
The key challenge in designing Subitems was finding the most intuitive way to enable them. After extensive exploration and user testing, I identified three solutions:
1. Row Dropdown Menu – The primary location for row editing controls, making it the default way to enable Subitems.
2. Settings Panel – Preferred by power users for configuring complex features.
3. Drag and Drop – The most intuitive method but also the most technically challenging to implement.
Subitems settings panel
The settings panel houses advanced configurations, with explorations focused on the ordering and visual presentation of controls.
09. IMPACT
Subitems is in Beta now!
We have received tons of positive feedback and appreciation. Looking forward to GA!
10. NEXT STEPS
This MVP is only a start.
As next steps, we hope to:
1. Keep polishing launched functions with user feedback.
2. Explore multi-table use cases.
3. Launch Subitems for all data types.
4. Refine subitem bases project management templates.
11. EFFICIENT DESIGN REVIEW
One more thing I want to share is how I do Design reviews.Virtual meetings changed how I drive design reviews. Less live present and chat & More reading, thinking and writing.With Coda, I can easily put together all the content and use tables for discussion and decision tracking.

Here is a link to my framework doc