User Journey Planner

Organize user journeys, align your team. Plan and coordinate user touchpoints across your entire team. Map journeys, assign ownership, and track progress.

Comment

Inspiration

Journey Planner was inspired by the chaos of fragmented user journey mapping. Across teams, we saw people relying on spreadsheets, sticky notes, and disconnected tools. This led to misalignment and inefficiencies. We wanted to create a centralized, collaborative space for mapping user experiences at scale.

What it does

Journey Planner allows teams to visually map user journeys using a grid-based interface where events (columns) intersect with categories (rows), and each cell contains key touchpoints (artifacts). It supports real-time collaboration, templates for common journey types, filtering, and project-specific customization—all while balancing freemium access for guests and authenticated users.

How we built it

  • Frontend: React 18 + TypeScript
  • State Management: Zustand for scalable state across projects, events, and artifacts
  • Backend: Supabase (PostgreSQL with Row Level Security)
  • Styling: Tailwind CSS
  • Authentication: Supabase Auth with guest-to-user migration
  • Architecture: Dual storage logic (localStorage for guests, Supabase for users) and modular, grid-based UX

Challenges we ran into

  • Synchronizing complex state across many interrelated entities
  • Migrating guest data to authenticated accounts without loss
  • Enforcing freemium limits without degrading UX
  • Optimizing grid performance for large datasets
  • Designing flexible templates adaptable to multiple industries

Accomplishments that we're proud of

  • A smooth user journey from guest to authenticated user
  • A powerful yet intuitive interface for mapping complex workflows
  • A scalable architecture ready for team collaboration
  • A working freemium model with clear upgrade paths
  • Launching with ready-to-use templates for faster adoption

What we learned

We deepened our understanding of scalable state management, multi-tenant data models, and the importance of progressive UX. We also learned how architecture decisions (like dual storage and project scoping) can simplify user transitions and support long-term flexibility.

What's next for Journey Planner

  • Real-time multi-user collaboration
  • Admin roles and team permissions
  • Export/shareable journey reports
  • AI-powered recommendations for journey improvements
  • More industry-specific templates and integrations with popular design tools

Built With

  • and-is-deployed-via-**netlify**-with-ci.-its-architecture-supports-a-modular
  • and-real-time-features.-the-app-supports-both-guest-(localstorage)-and-authenticated-users-(cloud-sync)
  • authentication
  • ci/cd
  • database
  • filtering
  • freemium-model
  • import/export
  • localstorage
  • modular-architecture
  • netlify
  • postgresql
  • react-18
  • real-time
  • row-level-security-(rls)
  • runs-on-**vite**
  • scalable-design-with-features-like-project-templates
  • styled-using-**tailwind-css**.-it-uses-**zustand**-for-scalable-state-management-and-**supabase**-(postgresql-+-rls)-for-backend-services-including-authentication
  • supabase
  • tailwind-css
  • type-safe-frontend
  • typescript
  • vite
  • zustand
Share this project:

Updates