Overview
Introduction
User Research
UX & UI Design
User Testing
Development
EduTrend
An AI tool that helps educators efficiently bring current events into the classroom
ROLE
Product Designer + Developer
TEAM
I independently designed and developed the entire product under the supervision and guidance of Professor Ahmer Arif.
TIMELINE
Jan 2025 – Oct 2025 (Ongoing)
TOOLS
Figma, FigJam,
JaveScript, React.js, HTML, CSS,
Firebase, Vercel, Google Gemini API
SUMMARY
EduTrend is a tool that leverages generative AI to help educators conveniently and thoughtfully integrate current events into their class sessions.
It is a fully functional AI tool built with React and the Google Gemini API, and it received a 4.7 out of 5 satisfaction rating from 15 educators across 2 rounds of user testing.
The project is still evolving, and we are excited to see how it continues to grow!
Introduction
BACKGROUND
Educators often struggle to incorporate trending news or social media content into their course materials, making it difficult to engage students and demonstrate how knowledge applies in the real world.
PROBLEM
"How might we help educators efficiently transform current events into engaging and thoughtfully presented class materials?"
GOAL
Develop a flow aligned with how educators plan their classes.
Design a clear, intuitive interface.
User Research
PROBLEM DISCOVERY
To better understand the challenges educators face in today’s information-rich era, I began by analyzing the transcriptions of 12 educator-led workshops.
💡 Key insight:
Many educators want to incorporate news, current events, or trending social media content into their teaching to better engage students.
However, they find it difficult and time-consuming to adapt such content into classroom-ready materials while ensuring it is appropriate and free from sensitive or inappropriate elements.
PERSONA
Building on the insights and findings from the workshop analysis, I then created a persona to better understand the target users' needs, behaviors, and goals.
SOLUTION
Create a tool that simplifies the process of browsing and selecting suitable content, then transforms it into the desired format using AI.
UX & UI Design
STORYBOARD
Storyboards help me visualize educators’ scenarios and interactions with our product, giving me clarity on its 3 key features and guiding the user flow.
Onboarding Process
Collect user information and requirements so our AI can generate customized content.
AI Chatbot
Once the customized class material is generated, users can collaborate with AI to further refine the content.
Dashboard
Show the current event to the user
Users can view details of the current event, such as a summary and its connection to the class content.
WIREFRAME
After the main user flow was decided, I brainstormed wireframes to determine the best way to present such a large amount of information.
A key lesson I learned from storyboarding and wireframing was to prioritize user needs.
Although I brainstormed many features for educators, revisiting user research showed educators valued getting class materials efficiently over extra features.
For the first version of the prototype, I focused on the essentials and planned to identify gaps through user testing.
HI-FI PROTOTYPE
Here’s the 1st version of the hi-fi prototype for EduTrend, which simplifies the user flow into 3 major steps:
User Testing & Design Iteration
USER TESTING
First Round: 7 participants, 45 min per session.
Since EduTrend's user flow involves AI, we applied the Wizard of Oz method: simulating interactions and collecting participants’ input using Google Slides, then generating class materials with ChatGPT and demonstrating them in real time.
Step 1:
I used Google Slides to simulate the prototype, collect users’ onboarding responses, and observe their reactions simultaneously.
Step 2:
Based on their answers, I asked ChatGPT to generate 5 current events and displayed them on the slides. Participants selected the one that best fit their teaching needs.
Step 3:
I then input their selections into ChatGPT and presented the generated content through the slides.
Second Round: 8 participants, 45 minutes per session, testing the developed prototype integrated with Google Gemini 1.5 Flash & 2.5 Flash.
KEY FINDINGS
😀
Participants found this idea helpful for time saving & preparation.
P1
“From what you described, it sounds like something that would make my life easier.”
🧐
Improve the design and provide more scaffolding to help users give accurate input and discover more generation options.
P2
“I hope it provides more real material instead of instructions.”
🤫
Educators are wary of sharing student data due to privacy concerns.
P5
“I feel hesitant sharing that information not knowing the level of data security/privacy associated with this platform.”
🤨
Educators see activity creation as core to their role and prefer tools that support, not replace, their ideas.
P6
“When it comes to designing the activities themselves, I feel like that’s part of my job and something I want to craft directly.”
🤩
EduTrend is not meant to replace teachers or their skills, but to augment them.
P5
“I think this is scaffolding. It’s like teaching a teacher how to think through a process in the same way we, as teachers, help students learn how to think things through.”
DESIGN ITERATION
Landing Page
Before #1:
Participants were confused about how to use this tool.
After #1:
Explain EduTrend’s features and workflow on the landing page
Onboarding Process
Before #2:
Participants felt overwhelmed when answering the questions.
After #2:
Group the 8 questions into 4 categories and reduce the input field size so users don’t feel pressured to write long paragraphs.
Onboarding Questions Phrasing Problem
Some of the onboarding questions in the first prototype confused users or made them reluctant to answer.
We iterated several times to refine the wording during user testing.
Before
Q1
"Tell us a bit about what you teach!"
Q2
"Please choose one of your classes and share a bit about the topics you focus on."
→ These two questions feel vague and overlapping, leaving participants confused about what information EduTrend is actually seeking.
Q7
"Do any of your students have specific learning needs we should be mindful of?"
→ 3 participants skipped this question because they felt unsafe and worried it might reveal students’ personal information.
After
Q1
"Who are you teaching?"
Q2
"What topics are you currently teaching or planning to cover?"
→ Clearer wording that reduces users’ cognitive load. No participants reported confusion after this change.
Q7
"Any accessibility or learning considerations you’d like us to keep in mind?"
→ Reword it so it doesn’t sound like we’re directly asking about students’ requirements.
Dashboard
Before #4:
Participants want to see more details, such as the original source of the current event.
Before #3:
Participants suggested adding a feature to save current events for later reference.
After #4:
Modify the card so users can see the source. When expanded, the card should also display the abstract and potential connections between the current event and their class session. (Powered by Gemini 2.5 Flash)
After #3:
Add a bookmark feature so users can save content they like.
AI Chatbot
Before #5:
Participants looked confused until I explained the function of each section.
After #5:
Highlight each section’s functionality by adjusting the layout and adding titles.
Development
ARCHITECTURE & TECH STACK
Language / Framework: JavaScript, React
Styling / UI: CSS Modules; Material UI (MUI) v5.x
Auth & Data: Firebase (Auth, Firestore, Storage).
LLM:
Gemini 1.5 Flash for Google Search grounding (searching for current event)
Gemini 2.5 Flash for current event summarization & chat bot
Other APIs & Services:
Cheerio: Parse fetched HTML, extract meta tags.
Hosting & Dev: Deploy on Vercel
LATEST PROGRESS
Most of the features in the prototype have been developed and are fully functional.
I’m now focusing on refining the interface details, mainly aesthetic.
LINK
Feel free to contact me for the link to test EduTrend!
