Tag-Team Reader
AI-powered reading activity for elementary students
TIMELINE
Jan 2025 - Jun 2025
Prototyping
UI/UX Design
Full-Stack Development
Elanu Karakus
Daniel Argento
Adrian Pan
Spurti Nimbali
Lucia Langaney
SUMMARY
In collaboration with the edtech company Beeline Reader, I worked in a product development team as a designer to design and develop Tag-Team Reader, an AI-powered collaborative reading tool for elementary students. My team and I conducted 15 user interviews with teachers, students, and child psychologists, translating these insights into personas and design requirements. I iterated through prototypes of various fidelities in Figma, tested with users, and refined activities to balance engagement for students with feasibility for teachers. On the development side, I implemented topic and reading generation functionality and fine-tuned prompts to ultimately deliver a playful yet practical reading tool.
WHAT'S BEELINE READER?
BeeLine Reader is an edtech company that develops digital reading tools designed to make text easier to follow and comprehend. Its core technology uses a color gradient that guides the eye from one line to the next, improving reading speed, focus, and retention. The tool is used by students, educators, and lifelong readers to enhance accessibility and engagement across a variety of reading levels.
THE PROBLEM
The founder of Beeline Reader, Nick Lum, approached us with a very open-ended question: with growing fears that AI could undermine education, especially reading and writing ability, how can AI instead be used to strengthen young students’ reading abilities?
This only led to more questions. We wondered: How could AI fit into current curriculums? What are AI’s biggest strengths, and how can we leverage them? What are its limitations? To find our answers, we began to conduct user research.
USER RESEARCH
Critically, we first identified our key stakeholders.
1.
Elementary Students
Students in a critical stage of reading development. Additionally, AI is well-suited to generating simpler, level-appropriate texts.
2.
Elementary Teachers
Our primary adopters. Provide expertise on effective reading tools and how they fit within existing curricula.
For our first round of user interviews, we spoke to 3 elementary school teachers, 6 elementary school students, and 1 child psychologist. Leveraging those insights, we created our two primary user personas.
Emma, 8
Elementary Student
Goals
Read stories that feel fun and personally relevant
Motivations
Stay engaged through topics tied to interests or strong storytelling
Pain Points
Finds practice boring when readings lack connection or excitement
.png)
Samuel, 42
Elementary Teacher
Goals
Support weaker readers while keeping stronger readers meaningfully engaged
Motivations
Ensure all students build literacy skills within classroom constraints
Pain Points
Current independent reading tasks bore students and lack accountability
Based on these personas, we settled on a HMW statement before ideating.
How might we use generative AI to design an engaging, effective reading activity that students can complete asynchronously, without needing teacher support?
We brainstormed over 20 potential product ideas, and organized them based on confidence, feasibility, and impact.
We narrowed down our options to two of our favorite concepts. The first we tentatively called “Inline Reader.”
The student is given an AI-generated text with activities like fill-in-the-blanks and word definition integrated directly into the lines. The intention was that having the student do the activities while reading instead of after would keep them more engaged throughout the text.
Our second idea we called “Tag-Team Reader.” This is a collaborative reading activity.
Two students each read an AI-generated text on a topic of their choosing and then work together to complete a quiz that requires both readings to answer. Being collaborative, the activity is naturally more engaging since students feel a sense of accountability to not let their teammate down.
ITERATION
A key piece of feedback we received in our first design critique was that having collaborative activity be free response questions was problematic for both teachers and students. The answers would need to be manually graded for accuracy, creating more work for teachers. Additionally, having to fill in a blank text box was visually unappealing, and could even be intimidating for young students.
As I began creating the medium-fi prototype, I experimented with multiple choice questions and a mix-and-match categorization activity instead.
For the medium-fi prototype, we once again conducted user testing before deciding on the final design. Teachers mentioned that the 6-digit numerical session code could be difficult for students to remember, so we changed it to be a short word followed by 3 numbers.
While the collaborative activities could now be automatically graded, but both teachers and students really wanted the activities to be more visually striking. I sketched some ways to achieve this, such as making the multiple choice activity a game show, or the categorization activity dragging and dropping bees to flowers.
FINAL DESIGN
With that, here is the final high-fidelity prototype! As it is a collaborative activity, the entire flow is done on two screens.
VISUAL DESIGN
.png)
I wanted the app to have a fun, vibrant feel suitable for young students, so I utilized a pop-art style for the UI with bright colors, black outlines, and solid drop shadows.
To make the app more memorable and recognizable, I designed some simple bee characters to include throughout the screens.
The Tag-Team Reader logo was designed to be adjacent to but distinct from the Beeline Reader logo. Using a simpler diamond instead of the hexagon conveys a more playful, child-friendly identity, aligning better with our focus on young students.
IMPLEMENTATION
We built this app with the MERN stack, with my contributions spanning React UI development, MongoDB data modeling, API testing in Postman, and version control through GitHub. These were my contributions:
Data Modeling
Created Mongoose schemas for sessions, topics, generated readings, quizzes, and prompts, including a student response schema to capture answers, correctness, and timestamps.
Session & Topic Selection
Implemented APIs to handle randomized topic options, enforce genre constraints, and prevent duplicate or conflicting selections.
AI Quiz Generation
Redesigned the quiz-generation prompt to compute an average grade level, require questions that integrate both readings, and enforce strict JSON output for parsing.
AI Reading Generation
Built backend functions that filled prompt templates with topic, grade, and difficulty variables, called Anthropic’s API, and stored the personalized readings in the database.
Frontend Integration
Connected backend endpoints to React pages, enabling host/peer role detection, topic selection with shuffle, results display, and auto-navigation into reading.
Night Mode
Implemented a frontend theme toggle that switched CSS variables between light and dark palettes, with preferences saved in local storage for persistence.
To see Tag-Team Reader in action, check out this demonstration video! Huge thanks to my amazing team and the Nick’s guidance in helping us create such a fantastic end result.
.png)
.png)
.png)
.png)
%201.png)
