While working as part of the Sitecore Demo Solutions team, I designed a simplified UX flow for the Sitecore Demo Portal – a platform created to enable effortless deployment of Sitecore demos without requiring complicated technical configuration or setup.
The goal was to provide a clean, intuitive experience that allows users to launch fully functional Sitecore environments in just a few clicks. This was especially important given the complexity of the Sitecore product suite, where traditional deployments can be time-consuming and technically demanding.
The portal serves a wide range of users including Sitecore trainers, sales engineers, partners, and internal employees, helping them showcase Sitecore’s capabilities quickly, consistently, and with minimal friction. This tool is essential for accelerating enablement, improving demo quality, and scaling the platform’s reach across global teams.
Tools Used:
Figma, Adobe Photoshop, Adobe Illustrator
Step 1: Demo portal login
Users begin by logging into the Sitecore Demo Portal using their authorized credentials. This secure access ensures that only approved Sitecore staff, partners, and affiliates can deploy and manage demo instances.
🔒 Purpose: Secure entry point for managing demo environments.
Step 2: Basic user – home page
After logging in, users land on a clean and personalized home page tailored to their role. As a basic user, the homepage highlights accessible Sitecore products, recent activity, and quick access buttons for launching a new demo or revisiting existing instances.
🏠 Purpose: Provide an intuitive starting point for navigating the portal.
Step 3 – Select a Sitecore product
Users begin the demo deployment journey by selecting a specific Sitecore product they wish to showcase—such as Sitecore XM Cloud, Content Hub, or Personalize. Each product card includes brief descriptions and use-case highlights to help users choose the right option.
🧩 Purpose: Tailor the demo experience to a specific product or solution.
Step 4а: Select a Demo Template or Guided Tour
Once a product is selected, users can choose from available demo templates or guided product tours. Guided tours are built using Navattic, offering interactive, self-paced walkthroughs for specific features or customer journeys.
🎯 Purpose: Help users select pre-configured demo paths or interactive learning options.
Step 4b: Visual Architecture Diagram Preview
Each demo template includes a visual architecture diagram that outlines the technical setup of the environment—showing which components, services, and integrations are included. These diagrams give users a clear, high-level understanding of how the demo is structured before they proceed with deployment.
📊 Purpose: Improve decision-making by providing transparency into the demo’s infrastructure and supported capabilities.
Step 5a: Non-deployable Embedded Navattic Click-through Flow
For users who want to explore Sitecore functionality without deploying a full environment, an embedded Navattic click-through experience is available directly within the portal. This non-deployable flow simulates a full demo through interactive walkthroughs, showcasing key features in a lightweight, self-guided format.
🖱️ Purpose: Provide a fast, no-setup-required way to explore Sitecore capabilities—ideal for initial discovery, internal learning, or quick product overviews.
Step 5b: Instance Wizard – General Settings
The demo instance wizard begins with basic configuration options—such as instance name, description, region, and preferred language. These settings personalize and localize the demo experience.
⚙️ Purpose: Establish foundational settings for the new demo environment.
Step 6: Instance Wizard – Configure Active and Additional Demo Integrations
Users are presented with checkboxes to enable or disable various demo integrations such as personalization, headless delivery, or external DAM connectors. This step ensures the demo is tailored to the customer’s specific needs and context.
🔌 Purpose: Customize the demo’s functional scope by toggling key integrations.
Step 7a: Instance Wizard – Additional Options (Sales Demo Purpose)
For sales-focused users, this screen offers tailored configurations, such as demo narratives, pre-loaded user personas, and sample data relevant for different industries.
💼 Purpose: Equip sales engineers with a polished, client-ready demo environment.
Step 7b: Instance Wizard – Additional Options (Training Purpose)
For training purposes, this version of the wizard provides options like sandbox modes, user progress tracking, and test scenarios ideal for workshops or internal enablement.
🎓 Purpose: Support structured learning experiences with training-specific setups.
Step 8: Instance Wizard – Deployment Confirmation Page
Before launching the instance, users review a final summary of their selected settings. This confirmation page ensures all configurations are correct and provides a clear checklist of what will be deployed.
✅ Purpose: Prevent errors and confirm user intent before deployment.
Step 9: Instance Wizard – Deployment Details Page
Once confirmed, the instance is deployed. This screen provides real-time progress updates and deployment logs, keeping users informed of the process.
🚀 Purpose: Offer transparency and reassurance during the deployment process.
Step 10: Deployed and Active Instance Details Page
After deployment, users land on the instance details page where they can manage, restart, or delete their demo. It includes links to access the live environment, demo guides, and a history of configuration choices.
🔍 Purpose: Central hub for managing and reusing deployed demo instances.
