Customer Journey Map Template

A clean, modern, and interactive visual journey map template created with HTML, CSS, and JavaScript. Features both light and dark modes.

Features

• Responsive Design: Works on desktop and mobile devices
• Interactive Elements: Double-click any text to edit it
• Visual Feedback: Hover over sections to highlight related elements
• Light & Dark Mode: Toggle between light and dark themes
• Preference Saving: Remembers your theme preference for future visits
• Customizable: Easy to modify for your specific customer journey

How to Use

1. Open index.html in your web browser to view the journey map
2. Click the theme toggle button in the top-right corner to switch between light and dark modes
3. Double-click on any text to edit it (headings, paragraphs, list items)
4. Customize the content to match your customer's journey
5. Hover over sections to see related touchpoints across the journey

Structure

The journey map is structured with the following components:

• Persona: Customer profile at the top
• Stages: Key phases of the customer journey (Awareness → Advocacy)
• Touchpoints: Where and how customers interact with your product/service
• Actions: What customers do during each stage
• Emotions: How customers feel throughout the journey
• Opportunities: Potential improvements for each stage

Theme Options

The template supports two themes:

• Light Mode: A clean, bright theme for standard use or printing
• Dark Mode: A dark theme that's easier on the eyes, especially in low-light environments

The theme selection is automatically saved in your browser's local storage, and the template will respect your system's color scheme preference if you haven't made a selection.

Customization

You can further customize the template by:

• Editing styles.css to change colors, spacing, and visual elements
• Modifying the theme variables in the CSS to create custom themes
• Modifying index.html to add or remove sections as needed
• Extending script.js to add more interactive features

Credits

This template was created as a static HTML journey map builder. It uses:

• Font Awesome for icons
• Modern CSS techniques including CSS variables, Flexbox and CSS Grid
• Vanilla JavaScript for interactivity and theme switching