Mappi
Designing a cleaner way to create cinematic map animations without needing to be a motion designer.
A map can explain place, movement, and route in seconds. But building one still feels like a technical task.
Animated maps do something that static images and paragraphs can't. They communicate the shape of a journey where things start, how they move, what connects to what with an immediacy that earns attention. For travel creators, educators, brand teams, and journalists, a well-made animated map is one of the clearest things they can put on screen.
The problem isn't that people don't want animated maps. They do. The problem is that the tools built to create them often ask users to think like motion designers: manage timelines, configure keyframes, understand camera animation logic, navigate export presets. That's the wrong starting point for someone who just wants to show how they got from Seoul to Lisbon, or how a route unfolds across a campaign video.
What I kept coming back to in the design work was a simple observation: users don't need fewer features. They need more confidence. The right customization controls, organized clearly, with the map updating in real time as every decision is made, changes the entire experience. It turns guesswork into creative control.
That's the design problem Mappi needed to solve — not less power, but better legibility. Not fewer options, but a cleaner path through them.
The tools are capable. The experience is where things fall apart.
Map animation tools in this category are genuinely powerful. Many support routes, GPX imports, transport modes, camera movement, and multi-platform export. The feature set isn't the problem. The problem is how those features are organized, revealed, and connected to the output a creator actually sees.
The pattern that shows up consistently: users make a change, wait for an update, export something that doesn't match what they expected, and start over. The workflow doesn't build confidence, it erodes it.
Customization feels buried
Controls for route color, map style, labels, pins, and camera are often scattered across panels or hidden behind tabs, making the creative options harder to find than they should be.
Preview creates uncertainty
When changes don't reflect in real time, creators have to guess whether their settings will produce the right result. Export becomes a gamble instead of a confident final step.
Navigation feels technical
Interfaces that expose too many settings at once or organize them by tool rather than by task making simple decisions feel disproportionately complex.
Export formats don't match creator needs
Generic export settings don't speak the language of social creators. A creator making a YouTube video needs different defaults than one building a presentation or a branded reel.
The map feels passive
In tools where the preview only updates on request, the map becomes a destination you arrive at after configuring settings rather than a live canvas that reflects every creative choice as it's made.
Make the interface feel as clear as the map itself.
The opportunity wasn't to rebuild the category from scratch. It was to take a genuinely capable tool and make the experience match the quality of the output it could produce. Map animation tools already have the features creators need. What's missing is a design layer that makes those features feel accessible, logical, and connected to a live result.
Mappi's design direction came down to a few clear moves: bring the map forward as the centerpiece of the editor, group controls by what they actually do, and let every change land in the preview immediately. Give creators a workflow that moves from destination to export without forcing them to think about the tool between steps.
What creators want to make
What Mappi needed to deliver
Five principles that guided every design decision.
These weren't abstract guidelines, they were working constraints that shaped which patterns to build and which to cut. Each one comes back to the same underlying goal: help creators feel capable and confident, not technical and overwhelmed.
Four steps from idea to polished animation.
The Mappi workflow was designed to feel progressive, each step builds directly on the previous one, and nothing requires the creator to leave the map to understand what's happening. The entire experience is organized around the assumption that creators know where they're going; the tool just needs to get out of the way.
Pick destinations
Add start points, waypoints, and endpoints to define the route. Add and reorder locations freely. The map updates live as each destination lands so you're always looking at the real shape of the journey, not a placeholder.
Design the map animation
Choose a map style, set the transport mode, customize route color, pin appearance, label visibility, and borders. Every control is grouped by destination so you're never hunting for a setting that belongs somewhere else.
Preview in real time
The live map preview sits at the center of the editor. Every change to style, color, and route is immediately visible. The scrubber lets you move through the animation at any point to check timing, transitions, and adjust visual settings before committing to an export.
Export for the right channel
Choose from creator-specific export formats: 4K MP4 for YouTube, square or vertical for Instagram and TikTok, transparent background for compositing and branded use cases. The export options speak the language of the creator's output, not the language of a generic video encoder.
The interface choices that made complexity disappear.
Every decision in the editor UX was evaluated against the same question: does this make the creator feel more in control, or less? The following patterns came directly from that filter, each one addressing a specific friction point in the creation workflow.
What makes Mappi different from the rest of the category.
The animated map space has capable tools. What they share is a tendency to prioritize feature depth over experience clarity. Mappi's design advantage isn't about having more, it's about making what's there feel lighter, faster, and more intentional.
Clean, simple interface
No nested menus, no buried settings, no cognitive overhead. The editor shows exactly what you need for the task you're on, nothing more, nothing less.
Real-time map preview
Every change: map style, route color, pin type, transport mode, and zoom level lands in the preview immediately. What you see is what you export.
Better UX, easier navigation
Controls are grouped by creative task, not system architecture. Moving between destinations, styling, and export feels like a flow, not a maze.
Highly customizable, not overwhelming
Map styles, route colors, custom pins, labels, borders, transport modes, route speed, and camera zoom are all available, organized so none of it feels like too much at once.
Creator-first export
Export presets built for real creator workflows: 4K MP4 for YouTube, vertical formats for TikTok and Reels, transparent background for overlays and branded use. The format names match what creators actually say.
Browser-based, no install required
Mappi runs entirely in the browser. No download, no account barrier to getting started, no version management. Open it, make a map, export it.
What the design work was aimed at producing.
The outcomes for Mappi are measured by product design impact, the quality of the decisions the interface makes possible and the confidence it builds in the creator doing the work. These aren't claimed metrics. They're the design targets every pattern in the editor was built toward.
Reduced perceived complexity
By organizing controls by task and keeping the interface clear of unneeded friction, the editor is designed to feel lighter than the feature set underneath it actually is.
Improved confidence before export
Real-time preview and the scrubber-based animation review are designed to turn export from a guess into a confirmation, creators know what they're producing before they produce it.
Faster visual iteration
When every change lands immediately in the preview, iteration gets faster. Creators spend less time waiting for updates and more time exploring what the map can look like.
Better creative control
Making customization visuals: swatches, thumbnails, and icons gives creators a stronger sense of agency. They're making real choices, not adjusting abstract settings.
A more approachable creative path
The progressive four-step flow: destinations, design, preview, and export is designed to give first-time users a clear path through the editor without limiting what experienced users can do.
Simplifying something powerful without making it feel watered down.
Mappi was a case study in a design problem I find genuinely interesting: how do you make a powerful creative tool feel simple, without actually removing the power?
The instinct when something feels complex is to cut features. But that's usually the wrong answer. The right answer is usually organization: grouping controls by what they do, putting the output at the center of the experience, and building enough visual feedback into the interface that creators never have to guess. The complexity doesn't go away. It just stops being visible at the wrong moment.
The biggest design conviction I came back to throughout this work was about real-time preview. It's not a nice-to-have. It's the design decision that makes every other decision in the editor better. When the map is always alive and always reflecting the current state of your choices where the entire creative workflow changes. Iteration feels safe. Export feels obvious. The tool disappears and the map is all that's left.