Timeline UX Design
01.1
Introduction
Previously, users could only track takedown progress through two statuses: In Progress or Takedown. The process might involve multiple actions over days or months, but that detail was invisible. I introduced the idea of a timeline to make this journey visible. This project solves the problem of ↓
-01-
01.3
Impossible to design for all possibilities?
My first instinct was to make the timeline dynamic:
Four views (Half-Year, Month, Bi-Week, Week)
Horizontal scrolling
Clickable action cards
But as I prototyped, I realized I was adding complexity without adding value.
I started questioning myself:
-03-
02.1
Rethinking the role of edge cases
I didn’t want to lose the the timeline idea, considering its visual appeal and how well it fits into the expandable table rows, making efficient use of horizontal space.
To simplify the timeline, I started exploring the possibility of creating a “less dynamic” or what I call a “semi-dynamic” timeline to limit unnecessary interactivity. The first step was to remove the feature for selecting different time spans and instead focus on default views.
Next, I questioned whether all four default views were necessary. Could the design be simplified further? What is the one essential view we must keep?
In UX design, we often focus on the most common use cases, ensuring the primary experience works seamlessly for the majority of users. Edge cases, by contrast, are typically deprioritized, as they represent rare scenarios that may not significantly impact most users.
However, in this project, I saw an opportunity to use edge cases as a design tool rather than an afterthought. By addressing the most extreme scenarios—where actions span six months or cluster within a few consecutive days, I was able to simplify the timeline for all users, not just those in edge-case situations.
One significant edge case is the upper limit of this timeline: Six Months. While it’s rare for actions to span this entire duration, the timeline needs to account for such scenarios.
Another edge case is when the process has just started, with only one or two actions recorded. For such scenarios, a Week View might seem appropriate.
However, the gap between a 6-month view and a 1-week view felt too large, lacking a seamless transition. Instead, transitioning from 6 months to 1 month provides a more natural and cohesive flow.
As a result, I simplified the design to include only two views:
6-Month View
1-Month View
With these two views, users can toggle between a macro and micro perspective, covering all possible scenarios without overwhelming them with unnecessary options.
This turned edge cases into a design advantage—was key to creating a solution that balances simplicity with functionality. It’s a departure from traditional UX practices and showcases how strategic thinking can transform complexity into clarity.
-05-
03.1
Final Design
-07-
01 / Provide a Clear Timeline Overview
Start with a high-level timeline overview to set user expectations. This ensures they can quickly orient themselves without getting lost in the detailed, expandable view.
02 / Simplify Views to 6-Month and 1-Month Modes
Reduce the timeline modes to just 6-Month and 1-Month Views. Introduce an expandable and collapsible month interface to connect the two views seamlessly. Users can toggle between these views smoothly, maintaining context throughout.
03 / Add Indicators for Actions Outside the Current View
In the detailed 1-Month View, provide indicators for actions that fall outside the current window. This way, users have clear clues and expectations without needing to scroll horizontally. Clicking on these indicators allows for easier navigation, avoiding usability issues caused by combining horizontal and vertical scrolling within the table interface.
03.1
Final Design
-08-
03.2
Impact
-09-
Takeaway: Sometimes, solving for the extremes creates a better experience for everyone.