Functional structure
What data is stored, how records relate, and what actions are possible.
DISCOBOLUS · SMK COLLECTIONA study in coordination
Selected work / 03 · Project Sheet
From product logic to a complete interaction system.
Project Sheet combines database logic with spreadsheet presentation. I used both to build a design approach, investigate tasks and prioritize problems, then address task dependencies through two connected areas: improving the Gantt view and defining the field’s interactions.
Explore the design processROLE & SCOPEUX design: product and requirements analysis, competitive and task research, Gantt improvements, dependency interactions, and component-based design delivery.
LOGIC / METHOD / INTERACTIONScroll to change perspective
Contents · 8 chapters
1New field
2Design workstreams
3Gantt priorities
4Dependency stages
01 — Understand the product
Database logic. Spreadsheet presentation.
Project Sheet serves focused scenarios such as project management and CRM. Its data logic draws on databases, while its presentation draws on spreadsheets. I analyzed requirements through both functional structure and information organization, considering how data and actions work together and how people understand them.
Information organization
How the same data is arranged so people can understand it and act.
How can these two characteristics become a practical design method?
02 — Build the method
Complete actions, across three layers.
For functional structure, I used create, delete, read, and update to check interaction completeness, from configuring a field to entering its cell content. For information organization, I examined views, toolbar operations, and fields: how a field appears across views and behaves under grouping or filtering.
Two complementary checks / adapted from the originalFIG. 02
Are the actions complete?
- C
Create
Configure the field; add cell content.
- R
Read
Locate the record; understand the relationship.
- U
Update
Change content and related states.
- D
Delete
Remove the intended object with clear feedback.
Where does the information change?
View
The form of a record across grid, Gantt, gallery and Kanban.
Tool
The effects of grouping, filtering and hiding fields.
Field
The meaning, constraints and content of a cell.
Apply the same checks to a concrete task-dependency requirement.
03 — Requirements & research
One new field. Two connected workstreams.
Task dependencies help teams understand sequence and timing, with the Gantt view providing a key context. Existing usability issues could undermine the new field, so I worked with product to divide the work into dependency design and improvements to the Gantt view.
Improve the foundation
Resolve the usability issues in the view that will carry the new relationship.
Define the relationship
Design how a dependency is created, recognized, changed and removed.
Keep familiar forms. Refine the details.
Competitive research examined entry points, direction, display, editing and removal through the same action framework. Familiar arrows and fields provided the foundation; the design focus moved to micro-interactions and UI details.
Observe tasks, then ask why.
Two experienced test colleagues, three people new to the feature, and three light users participated in qualitative research. The observations locate usability problems; they do not establish population-level success rates.
Create a Gantt view
Match the date fields and establish the first time bar.
Adjust connected tasks
Change dates for several tasks and understand parent–child timing.
Research appendix · original task sheet
Tasks were organized by action dimension. The appendix contains multiple task groups; no completion-rate or timing scores have been added.
04 — Priorities & scope
Choose the changes that solve connected problems.
Not every issue needed to be solved in the same release. I considered frequency, learning difficulty and impact, with development cost constraining scope. Related findings were then grouped into three areas of improvement, each checked for other problems it could address.
Information space
Focus on the primary field; put owners in the Gantt area; make hidden fields recoverable.
- E1
Too many field columns take up too much page space.
- E3
When collapsing columns, I want to keep the title column.
- E4
I do not know how to reopen hidden columns.
- G3
I cannot see task owners without expanding the fields on the left.
Time accuracy
Clarify time scales, exact dates and milestone placement.
- G1
I cannot tell precise start and end dates at month, quarter, half-year or year scales.
- H1
I cannot tell the exact milestone date at month, quarter, half-year or year scales.
- H3
Multiple milestones are hard to distinguish.
- K2
At large time scales, I cannot see the new date after an edit.
Coherent multi-task actions
Connect selection, batch edits and parent–child ranges.
- J1
Adjusting the order of several rows is inconvenient.
- K1
The handle for changing a subtask’s date is too small.
- K3
Parent and child time bars do not automatically adapt to changes.
Original findings are listed beside the priority plot. The three groups summarize related problems without introducing new scores or coordinates.
First make the Gantt foundation work. Then bring the dependency into it.
05 — Workstream A · Gantt view
Clearer information. Coherent actions.
The Gantt improvements addressed three priorities: allocating space to essential information, making dates readable at different scales, and defining consistent interactions for multiple tasks.
A
Give the timeline room to breathe.
Problem · fields occupy the view, while owners require another lookup.
Focus the field area on the primary key. Move owner avatars into the Gantt area and duration into hover feedback. Keep explicit controls to collapse and restore other fields.
B
Make the date precise at every scale.
Problem · large scales obscure exact ranges and merge milestone positions.
Distinguish dates and weekends at week, month and quarter scales. Reveal the exact range when a time bar is in focus; define milestone positions and aggregate those within the same unit.
C
Keep multi-task editing coherent.
Problem · batch changes and parent–child edits follow disconnected rules.
Click a time bar to select it; use Shift for multi-selection. Batch date edits and dragging follow the same change. In the original design, shrinking a parent pulls children into its range; extending a child expands the parent.
The parent–child behavior is this project’s original design rule, not a universal scheduling recommendation.
06 — Workstream B · Task dependencies
A field is complete only when every action works.
With the Gantt foundation addressed, I returned to the method to define how dependencies are created, recognized, changed, and removed. I checked their behavior across the grid, Gantt view, detail panel, and other views to maintain a consistent understanding of relationship direction.
C
Create · one direction across entry points
In the grid, choose a relationship type and search for a task. In Gantt, drag from a time-bar endpoint. Matching icons and arrows clarify the direction, target and completed state.
Original design / interaction walkthroughCREATE / GANTT
TASKS
TIME & RELATIONSHIPS
Start from the edge of the time bar. The arrow makes the direction explicit.
TASKS
TIME & RELATIONSHIPS
The target gains a border and shadow as the connection approaches.
TASKS
TIME & RELATIONSHIPS
The completed connection stays in its task and time context.
Constraints and conflict feedback
The design distinguishes duplicate and parent–child relationship restrictions from time conflicts. Time conflicts use red lines and icons; logical conflicts return the dragged line. These are documented interaction proposals, not evidence of a tested cycle-detection algorithm or a complete scheduling engine.
R
Read · recognize both relationship and direction
Dependency tags need to differ from linked-record and multi-select fields. Color and symbols work together, and gallery or Kanban views use one relationship per row. Gantt paths reveal the same relationship spatially.
The original design defines Z-shaped, stepped and snake-shaped paths for different positions. Hover emphasizes related paths; grouping is considered alongside the line rules. Frame 12 also describes a click entry point for editing or removal.
U
Update · show the effect and preserve control
Cells handle changes through removing and adding relationships; the detail panel supports changing the type. The design also links dependent dates after a drag, with a setting to turn that behavior off.
Changing the dependency type
D
Delete · make the target unambiguous
Removal should make the current target clear. Keep the entry close to the tag or connection, and emphasize the relationship being acted on.
The deleted object is the relationship, not the task. Table and detail entries remove the tag. Frame 14 shows hover-to-remove on a line; the click entry in Frame 12 is retained as a separate source description rather than combined into an invented final rule.
07 — Component-based delivery
Let the file express the design logic.
The design logic also informed the way the files were built. I separated the Gantt view into the task list, timeline, and time bars, using components and Figma layout parameters to support consistent states and changes.
Gantt / three modulesFIG. 12
01 · Task list02 · Timeline03 · Time bars
Layout detail · from the original component
row/ganttHorizontal layout · 343 × 40 · spacing 0column/ganttVertical layout · 336 × 48 · spacing 0cell/ganttFixed cell · 48 × 40Parameters read from the original Figma instances; this presentation is a website transcription.
08 — Outcomes & reflection
Keep the result in its context.
The original review reports a 3.4% rise in Gantt usage frequency following the November 2022 release, alongside a separate account of addressing enterprise customer needs. My takeaway is the connection between product understanding, research, prioritization, and detailed interaction design.
+3.4%
Gantt chart usage frequency
Source: the original review following the November 2022 release. The measurement window and full metric definition are unavailable. This is not percentage points, efficiency or revenue growth, and is not attributed to one change.
A method carried through the work.
The accumulation here is a continuous line from product understanding to research, priorities and interaction details. Data logic, information organization and each action check one another.
Separate evidence · customer feedback
The review separately records responses to enterprise customer needs. The feedback chart below is not the measurement behind the 3.4% usage change.
Appendix · other views
Completeness in a complex tool comes from checking data logic, information organization, and each action against one another.
Continue exploring
Design Systems & CollaborationFrom connected tasks to a shared design language.
Back to selected work