Skip to content
Back to blog Product

Designing Echo: turning timelines into beautiful slides

M Mocoda Studio May 14, 2026 7 min read

Everyone who has built a project timeline in PowerPoint knows the ritual. You draw a rectangle. You duplicate it. You nudge it three pixels left. You add a text box, eyeball the alignment, and squint. An hour later you have a Gantt-ish thing made of forty loose shapes that looks almost right — until a single date moves and the whole house of cards has to be rebuilt by hand.

Echo started from that frustration. The premise is simple: map your timeline once, and get presentation-ready slides out the other end. Here’s how we thought about designing it.

The real problem isn’t drawing — it’s maintenance

The first instinct is to treat this as a drawing problem: make it easier to place shapes. But the pain isn’t placing shapes the first time — it’s the tenth time, when the plan changes and you’re re-aligning everything by hand the night before a steering-committee meeting. So Echo treats the timeline as data that happens to be rendered as slides, not as a pile of shapes you maintain manually. Move a milestone and everything downstream re-flows. The slide is an output, never the source of truth.

Start from the structure, not the canvas

Because the data comes first, the interface is built around the shape of a plan — phases, milestones, dependencies, dates — rather than around a blank canvas and a toolbar. You describe what’s happening and when; Echo handles the geometry. This is the opposite of a drawing tool, and it’s the whole point: the person making the timeline is a project manager with a story to tell, not an illustrator fighting with snap-to-grid.

Design for the back of the room

A timeline slide isn’t read on a 27-inch monitor a foot from your face. It’s projected, and the person who most needs to understand it is at the back of the room, half-distracted, glancing up between emails. That reality drove a lot of decisions: generous type, high contrast, a strict limit on how much detail lands on one slide, and a visual hierarchy that survives compression and a dim projector. If it doesn’t read in two seconds from across a room, it doesn’t ship.

A calm, focused canvas — light or dark

Echo ships in both a light and a dark theme, because the right one depends on the room and the moment. Building slides late at night, or in a dim space before a presentation? The dark theme — a near-black workspace with a single violet accent — is easy on the eyes. Working in a bright office or matching a light brand? Flip to the light theme and the same violet carries through. Either way the interface stays deliberately calm and quiet, and that’s not just aesthetics: a tool you use to make visuals should get out of the way of the visuals, the way a photo editor or a video timeline does. Whichever theme you choose, the restraint in the UI is a promise about the restraint in the output.

Opinionated templates beat infinite options

The fastest way to make a timeline tool that produces ugly timelines is to give people every option. Infinite choice is how you end up back at forty loose rectangles. Echo leans the other way — a small set of well-considered layouts that are hard to make look bad, with just enough control to make them yours. Constraints aren’t a limitation here; they’re the feature. They’re what let a non-designer produce something that looks like a designer made it.

Shipping it on the web

Echo runs in the browser as an installable Progressive Web App. For a tool people reach for occasionally — usually right before a presentation — zero-install access matters more than a native shell. You open a link, build your timeline, export your slides, done. A service worker keeps it working offline, and you can pin it to your dock if it earns a permanent spot. The delivery model matches the job: lightweight, immediate, no ceremony.

What we took away

The lesson that kept resurfacing while designing Echo is one we apply everywhere now: the best tools hide the tedious part and protect the part that matters. Nobody wants to draw a timeline; they want to communicate one. Get the data model right, design for how the thing is actually seen, and be ruthless about what you leave out — and a chore turns into something that’s almost satisfying. That’s the bar we’re building Echo to clear.