Planner View

Showing marketers the "when" of their marketing.

Status
[Shipped / Archived]
Role
Lead product designer (sole designer)
Company
Mobile Commons
Timeline
[X weeks]
Team
PM, [X] engineers
Platform
Web app
Areas
Interaction designData UI

Context

Marketers ran dozens of initiatives at once, across channels and teams. The product helped them track what they were running, but not when. Planner View was built to make their effort visible over time: how initiatives were distributed across channels, types, tags and statuses, at whatever timeframe they needed.

The problem

Initiatives lived in lists. A list tells you what exists. It doesn't tell you that three campaigns hit the same audience in the same week, that a channel has gone quiet for a month, or that half of next quarter's work is still in draft.

So marketers were planning partly blind. To understand the timing of their own work, they had to [export to spreadsheets / build calendars by hand / piece it together from memory].

Core question: how might we help marketers understand, at a glance, how their effort is distributed over time, and spot gaps, overlaps and bottlenecks before they become problems?

Process

  1. Align on the real problem. A kickoff with the PM to separate the request ("we need a calendar") from the need ("I can't see the shape of my plan"). That shift opened the solution space beyond a standard calendar.
  2. Turn the PRD into design questions. I broke the PRD down into the questions a marketer actually asks: What's running this week, month or quarter? Where am I overloaded, and where am I under-invested? What's at risk, still in draft or about to launch? How does one channel's work compare to another's?
  3. Explore directions. I explored [3] directions before committing to one.
  4. Design and share. I designed the high-fidelity version and shared it for internal feedback with [PM, engineering, CS]. The main thing that changed: [one concrete change from feedback].
  5. Hand off. I delivered specs covering interaction states, empty and dense states, edge cases (long-running initiatives, items without dates, timeframe boundaries) and responsive behavior, and stayed close to engineering through build.
Directions explored
  • Calendar grid: familiar, but breaks down with multi-week initiatives and dense schedules.
  • Gantt-style timeline: strong for duration and overlap, weak for at-a-glance volume.
  • Grouped swimlane timeline: rows by channel, type, tag or status, with initiatives as spans over time.

[Which one won, and why. This is the most important paragraph of the case study.]

Key decisions

  • Flexible grouping. One view, regrouped by channel, type, tag or status, so the same plan answers different questions.
  • Multiple timeframes. [Week / month / quarter] zoom without losing context.
  • Density handling. Overlapping or crowded initiatives stay readable. [Describe your solution.]
  • Status at a glance. [Color or styling] makes risk visible without opening anything.
  • Built on the design system. [New components contributed, e.g. timeline bar, swimlane row.]

Outcome

A clear timeline experience where marketers can see the distribution of their marketing effort in any timeframe, without leaving the product or building it by hand.

  • [Adoption or usage metric, if any]
  • [Customer or CS feedback; a quote is ideal]
  • [Business impact: retention conversations, sales demos, fewer exports]

Reflection

To write: What you'd push further, e.g. capacity planning or conflict warnings, or what you learned about designing for dense time-based data.