Storytracks UX

Visit Live Site


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.




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.


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)


  • UX Design
  • Engineering
  • Logo Design


This project was made in 5 days for a hackathon.


Storytracks UX The authoring tool is intended to be used on any web or mobile-view.

Storytracks UX The story can have interactive components that allow readers to make choices

Storytracks UX The content team has a simple interface similar to powerpoint with each story having slides that can be added, duplicated, deleted, and rearranged.

Storytracks UX 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.

Storytracks UX 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

Storytracks UX

Open Example

Copyright © Quarkstars LLC 2023