Interactive demo for a cybersecurity product

The problem

The product had an outdated UI and was primarily explained through text and illustrative content, making it difficult for users to understand how it works in practice. Access to the real product experience was limited to sales-led demos, creating a gap between initial interest and actual understanding.

To address this, I set out to identify the most effective way to showcase the product online by combining competitive research with insights from the COO, CMO, and sales team.

Research

Customers want to see how a product actually works, even if the interface is not visually polished. Most competitors showcase their products through screenshots, videos, or guided demos, helping users quickly understand both functionality and differentiation. This makes the product more tangible early in the decision-making process.

Design strategy

I explored multiple ways of presenting the product — from static visuals to guided tours and demo tools — and proposed a lightweight, interactive approach that could be executed with existing resources. The strategy was shaped by the following decisions:

1. Focused presentation

   Rather than showing the entire interface, the demo highlights a few key interactions. This reduces cognitive load and keeps the experience clear and purposeful.

2. Leverage available resources

   Instead of relying on external tools or agencies, I collaborated with a developer and produced the demo myself, enabling faster iteration and full control over the experience.

3. Use motion to communicate behavior

   Key product actions, such as encryption and file changes, were captured as short motion-based visuals to clearly demonstrate how the system works in real time.

4. Interactive experience

   The demo is designed for step-by-step interaction, allowing users to actively engage rather than passively watch — improving both engagement and understanding.

5. Scenario-based storytelling

   The experience is framed around familiar workflows — such as handling emails or sharing files — so users can easily relate the product to their daily tasks.

Process

1. Structuring the demo

   I worked with the COO to identify the most important features from a sales perspective. We focused on three key capabilities — proactive encryption, invisible encryption, and secure collaboration — and translated them into a self-guided experience.

2. Storyboarding

   I created quick sketches and refined them into detailed storyboards using real product screenshots. This allowed stakeholders to align early and iterate efficiently through feedback.

   

3. Recording & editing

   I collaborated with a sales engineer to capture product workflows and provided guidelines for visual consistency. The recordings were edited into short, focused segments aligned with the intended user flow.

   

4. Implementation

   I worked with marketing and a developer to build a dedicated demo page. The experience guides users through one feature at a time with scroll-based progression and click interaction. On mobile, the layout was adapted with simplified navigation to maintain readability.

   

Impact

The interactive demo shifted the product experience from a sales-led explanation to a self-guided journey, allowing users to understand key workflows before contacting the sales team. This helps users build confidence earlier in their decision-making process, while also enabling more focused and efficient sales conversations.

Overall, it introduced a more experience-driven way of presenting the product online, moving beyond static content.

Reflection

This project helped me better understand how to bridge the gap between product complexity and user understanding in a B2B context. Working closely with sales and leadership teams gave me insight into how customers evaluate cybersecurity products and how early exposure to the product can shape their perception.

I learned the importance of starting with quick iterations, such as sketches and storyboards, to align stakeholders early and reduce rework later in the process. It also reinforced that how a product is experienced can be just as important as the product itself — especially when users cannot interact with it directly at the beginning.