Guideflow
Simplified editor for interactive product demos
Simplified editor for interactive product demos
SaaS platform helping teams create AI-powered interactive product demos in minutes. Explored how the demo-creation experience could evolve with simplified user journeys and a stronger visual foundation. Elements of the concept were implemented in the live platform.
SaaS platform helping teams create AI-powered interactive product demos in minutes. Explored how the demo-creation experience could evolve with simplified user journeys and a stronger visual foundation. Elements of the concept were implemented in the live platform.
SaaS platform helping teams create AI-powered interactive product demos in minutes. Explored how the demo-creation experience could evolve with simplified user journeys and a stronger visual foundation. Elements of the concept were implemented in the live platform.
A gap between tech and execution
A gap between tech and execution
Guideflow is a B2B SaaS platform for AI-powered interactive product demos. Partnered with the team to explore how its experience could evolve.
Guideflow is a B2B SaaS platform for AI-powered interactive product demos. Partnered with the team to explore how its experience could evolve.
The work focused on simplifying core workflows and lifting the visual standard to match other premium B2B tools. The research highlighted a gap between the strength of the underlying technology and the visual and structural execution. The interface felt busy, and non-technical users were being asked to make too many decisions upfront.
The work focused on simplifying core workflows and lifting the visual standard to match other premium B2B tools. The research highlighted a gap between the strength of the underlying technology and the visual and structural execution. The interface felt busy, and non-technical users were being asked to make too many decisions upfront.
Making complexity feel simple
Making complexity feel simple
As an interactive demo platform, Guideflow needs to make relatively complex workflows feel straightforward for people who may not be deeply technical.
As an interactive demo platform, Guideflow needs to make relatively complex workflows feel straightforward for people who may not be deeply technical.
The main challenge was redesigning the experience so creating a demo felt approachable and guided. Whilst significantly lifting the visual standard to match other premium B2B tools. All of this within the constraints of a focused design challenge, so scope and depth needed to be tightly controlled.
The main challenge was redesigning the experience so creating a demo felt approachable and guided. Whilst significantly lifting the visual standard to match other premium B2B tools. All of this within the constraints of a focused design challenge, so scope and depth needed to be tightly controlled.
The original Guideflow interface before redesign
Onboarding flow guiding users through demo creation
Simplified user journey
Simplified user journey
Re-framed the core journey around a simpler, step-by-step flow from capture through to publishing. Reduced the number of decisions users had to make at each stage.
Re-framed the core journey around a simpler, step-by-step flow from capture through to publishing. Reduced the number of decisions users had to make at each stage.
Each screen focused on a single task, removing cognitive overhead. The flow guided users naturally from recording their first demo to building a library of shareable experiences. No unnecessary friction. No unclear next steps.
Each screen focused on a single task, removing cognitive overhead. The flow guided users naturally from recording their first demo to building a library of shareable experiences. No unnecessary friction. No unclear next steps.
Modern component system
Modern component system
Introduced a scalable component system with clear visual hierarchy. Used layout, colour, and typography to emphasise what mattered most on each screen.
Introduced a scalable component system with clear visual hierarchy. Used layout, colour, and typography to emphasise what mattered most on each screen.
The system gave the product a more premium feel whilst maintaining approachability. Brought the concept to life through high-fidelity prototypes that showed how the simplified structure and consistent components could work together. Ready for engineering implementation without ambiguity.
The system gave the product a more premium feel whilst maintaining approachability. Brought the concept to life through high-fidelity prototypes that showed how the simplified structure and consistent components could work together. Ready for engineering implementation without ambiguity.
Proposed editor architecture and component organisation
Live-recording modal with real-time click tracking and progress feedback
Impact on live product
Impact on live product
The concept helped establish a more confident, premium SaaS aesthetic for Guideflow.
The concept helped establish a more confident, premium SaaS aesthetic for Guideflow.
Demonstrated how a cleaner structure could support non-technical users working with advanced demo tooling. Elements of the work were implemented in the live platform, showing how consistent components and clearer flows could make the platform feel both more powerful and easier to use. The designs proved their value by moving from concept to production.
Demonstrated how a cleaner structure could support non-technical users working with advanced demo tooling. Elements of the work were implemented in the live platform, showing how consistent components and clearer flows could make the platform feel both more powerful and easier to use. The designs proved their value by moving from concept to production.
A high-fidelity, integrated preview mode