Apricot Stone City
Apricot Stone City
Increasing AI Literacy in high school students through collaborative storytelling
Increasing AI Literacy in high school students through collaborative storytelling
Timeline
Timeline
March-June 2023
March-June 2023
March-June 2023
Team
Team
Myself and one other UI/UX Designer
Myself and one other UI/UX Designer
Myself and one other UI/UX Designer
Skills
Skills
User Research
Analytics
UX Design
User Research
Analytics
UX Design
User Research
Analytics
UX Design
Deliverables
Deliverables
Thematic analysis
UX interview data
UX Figma prototype
Thematic analysis
1 Figma prototype
Thematic analysis
UX interview data
UX Figma prototype
Overview
Overview
I and another UX designer did research and iterated user flows for Apricot Stone City, a web-based game leveraging ChatGPT to teach high schoolers AI concepts. We worked on the project through the Empower Lab at Dartmouth, overseen by an Innovation PhD candidate at the Thayer School of Engineering.
I and another UX designer did research and iterated user flows for Apricot Stone City, a web-based game leveraging ChatGPT to teach high schoolers AI concepts. We worked on the project through the Empower Lab at Dartmouth, overseen by an Innovation PhD candidate at the Thayer School of Engineering.
For this project, we conducted user research on AI understanding, creative writing, and online learning, and analyzed the research to connect our findings with a pedagogical approach to teaching AI concepts. Additionally, we designed multiple iterations of Figma prototypes to make the user flow of the application more intuitive and efficient.
For this project, we conducted user research on AI understanding, creative writing, and online learning, and analyzed the research to connect our findings with a pedagogical approach to teaching AI concepts. Additionally, we designed multiple iterations of Figma prototypes to make the user flow of the application more intuitive and efficient.
Background
Background
In a world that is constantly interacting more and more with AI, there is an ever-growing need to foster AI literacy in young people, so that they are better prepared to use and understand AI in future educational and professional contexts. Therefore, introducing computational and AI usage concepts to younger people gives them skills that will likely be highly valuable to them in the future.
In a world that is constantly interacting more and more with AI, there is an ever-growing need to foster AI literacy in young people, so that they are better prepared to use and understand AI in future educational and professional contexts. Therefore, introducing computational and AI usage concepts to younger people gives them skills that will likely be highly valuable to them in the future.
Problem
Problem
Although it is useful for young people to learn AI concepts, AI literacy is not yet embedded in many school curriculums, and it is hard for students to find the structure and resources to learn about AI outside of school.
Although it is useful for young people to learn AI concepts, AI literacy is not yet embedded in many school curriculums, and it is hard for students to find the structure and resources to learn about AI outside of school.
Therefore, our partner chose to focus on extracurricular efforts to teach AI, providing us the How Might We:
Therefore, our partner chose to focus on extracurricular efforts to teach AI, providing us the How Might We:
HMW effectively teach AI to students through extracurricular engagements that involve highly scalable, online-only components as well as support in-person, hands-on activities if such resources are available to a learner?
HMW effectively teach AI to students through extracurricular engagements that involve highly scalable, online-only components as well as support in-person, hands-on activities if such resources are available to a learner?
Existing Solution
Existing Solution
Apricot Stone City is a game consisting of a choose-your-adventure type interface, where students can follow a character’s story by clicking different action options to go down different paths of the story. The content of the story itself contains teaching of AI concepts, and all the story content is generated by students, and eventually will also be implemented into the game by students. In initial meetings with the partner, we also discussed adding a quiz feature to test students on their learning, and a map feature allowing students to see and go to every possible story pathway.
Apricot Stone City is a game consisting of a choose-your-adventure type interface, where students can follow a character’s story by clicking different action options to go down different paths of the story. The content of the story itself contains teaching of AI concepts, and all the story content is generated by students, and eventually will also be implemented into the game by students. In initial meetings with the partner, we also discussed adding a quiz feature to test students on their learning, and a map feature allowing students to see and go to every possible story pathway.
Our partner had already conducted user testing with a prototype that had backend code, and therefore had all the functionality of the game, but was needed a refined user flow and frontend interface for the final version.
Our partner had already conducted user testing with a prototype that had backend code, and therefore had all the functionality of the game, but was needed a refined user flow and frontend interface for the final version.
Research
Research
Therefore, to better understand what users might want and need, I conducted market research on similar existing interfaces, from online storytelling or reading applications, to AI story creation, to choose-your-own-adventure video games
Therefore, to better understand what users might want and need, I conducted market research on similar existing interfaces, from online storytelling or reading applications, to AI story creation, to choose-your-own-adventure video games
After collecting examples of possible interfaces and features we could draw from, I categorized the data across two axes: from games played just for fun to interfaces solely used for educational goals, and from interfaces that require a high level of interaction and action from the user to interfaces that require minimal action. Ideally, to encourage active learning and retention, the interface we would design would be in the “High level of engagement” and “Educational goals” quadrant, while borrowing features from games on the “Just fun” axis.
After collecting examples of possible interfaces and features we could draw from, I categorized the data across two axes: from games played just for fun to interfaces solely used for educational goals, and from interfaces that require a high level of interaction and action from the user to interfaces that require minimal action. Ideally, to encourage active learning and retention, the interface we would design would be in the “High level of engagement” and “Educational goals” quadrant, while borrowing features from games on the “Just fun” axis.
Ideation
Ideation
After conducting and organizing the market research, I mind-mapped and ideated over a list of questions our partner had given me about the features of the game, from adding quizzes, to the layout of seeing a story, to the general style and metaphor of the game. I divided his questions into separate categories, such as layout, action buttons/options, and learning retention, and had each category be the center of a map. Then, from each center, I wrote out each of our partner’s questions, and, branching off the questions, ideated possible solutions to each question.
After conducting and organizing the market research, I mind-mapped and ideated over a list of questions our partner had given me about the features of the game, from adding quizzes, to the layout of seeing a story, to the general style and metaphor of the game. I divided his questions into separate categories, such as layout, action buttons/options, and learning retention, and had each category be the center of a map. Then, from each center, I wrote out each of our partner’s questions, and, branching off the questions, ideated possible solutions to each question.
UX Iterations
UX Iterations
Upon performing market research and ideation, and with existing interview data from a study our partner had run in the past, I started making grayscales of the different screens of the game in Figma.
Upon performing market research and ideation, and with existing interview data from a study our partner had run in the past, I started making grayscales of the different screens of the game in Figma.
A screen for the layout of a character’s story, with text, images, and action buttons, a screen for the dashboard of the game, where users could navigate to their most recent stories, see a map of all story points in the game, and see metrics of how many stories or quizzes they had completed, overlays for a menu button and a story button, and a map screen for viewing all stories in the entire game thus far.
A screen for the layout of a character’s story, with text, images, and action buttons, a screen for the dashboard of the game, where users could navigate to their most recent stories, see a map of all story points in the game, and see metrics of how many stories or quizzes they had completed, overlays for a menu button and a story button, and a map screen for viewing all stories in the entire game thus far.
However, after sharing these grayscales with our partner, we realized that beyond the market research I had done on existing interfaces, we did not have much else to inform UX design decisions and the flow of the user experience, due to the interviews from the past study having sparse notes and a heavy focus on students learning to implement stories into the interface, instead of talking about how they might use the interface itself.
However, after sharing these grayscales with our partner, we realized that beyond the market research I had done on existing interfaces, we did not have much else to inform UX design decisions and the flow of the user experience, due to the interviews from the past study having sparse notes and a heavy focus on students learning to implement stories into the interface, instead of talking about how they might use the interface itself.
Therefore, we decided to pivot directions and return to the research stage of the design process. I and the other UX designer on out team decided to reach out to students on campus for in-person interviews in order to better have an understanding of potential user needs and pain points for our interface.
Therefore, we decided to pivot directions and return to the research stage of the design process. I and the other UX designer on out team decided to reach out to students on campus for in-person interviews in order to better have an understanding of potential user needs and pain points for our interface.
Interviews
Interviews
To start with, we came up with several topics to cover in our interviews that would be important to the overall goals of the game, including online games, online learning, creative writing, and using or understanding AI. Based on these topics, I created an interview guide with questions asking about users’ past experiences with similar topics, any pain points they had, and asking them about their current level of understanding on emerging fields such as Artificial Intelligence.
To start with, we came up with several topics to cover in our interviews that would be important to the overall goals of the game, including online games, online learning, creative writing, and using or understanding AI. Based on these topics, I created an interview guide with questions asking about users’ past experiences with similar topics, any pain points they had, and asking them about their current level of understanding on emerging fields such as Artificial Intelligence.
Using our interview guide, I interviewed 4 Dartmouth students about their past experiences with games, online learning, creative writing, and AI. After conducting and taking notes on each interview, we synthesized the interview data with a thematic analysis of user likes, dislikes, and needs for each topic we covered. In addition, I synthesized the past interview data our partner had provided in the same way, categorizing each student’s likes, dislikes, and needs, with supporting quotes for each categorization.
Using our interview guide, I interviewed 4 Dartmouth students about their past experiences with games, online learning, creative writing, and AI. After conducting and taking notes on each interview, we synthesized the interview data with a thematic analysis of user likes, dislikes, and needs for each topic we covered. In addition, I synthesized the past interview data our partner had provided in the same way, categorizing each student’s likes, dislikes, and needs, with supporting quotes for each categorization.
Insights
Insights
From the synthesis of our user interviews, we found a few key insights.
From the synthesis of our user interviews, we found a few key insights.
Both collaborative learning and collaborative gameplay are important for engagement.
Both collaborative learning and collaborative gameplay are important for engagement.
Almost all students that were interviewed mentioned either collaborative gaming (such as multiplayer games) or collaborative learning (such as group projects working together to build something) as being both more engaging and more likely to retain their focus, and being more fun to do than individual gaming or learning
Almost all students that were interviewed mentioned either collaborative gaming (such as multiplayer games) or collaborative learning (such as group projects working together to build something) as being both more engaging and more likely to retain their focus, and being more fun to do than individual gaming or learning
Many students have low confidence in their understanding of how AI works and limited knowledge on its capabilities
Many students have low confidence in their understanding of how AI works and limited knowledge on its capabilities
While most students I interviewed rated themselves as proficient in using at least one AI software, all of them stated that they had very little knowledge of AI concepts and how AI actually works. Additionally, while students rated themselves higher for being able to use AI, many acknowledged that they didn’t use AI that often and therefore didn’t use many AI softwares beyond ChatGPT.
While most students I interviewed rated themselves as proficient in using at least one AI software, all of them stated that they had very little knowledge of AI concepts and how AI actually works. Additionally, while students rated themselves higher for being able to use AI, many acknowledged that they didn’t use AI that often and therefore didn’t use many AI softwares beyond ChatGPT.
The higher the engagement is for online learning platforms, the more likely students are to return and retain the information.
The higher the engagement is for online learning platforms, the more likely students are to return and retain the information.
When asked about pain points of online learning, many students expressed frustration in online learning being less effective than in-person learning, either due to a lack of human interaction, the ability to skip through activities and lesson plans, or the monotony of each lesson being the same exact structure. The more interaction students had with an online learning platform, whether that was through quizzes, or activities with multiple choice or free-answer, or speaking activities, the more likely they were to retain the information learned from it.
When asked about pain points of online learning, many students expressed frustration in online learning being less effective than in-person learning, either due to a lack of human interaction, the ability to skip through activities and lesson plans, or the monotony of each lesson being the same exact structure. The more interaction students had with an online learning platform, whether that was through quizzes, or activities with multiple choice or free-answer, or speaking activities, the more likely they were to retain the information learned from it.
Moving Forward
Moving Forward
After synthesizing our interview data, we used our key findings to create a hi-fi Figma prototype of the gameplay, using graphics and assets provided by our partner. However, due to having a limited amount of time left to work on the project, and a pressing deadline for our partner to have the entire Apricot Stone City interface implemented in code, we were not able to integrate many of the features we wanted into our design, instead opting for simpler interactions between the user and the screens.
After synthesizing our interview data, we used our key findings to create a hi-fi Figma prototype of the gameplay, using graphics and assets provided by our partner. However, due to having a limited amount of time left to work on the project, and a pressing deadline for our partner to have the entire Apricot Stone City interface implemented in code, we were not able to integrate many of the features we wanted into our design, instead opting for simpler interactions between the user and the screens.
With this project, I was able to fully understand the importance of collecting and recording abundant interview data, and the value of different synthesis strategies to consolidate insights. In future projects, I would make sure my background and user research were robust enough to inform almost all of my design decisions, for a product that will better understand and help user needs.
With this project, I was able to fully understand the importance of collecting and recording abundant interview data, and the value of different synthesis strategies to consolidate insights. In future projects, I would make sure my background and user research were robust enough to inform almost all of my design decisions, for a product that will better understand and help user needs.
Contact me: hannalhong@gmail.com
Contact me: hannalhong@gmail.com
Contact me: hannalhong@gmail.com