Magic Story Box

A ChatGPT-powered learning app that promotes adult AI literacy through storytelling with AI

🗓 Time
May 2023 | 4 weeks
📌 Skills
Learning experience design; Artificial Intelligence; UI/UX; Web programming
🔧 Tools
ChatGPT API (gpt-3.5-turbo-instruct); Javascript, HTML & CSS; Airtable; Webflow; Wized; Adobe Creative Suite (Photoshop, Illustrator, Premiere); Canva
⭐ My Role
From concept to completion, I independently designed the entire learning experience using the SAM (Successive Approximation Model) and implemented the interactive AI functionality through ChatGPT’s API and web programming.
🎯 Purpose
This project aims to foster critical AI literacy among adult learners through guided interaction with an AI story generator. It was an innovative learning design project I created at Columbia University.
👇 Introductory Video (4 mins)

Problem

With the advent of generative AI, traditional approaches to storytelling fail to address the unique challenges and opportunities presented by AI-driven content creation. How can I develop a learning platform that guide users to explore the creative potentials of AI, while fostering critical reflection of its quality and ethical implications?

Learning Goal

This program is designed as self-paced, informal learning for adults with a basic understanding of AI technologies. The goal is to cultivate structured storytelling techniques and critical evaluation skills with AI. Using Bloom's Taxonomy, I break down the learning objectives underlying the overarching goal:

Solution

Aiming to foster creative writing skills and promote hands on experimentation with technology, I sought to create an experience that is engaging, fun and encourages personal meaning-making. Two strategies guided the design:

💡Scaffolding: Emphasizing progressive supports that enable learners to gradually develop new understanding and skills, the platform scaffolds critical AI storytelling skills through three stages. It begins by introducing the user to storytelling techniques, then engages them to experiment with an AI story generator, and finally guides them in critically reflecting on the stories they have created. 

💡Active Learning: By creating stories based on individual interests, users build understanding of the technology through active experimentation that is fun and personally meaningful.

These concepts are embodied in the metaphors of the "Magic Story Box" and "Magic Recipe". By putting the ingredients of their magic recipe (their story elements) into the magic story box (the AI generator), the users will learn the trick of harnessing machine intelligence to create unique and imaginative stories!

1️. Planning and writing their story ("Individualize their Magic Recipe”)

In the first phase, users are guided to ideate their story components using a narrative framework ("Personal Magic Recipe”), which breaks down the story into the background (“The Story's World”), the plot (“The Plot”), and the narrative style (“The Art of Narration”). Using this framework, users will create an initial story without AI assistance.     

This step fosters understanding and application of structured storytelling.

2️. Regenerating the story with AI ("Play with the Magic Box")

Then, users will recreate their stories using the AI generator embedded into the website. Three versions will be generated, each adding more detail and complexity to the previous.

In the first round ("Providing basic information"), users instruct the AI generator to produce a story with minimal plot, setting, and character information.

In the second round ("Adding depth to your settings and characters"), they will put in additional setting and character details.

In the last round ("Specifying the narration"), users further specify stylistic preferences such as genre, style, tone, etc.

Throughout the different rounds, users have the flexibility to modify the inputs until they achieve their desired creative vision. Through iterative and incremental experimentation with the technology, the learners build understanding of AI prompting patterns.

3️. Comparing and refining the stories (“Reading the Story")

In the last stage, the users are guided to critically compare human and AI-assisted versions using 7 assessment criteria, reflecting on the strengths and weaknesses of AI-generated stories and how they would conceptualize their strategies differently. Then, they will have the opportunity to refine their narratives by integrating the strengths of both human and machine intelligence.

This exercise aims to foster reflection and critical thinking on AI content generation.

After completing all these steps, users are prompted to reflect on the entire learning experience for ongoing learning and development.

Process

1️. Analysis: Understanding Stakeholders and Design Requirements

Insights from AI experts and learning specialists emphasized the necessity for robust theoretical framework and adequate scaffolding to promote active learning. Therefore, I adopted constructive literary theory to develop the storytelling framework and devised the learner journey with progressive interactions.

🔍 Expert Interview Highlight

"AI is a productive content generator, but not necessarily a good storyteller. Consider the inherent factors and elements that make a story compelling."
"Creative writing involves a variety of cognitive processes and skills. Simple instructions or task descriptions are insufficient for engaging the complex learning necessary for these skills."

From user interviews, it became clear that many seek a platform that is customizable and fun to engage with. Accordingly, I prioritized ease of navigation and engaging visuals in interface and interaction design.

🔍 Learner Interview Highlight

"I've always been drawn to storytelling. I am really interested to see how AI can add to my creativities."
"The conceptof integrating AI with storytelling sounds fascinating! But writing an entire story might be too much for me. I prefer something more manageable and less time-consuming."

2. Design: Creating the Learner Journey

Combining theoretical and product research with stakeholder feedback, I designed a three-step story-creation journey that guide user to experiment storytelling with AI using a structured storytelling framework. The following swimlane diagram illustrates how the content and interaction in each step facilitate user behavioral and cognitive activities, leading to the achievement of specific learning goals.

Click to view in FigJam

3. Development: Developing the Interface and Interaction

Through self-learning and extensive prototyping and testing, I quickly learned API configuration and built an customizable AI generator using ChatGPT's API. I developed the front-end interface in Webflow, and integrated web commands and interactive functions through API integration on Wized.

1️⃣ Developing front-end interface in Webflow

2️⃣ Integrating Open AI's & Airtable's API in Wized

3️⃣ Configuring HTTP request & API response

The front-end and interaction design follows these principles:

📝 Simplicity & fun: Using metaphorical language and concise visual elements, the website creates a fun and engaging story-driven experience.

📝 Structured navigation: Content is organized under distinct, clickable drop-down sections that provide clear structure and easy navigation.

📝 Easy editing: Custom codesare embedded to transfer user inputs across sections, reducing repetition and extraneous cognitive load.

4. Testing: Feedback and Future Improvement

The platform was tested with 7 adult participants at its final showcase at Teachers College. Many reported that the interactions offered them divergent inspirations for enhancing their own storytelling, indicating the platform’s success in fostering exploratory and reflective learning with AI. At the same time, they also reflected on the rigidity and formulaic patterns observed in AI-generated content.

🔍 Learner Feedback Highlight

"The systematic breakdown of the story elements is really helpful. I’ve never planned story writing so strategically before."
"The variety of AI-generated stories is impressive. They stimulate a lot of thoughts in me on how to creatively retell the story!”
“After several trials, you start to notice certain patterns in its content and it becomes repetitive."

Reflection

Based on user feedback, I identified two main areaas for future improvement:

❌Lack of motivation and Patience ➡ ✅Increase information digestability and story development support:
Creative writing is cognitively demanding. Many participants rely heavily on the generator without thoughtfully creating their own narratives first, which prevents meaningful comparisons and reflections. To reduce the creative burden and foster more divergent ideation, future improvements might include: 1) presenting the information through adaptive module-based tutorials for easier assimilation 2) including gamification elements, such as personifying the AI generator to enhance user engagement, and 3) incorporating AI-driven recommendation and feedback throughout story development process to guide and inspire users.

❌Restrictive AI interaction ➡ ✅More flexible conversational interaction: The story structure limited user's AI input to predetermined story elements, resulting in restricted text refinement. Many users expressed a desire for more flexible AI interactions, similar to the conversational experience with ChatGPT. Future iterations could incorporate AI into a conversational interface or Avatar, allowing more nuanced control over content.