Storytracks
Visit Live Site
Description
Storytracks is a prototype branching story authoring tool for scenario-based instruction and interactive fiction. It allows users to easily create and share their own "choose your path" adventure where the reader can make choices that have consequences. The goal was to build a Minimum Viable Product (MVP) for a hackathon sponsored by Convex, a new exciting real-time database technology. The rapid protoype was created in 5 days.
Platforms
Web
Problem
Authoring tools for branching stories have a high learning curve non-technical users and require extensive planning to execute. Further, no tools have realtime collaboration despite the team-driven nature of instructional design.
Solution
Create a branching story authoring tool as simple as Powerpoint and collaborative as Google Slides. Also leverage AI directly in the tool for story ideation, narrative copy, and image prompts. This can be used for iterative Instructional Design approaches such as Successive Approximation Model (SAM).
Tech Stack
- Next.js (with Serverless Functions)
- React
- Ionic
- Tailwind
- Convex (Realtime database)
Role
- UX Design
- Engineering
- Logo Design
Timeline
This project was made in 5 days for a hackathon.
Screenshots
The authoring tool is intended to be used on any web or mobile-view.
The story can have interactive components that allow readers to make choices
The content team has a simple interface similar to powerpoint with each story having slides that can be added, duplicated, deleted, and rearranged.
The notes section has an AI assistant that is aware of the current state of the story and can provide ideas, dialog, and image prompts.
The creative team can collaborate in real-time using an edit link
Example Ghost Story
This is an example of a quick prototype story 15 minutes that can be generated with the help of the AI integration (images by Leonardo.ai).
Open Example
Instructional Design
- How do you approach working with SME: What if they ghost you? What if they don't care. Giving way too much? Focus someone. Too little, writing something out giving best guess.
- Using ADDIE - Analyze, Design, Development, Implement, Evaluate:
- Product Manager Hat - Marketing / Grow
- Analyze - Why training model
- Design - storyboard, interview, brainstorm
- Develop - storyline
- Implement - LMS Admin
- Evaluate - Evaluate. How to quantify helping people perform better.
- Your process: Design Document. Brainstorm. Storyboard. Prototype.
- xAPI
- Gagne's events
- Cognitive Information - were there any points it became overwhelming?
- Blooms Taxonomy
- Kirkpatrick's model of evaluation
Product Manager
- Product Research Document - PRD - Product Researcher
- Minimum Requirement
- AB Testing
- Backlog
- User and Market Research
- Disruptive Innovation
- Feature Flags