Visiontype

Act 1 — The Bet

The product vision — looking a few years out — couldn't be a deck. It had to be a story — an inspirational video the company could feel — not slides interpreted on the way out of a meeting. The bet was that if it felt tangible, every team would have an easier time executing against it.

Act 2 — Constraints & Cost

Trainual was pivoting product strategy at the same time it was scaling the PD&E org. Squads were absorbing technical debt while onboarding junior talent, and the product experience and vision was fragmenting. Visiontype was the response — a single cohesive picture that aligned squads, the board, and investors on where the product was going, while squads kept shipping inside their own product areas. To be believable, it had to be three things at once — cross-platform, technically feasible inside the team we actually had, and structured so each squad could implement a piece without coordination overhead.

In practice, the work was two phases: a sitemap planning phase with founders, product, and engineering leadership — current state and future state mapped out together — then a few weeks of head-down solo design to turn that architecture into the video. Squads kept their core roadmaps moving the whole time. The bet was that a single landed artifact would be worth more than the next sprint of incremental work.

Act 3 — Decisions & Tradeoffs

Architect the future before the screens

This came first — before any screens or UI existed. The sitemap architecture — current state and future state — was built in collaboration with founders, product, and engineering leadership, mapping every surface and the shared elements that cut across them. The point was to make sure the vision wasn't a series of pretty screens connected by hand-waving, but a navigable system with components an engineering team could actually implement. That architecture is what made the few weeks of head-down prototyping possible — every frame later drawn had a node here.

The future-state architecture in full. Universal Add at the top, eleven primary surfaces below, and the shared elements (Step Builder, Content Blocks, Roles, Profiles) cutting across them. Every frame in the prototype mapped to a node here — the vision was a navigable system, not a screen reel.

A story video, not a deck

The first call was format. A vision deck reads in five minutes and dies in a week; a story video — built from a real Figma prototype so every claim materialized as an actual screen — gives the company something they remember. The constraint was time — a few weeks to build something convincing across hundreds of frames — so the scope stayed ruthless: only the core interactions and a tight design-system language that could compose at speed. The aesthetic was glassmorphism (translucent panels, depth-aware blur, layered surfaces) — years before Apple rolled out Liquid Glass as the system-level language for iOS. The video became the artifact people referenced for months after the all-hands.

The Visiontype prototype, embedded live. These frames were the source material for the video the company watched at the Q2 all-hands — nobody clicked through them, but every shot in the rollout was pulled from here.

One visual language across desktop, mobile, tablet, and AR/VR

Cross-platform was a constraint the executive team set, so the question was how to express it without designing four parallel systems. The answer was glassmorphism — a translucent, depth-driven visual language that could carry across surfaces without re-skinning. It was trendy in 2022 and that was a real risk; the call was that visual coherence across the demo mattered more than picking a more conservative system that would have splintered between device classes.

The visual-language exploration board — four Glassmorphism candidates (one starred 'This one!'), four Neumorphism alternatives, and a row of animation inspiration thumbnails below — The explorations behind the visual-language call. Glassmorphism on top, Neumorphism alternatives below, and animation inspiration at the bottom — the starred frame is the language that carried.

A glassmorphism desktop frame from the vision — translucent content panels overlapping at depth, with body content sitting on a soft purple gradient and a founding-story panel anchored to the right — The language applied to desktop. Translucent layers and depth cues let the content surfaces breathe past the chrome — the visual component that carried the vision across device classes.

Mobile vision frame — an iOS lock-screen notification from a Trainual Beacon, demonstrating how the platform could surface context onto a phone via NFC/geofencing — The same visual language carrying across the device classes the executive constraint required. Each frame is a piece of the cross-platform argument made tangible — phone, tablet, AR, AI surface.

Tablet vision frame — a hand using an Apple Pencil on an iPad to manipulate org-chart cards in the glassmorphism interface — The same visual language carrying across the device classes the executive constraint required. Each frame is a piece of the cross-platform argument made tangible — phone, tablet, AR, AI surface.

