Journey Canvas Overview: Elements and Interface

The Journey Canvas is your main workspace for creating and editing journey maps. This comprehensive guide explains every element of the interface and how to use them effectively to build compelling customer journey visualizations.

Canvas Interface Overview

Your canvas is an infinite workspace where creativity meets structure. The main canvas area hosts touchpoints (individual interaction points), connections (flow lines between touchpoints), and regions (grouped touchpoint areas). The dot grid background helps align elements precisely, while zoom levels from 25% to 200% let you work on details or see the big picture.

The beauty of the infinite canvas means you never run out of space. Pan in any direction to explore and expand your journey maps without constraints.

The floating toolbar is your command center, containing all essential tools in an interface that adapts beautifully to any screen size.

Adding Elements starts with two primary buttons. The blue “Add Touchpoint” button creates new customer interaction points (up to 10 for free users, 100 for Pro users), while the green “Add Region” button groups related touchpoints for better organization.

View Controls help you navigate your workspace efficiently. Zoom in and out for detailed work or overview perspectives, use “Fit View” to auto-frame all touchpoints in your viewport, and toggle the minimap for easy navigation of large journey maps.

Layout Controls provide instant organization. Choose horizontal layout to arrange touchpoints left-to-right or vertical layout for top-to-bottom flow, perfect for different journey visualization styles.

The Panel Toggles unlock powerful analytics and insights. The Summary Panel provides journey metrics and financial analysis (Pro+ feature), the Feelings Panel offers emotional journey visualization (Pro+ feature), the Personas Panel manages persona scoring (Pro+ feature), the History Panel handles version control, and the Minimap helps navigate complex journey maps.

Save & Share functions keep your work secure and collaborative. Manual save complements auto-save every few seconds, share functionality invites team members or creates public links, and download exports create presentation-ready images.

The standard React Flow controls in the bottom right provide alternative zoom controls, fit view centering, and lock/unlock functionality to prevent accidental pan and zoom actions.

When enabled, the minimap becomes your navigation companion for large journey maps. It shows your current position, enables quick navigation by clicking different areas, highlights touchpoints as colored dots, and automatically scales with your journey size.

Creating Your First Touchpoint

Creating touchpoints is intuitive and immediate. Click “Add Touchpoint” in the floating toolbar, choose your location by clicking anywhere on the canvas, and the edit panel opens automatically on the right side for immediate property configuration.

Basic Properties are available to all users and form the foundation of effective touchpoints. Add a clear, descriptive name, select the type (Awareness, Consideration, Purchase, Support, Advocacy), identify the journey phase, describe the user action, note the frequency of interaction, and specify the channel (online, offline, phone, email).

Advanced Properties are exclusive to Pro+ subscribers and provide deeper insights. Configure emotional impact levels, define financial metrics including operational costs and revenue potential, set persona relevance scores, identify pain points customers face, and estimate time spent at each touchpoint.

Connecting Touchpoints

Creating connections between touchpoints brings your journey to life. Hover over any touchpoint to reveal connection handles, click and drag from one handle to another touchpoint, and release to create an animated tentacle connection that shows customer flow.

Connection types include forward flow for normal customer progression, backward flow when customers return to previous steps, and branching for multiple paths from single touchpoints.

Working with Regions

Regions bring organization and visual clarity to complex journey maps. Click “Add Region” in the floating toolbar, position it on your canvas, drag touchpoints into the region to group them, and resize by dragging corners to fit your content.

Regions provide multiple benefits including visual organization for related touchpoints, collapse and expand functionality to manage complexity, color coding for different journey phases, and batch operations to move entire groups together.

Canvas Shortcuts & Tips

Master these keyboard shortcuts to work more efficiently: Space + Drag pans the canvas, Ctrl/Cmd + Scroll zooms in and out, Ctrl/Cmd + 0 fits the view, Delete removes selected touchpoints, and Escape deselects all items.

Best Practices elevate your journey mapping. Organize effectively by using regions for related touchpoints, keeping similar types aligned, and maintaining consistent naming conventions. Optimize performance by using regions for large journeys (50+ touchpoints), utilizing the minimap for navigation, and collapsing unused regions. Enhance collaboration by saving frequently when working with teams, using clear touchpoint names, and adding context through touchpoint descriptions.

Mobile & Responsive Design

Tablet support provides excellent touch navigation with pinch-to-zoom and drag-to-pan gestures. The simplified toolbar focuses on essential tools, while portrait mode switches the toolbar to vertical layout for optimal screen usage.

Phone users can view journeys effectively, but editing is optimized for tablet and desktop experiences. For full functionality, use the web app on larger screens where the interface truly shines.

Troubleshooting

Performance issues are easily resolved. If the canvas feels slow, check your zoom level (closer zoom improves performance), use regions to organize large journeys, and close unused panels. For connection problems, ensure touchpoints aren’t overlapping, try zooming in for precise connection work, and refresh if connections don’t appear properly.

Saving issues typically relate to connectivity. Check your internet connection, watch for the save indicator in the toolbar, use manual save when needed, and refresh to verify changes persisted.

Next Steps

Now that you understand the canvas, explore these essential guides: master Touchpoint Creation to build journey foundations, discover Journey Templates for faster creation, understand Journey Analytics for insights, and learn Team Collaboration for effective teamwork.