SaaS Feature Design
Interactive Tutorial for User Education
SaaS Feature Design
Interactive Tutorial for User Education
SaaS Feature Design
Interactive Tutorial for User Education
Product Strategy
UX Design
Vibe Coding
Designed for LTX Studio
Designed for LTX Studio
Interactive Tutorial Experience within LTX Studio platform
Interactive Tutorial Experience within LTX Studio platform
Interactive Tutorial Experience within LTX Studio platform
Overview
Overview
The tutorial lives inside the generation space. First time a new user lands there, they're invited into tutorial mode. It walks them through LTX's key features, interactively, with a complete story from start to finish.
This case study is about how we built it. Not just the design decisions, but the process. It's about a designer, a developer, and a PM shipping together in a way that's a little different from how most teams work.
The tutorial lives inside the generation space. First time a new user lands there, they're invited into tutorial mode. It walks them through LTX's key features, interactively, with a complete story from start to finish.
This case study is about how we built it. Not just the design decisions, but the process. It's about a designer, a developer, and a PM shipping together in a way that's a little different from how most teams work.
Role, Team & Duration
Role, Team & Duration
Product Designer
Product Designer
Product Designer
Product Manager
Engineer
Product Manager
Engineer
Product Manager
Engineer
March 2026
March 2026
March 2026
The experimental sprint
The experimental sprint
The experimental sprint
LTX Studio is an AI video generation platform with a learning curve, not because it's complicated, but because users don't know what's possible. To tackle this, we ran an experimental sprint: a designer, a developer, and a PM, each leading in their domain but collaborating on everything.
This started with brainstorming together, & we landed on one focus: new users weren't finding LTX's unique features in the generation space. Contained enough to ship in chunks, open-ended enough to build something interesting.
LTX Studio is an AI video generation platform with a learning curve, not because it's complicated, but because users don't know what's possible. To tackle this, we ran an experimental sprint: a designer, a developer, and a PM, each leading in their domain but collaborating on everything.
This started with brainstorming together, & we landed on one focus: new users weren't finding LTX's unique features in the generation space. Contained enough to ship in chunks, open-ended enough to build something interesting.
We could've done popups. We didn't.
We could've done popups. We didn't.
We could've done popups. We didn't.
The default solution here might be obvious: tooltips, a modal walkthrough, a few coach marks. We have all seen it a hundred times. But we wanted to build something that actually felt delightful to use, so the user would learn something out of it, instead of just hitting 'next' n times.
So we made a tutorial mode: a self-contained experience with a story, interactive feature play, that lives inside the product.
The default solution here might be obvious: tooltips, a modal walkthrough, a few coach marks. We have all seen it a hundred times. But we wanted to build something that actually felt delightful to use, so the user would learn something out of it, instead of just hitting 'next' n times.
So we made a tutorial mode: a self-contained experience with a story, interactive feature play, that lives inside the product.
Storyline for the tutorial
Storyline for the tutorial
Storyline for the tutorial
Ideating in code, together
Ideating in code, together
Ideating in code, together
This is where it got different. Early brainstorming happened in Figma, but kept extremely rough: basic shapes, potential flows, just enough to think out loud visually. Those rough ideas went straight into Cursor and became something you could actually click on, fast.
The three of us were in the same room the whole time. PM keeping us honest on scope, dev flagging what was feasible in real time, & me exploring interactions directly in the product.
This is where it got different. Early brainstorming happened in Figma, but kept extremely rough: basic shapes, potential flows, just enough to think out loud visually. Those rough ideas went straight into Cursor and became something you could actually click on, fast.
The three of us were in the same room the whole time. PM keeping us honest on scope, dev flagging what was feasible in real time, & me exploring interactions directly in the product.
This is where it got different. Early brainstorming happened in Figma, but kept extremely rough: basic shapes, potential flows, just enough to think out loud visually. Those rough ideas went straight into Cursor and became something you could actually click on, fast.
The three of us were in the same room the whole time. PM keeping us honest on scope, dev flagging what was feasible in real time, & me exploring interactions directly in the product.
Initial brainstorming
Initial brainstorming
Initial brainstorming
Switching to detailed design, and knowing why
Switching to detailed design, and knowing why
Switching to detailed design, and knowing why
Once the concept had legs, I brought the detailed work back into Figma. The interaction direction was clear, so this was about the things Figma is actually good at: visual hierarchy, finer details, visual design explorations, states, and getting stakeholder input before we built further.
Once the concept had legs, I brought the detailed work back into Figma. The interaction direction was clear, so this was about the things Figma is actually good at: visual hierarchy, finer details, visual design explorations, states, and getting stakeholder input before we built further.
Rough sketches & ideation on figma
Rough sketches & ideation on figma
Rough sketches & ideation on figma
Back to code, closing the loop with the developer
Back to code, closing the loop with the developer
Back to code, closing the loop with the developer
Once the journey, designs, and story were signed off, we were back in Cursor. I handled small interaction fixes and micro-animations directly rather than filing tickets. Things like the shimmer animation, the tutorial cursor, I could feel them, tweak them live, and raise a PR.
That's the part that felt most different. I was applying old CSS knowledge with AI filling the gaps. And I found that being able to read and understand code was very valuable. When AI makes mistakes, it's much faster to guide it through code than through words.
Once the journey, designs, and story were signed off, we were back in Cursor. I handled small interaction fixes and micro-animations directly rather than filing tickets. Things like the shimmer animation, the tutorial cursor, I could feel them, tweak them live, and raise a PR.
That's the part that felt most different. I was applying old CSS knowledge with AI filling the gaps. And I found that being able to read and understand code was very valuable. When AI makes mistakes, it's much faster to guide it through code than through words.
The data so far
The data so far
The data so far
Early signals are good. Users who finished the tutorial came back the next day more, and explored more features. Most drop-off happens at step 1, if users get past it, they tend to finish.
The big question now is entry rate. The next step being improving entry points for the tutorial so more users can access it.
Early signals are good. Users who finished the tutorial came back the next day more, and explored more features. Most drop-off happens at step 1, if users get past it, they tend to finish.
The big question now is entry rate. The next step being improving entry points for the tutorial so more users can access it.
This process is great for speed, harder for iterations
This process is great for speed, harder for iterations
This process is great for speed, harder for iterations
Having everyone in the same room made early brainstorming fast. Getting the PM's thoughts as I was building, devs flagging feasibility in real time, seeing small changes live in code, that part was quick, effective & very productive.
The harder bits: we didn't spend enough time exploring the problem before jumping into building. I was figuring out UX and UI at the same time, which meant some early decisions got thrown out and cost the dev time. Once something was built, it felt like a lot to ask to keep changing it, so I iterated less than I would've liked.
Having everyone in the same room made early brainstorming fast. Getting the PM's thoughts as I was building, devs flagging feasibility in real time, seeing small changes live in code, that part was quick, effective & very productive.
The harder bits: we didn't spend enough time exploring the problem before jumping into building. I was figuring out UX and UI at the same time, which meant some early decisions got thrown out and cost the dev time. Once something was built, it felt like a lot to ask to keep changing it, so I iterated less than I would've liked.
© 2026 | Designed and developed by me with ♡ | All Rights Reserved.
© 2026 | Designed and developed by me with ♡ | All Rights Reserved.
© 2026 | Designed and developed by me with ♡ | All Rights Reserved.