Sketches to bridge current reality to vision

The prototype came first. The all-hands deadline didn't leave room for a conventional discover-define-design rhythm — building directly in Figma under deadline pressure was the only path to the demo. The sketches that mattered most came afterward, with a different job: illustrate the whole vision concept to the PD&E org and draw the line from the current reality to where the product was heading. The prototype proved the vision was buildable; the sketches made it legible to the people who'd actually have to implement against it.

Wall of paper sketches and storyboards drawn after the prototype — low-fi frames bridging the current Trainual product to the future state the prototype proposed, used for the PD&E rollout — The bridging sketches. Drawn after the prototype shipped, for the PD&E rollout — current reality on one side, vision on the other, the path between them in fat marker. The prototype answered 'is this buildable?'; these answered 'how do we get there from here?'

Filming happened in parallel with the prototype's final pass. Nic Forrest ran the cameras; I stayed on standby because the prototype was pushing Figma's performance ceiling hard enough that any unexpected rerender could blow up the takes mid-roll.

Behind-the-scenes photo from Visiontype filming week — Nic the videographer setting up a shot of the iPad org-chart interaction at a desk lit with practical lighting — Filming week — Nic Forrest running the cameras on the iPad scene, with me on standby in case the prototype hit a Figma performance wall. The deadline was tight enough that filming and prototyping ran in parallel.

Behind-the-scenes photo — Zac standing by during filming, watching the Figma prototype for performance issues while the iPad scene rolls — Filming week — Nic Forrest running the cameras on the iPad scene, with me on standby in case the prototype hit a Figma performance wall. The deadline was tight enough that filming and prototyping ran in parallel.

Act 4 — Outcome

Visiontype rolled out at the Q2 all-hands and what it produced went beyond a single meeting:

Reference, not recording. The video became the artifact people pointed at when the vision came up later; new joiners ramped through the videography team's walkthroughs instead of rewinding a recorded all-hands.
Independent implementation. Product, design, and engineering moved against the same picture, which let squads start building against the vision without waiting on more centralized framing.
Components survived to production. The structural moves in the sketch — widget grid, progress component, surface architecture — shipped in My Desk 2.0; the vision wasn't decorative.

The clearest example of that survival is the My Desk 2.0 page — the vision sketch's widget grid, progress component, and surface architecture all shipped, intact.

Side-by-side of the My Desk vision sketch (paper wireframe with a search bar, widget grid, and progress dial) next to the shipped My Desk 2.0 page in Trainual (Up Next list, Completions ring, Type filter row) — The vision sketch on the left, the shipped My Desk 2.0 on the right. Same widget grid, same progress component, same architecture — the vision survived contact with implementation because the architecture had been the spine of the work all along.

The room's reaction landed how vision work needs to land — short, loud, in the moment:

"Inspire and rally: Mission Accomplished!" — Shawn J.

"This is so damn cool." — Joe C.

"This is CRAZYYYY COOL! How exciting!" — Marlowe E.

"That is EPIC." — Seiji C.

"THIS IS FIRE!" — Chris R.

Three-panel screenshot of the company-wide Zoom chat from the Q2 all-hands rollout — dozens of reaction messages from team members across the company, including the quoted Shawn J., Joe C., Marlowe E., Seiji C., and Chris R. plus many more — The raw chat dump from the all-hands. The quotes above were the headlines; the full reaction footprint shows how broadly the vision landed across the org.

A second walkthrough focused on the interaction model across surfaces.

Act 5 — Reflection

The honest mistake was timing the rollout against the strategic pivot rather than ahead of it. By the time Visiontype landed, the org was already absorbing the pivot's velocity hit and the vision came in on top of fatigue that earlier framing could have softened. A version of this work that preceded the pivot — even by a quarter — would have given the org a destination to pull toward instead of a destination to interpret while running. The lesson, which carried directly into the design-system work that followed, was that the artifact that aligns an org has to land before the decisions it's meant to align, not alongside them.