OurTodo subtask function: How we use simple gestures to solv

During the development of OurTodo, we noticed an interesting phenomenon: Users’ big tasks tend to stay in the list until they expire. Why? Because when a task contains 10+ steps, the brain instinctively feels anxious. What we need is not a better to-do list, but a tool that can "break down" large tasks into executable steps. This is our original intention to develop the subtask function.

User pain points we observed

Through user feedback and data analysis, we found three typical scenarios:

Project management scenario: "Preparing for a product launch" is a big task, and users don’t know where to start
Learning plan scenario: "Learning React" seems out of reach, and users easily give up
Travel preparation scene: "Preparing for a trip to Japan" contains too many details, and users are worried about missing them

The common problem is: The task is too complex, and the cognitive load is too heavy。

Our design idea: reduce cognitive load

Our core design concept is: Turn vague anxiety into clear action steps。

Why choose "Swipe right"?

on iOS In native interactions, swiping is one of the most natural operations:

Left swiping usually means "delete" or "not interested"
right swiping usually means "more operations" or "expand"

We chose right swiping as the hand to trigger the subtask Potential, the reason is very simple:

Conforms to the user’s intuitive habits
Will not interfere with the main process (view tasks)
Simple operation, zero learning cost

Technical implementation challenges

When implementing this function, we face several technical challenges:

1. Data structure design

Task {
  id: String
  title: String
  isCompleted: Boolean
  subtasks: [Subtask]  // 子任务数组
}

Subtask {
  id: String
  title: String
  isCompleted: Boolean
  parentTaskId: String
}

We use nested array structure instead of tile structure because:

Data association is clearer
UI rendering is more intuitive
Performance is better (reduces database queries)

2. Gesture recognition optimization

iOS UISwipeGestureRecognizerConfiguration:

let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe))
swipeRight.direction = .right
taskCell.addGestureRecognizer(swipeRight)

We adjusted the gesture's trigger threshold to ensure that:

will not be triggered accidentally (swipe distance is too short)
will not be too difficult to trigger (swipe distance is too long)
tactile feedback provides instant confirmation

3. UI hierarchy display

Subtasks need to be visually clearly distinguished from the main task:

Indentation: Subtasks are indented to the right 20 pt | This is important because:
Users can Complete step by step
Large tasksEvery time a sub-task is completed

A sense of accomplishment

The progress of the main task is very intuitive

2. Progress visualization

We have implemented progress indication on the UI: Completed sub-tasks are displayedStrikethrough
Display next to the main taskComplete progress
(such as "3/5")

After all subtasks are completed, the main task can be completed with one click

3. Clear hierarchy

Main tasks and subtasks are visually clearly distinguished to avoid confusion:Main task: large font size, bold, no indent on the left
Subtasks: small font size, normal font weight, indented on the leftOur usage scenario exampleScenario 1: Project management
Scenario 2: Learning plan

Scenario 3: Travel preparation

Our performance optimization

In order to ensure a smooth experience of the subtask function, we have made several performance optimizations:
1. Lazy loading

The subtask data is loaded from the database only when the user

expands the subtask

📦 准备产品发布会
  ├─ 确定发布会日期和场地 ✅
  ├─ 准备演示 PPT（第 1 版）✅
  ├─ 录制产品演示视频
  ├─ 邀请媒体和 KOL
  ├─ 准备发布会后的社交媒体内容
  └─ 跟进参会者反馈

. This greatly reduces initial loading time.

📚 学习 React
  ├─ 学习 JSX 基础 ✅
  ├─ 掌握 State 和 Props ✅
  ├─ 理解 Hooks
  ├─ 实战小项目
  └─ 阅读官方文档

2. Local cache

✈️ 准备日本旅行
  ├─ 办理签证 ✅
  ├─ 预订机票 ✅
  ├─ 预订酒店 ✅
  ├─ 规划行程
  ├─ 购买 JR Pass
  └─ 准备随身 WiFi

Subtask data is cached in

local SQLite database

, which can be viewed and managed even when offline.

3. Incremental updateWhen the user checks/cancels a subtask, only the status of this subtask

is updated instead of reloading the entire task list.

Our user feedbackAfter the sub-task function was launched, we received a lot of positive feedback: "I can finally break down big tasks! I used to be overwhelmed when I saw 'prepare for travel', but now I can do it step by step, and the mental burden is much less." —— User A

"The progress display of the sub-tasks is very fulfilling, and it is really refreshing to see the items being crossed out." —— User B

"The swipe right gesture is so natural, and there is no learning cost at all." —— User COur next stepsBased on user feedback, we plan to add in future versions:

Multi-level subtasks

: Support for subtasks of subtasks (up to 3 Layer)

Drag and drop sorting

: Support drag-and-drop to adjust the order of subtasks

Subtask templates

: Provide preset templates for common scenarios (such as travel preparation)

Smart Reminders

: Automatically set reminder times based on subtask prioritiesWritten at the end
The subtask function is not a fancy black technology, but it solves a real big problem: How to turn "want to do" into "can do" and then into "doing"
We believe that the best tool should be insensitive
- it will not let you feel its existence, but just quietly help you make complex things simpler. If you also have "big task anxiety", try OurTodo's subtask function: Write down your big tasks

Swipe right and add 3-5 subtasks

Only focus on the first subtaskComplete one, check one, and move on to the nextYou will find:Those seemingly impossible tasks are solved step by step. OurTodo sub-task function: Make complex tasks simple, start by swiping to the right.

把你的大任务写下来
向右滑动，添加 3-5 个子任务
只专注于第一个子任务
完成一个，勾选一个，继续下一个

你会发现：那些看起来不可能完成的任务，就这样一步步被搞定了。

OurTodo 子任务功能：把复杂任务变简单，从向右滑动开始。

OurTodo subtask function: How we use simple gestures to solve complex task management problems