Guideflow - My Framer Site

Back

Guideflow

Web App

At Guideflow, I designed part of the core platform, helping teams create interactive product demos. This was originally conceived as an independent design challenge that heavily influenced the architecture of the live product.

Problem

A comprehensive design concept for Guideflow, a B2B SaaS platform for AI-powered interactive product demos. Originally initiated as an independent design challenge, this project explored new UX/UI paradigms and established a robust visual foundation that heavily influenced the architecture of their current live platform.

Guideflow's interface, prior to the redesign proposal

Research

To begin the challenge, I audited the existing Guideflow platform and analysed competitors within the interactive demo space. The research revealed that whilst the platform’s core technology was strong, the user interface was overly complex and lacked the premium aesthetic expected by enterprise B2B clients. I identified key friction points in the onboarding and demo-creation flows, using these insights to drive a structural redesign aimed at reducing cognitive load for non-technical users.

Maintaining the original right-hand placement was essential to preserve a familiar workflow for existing users. However, the interface was entirely redesigned with a minimal, stripped-back layout, stripping away visual clutter to reduce cognitive load and make the editing process feel effortless

Meanwhile, part of the onboarding flow

Challenges

As an interactive demo platform, Guideflow needed a highly intuitive interface to help users manage complex workflows without friction. The primary objective was to simplify the demo creation process whilst significantly elevating the overall visual polish to align with premium SaaS industry standards, all within the constraints of a rapid design challenge timeframe.

The newly proposed Guideflow editor architecture

A live-recording modal designed to provide real-time feedback, displaying the exact number of captured clicks to help users track their demo's progression

Key Solutions

To resolve the workflow complexity, I reimagined the core user journey and developed a modern, scalable UI component system. I produced high-fidelity prototypes that illustrated a frictionless path from initial demo creation through to publishing. By establishing a clear visual hierarchy and standardising the interface components, I ensured the platform remained clean, accessible, and ready for rapid engineering implementation.

The evolution of the in-product modals

A high-fidelity, integrated preview mode

Impact

This design concept successfully established a premium SaaS aesthetic that elevated the brand’s visual standard. The high-fidelity prototypes provided a clear blueprint for workflow efficiency, reducing friction across the core demo-creation journey. Ultimately, the core architecture, layout, and visual language developed during this challenge were so effective that they were directly integrated into live production.