An AI chatbot that answers any lingering questions one may have regarding a particular course
ROLE
UX Researcher
UI Designer
Interface Designer
THE TEAM
THE TEAM
Lauren Bocalan — UX Researcher
Yulynn Lin — UX Researcher
PROJECT TIMELINE
PROJECT TIMELINE
January 2024
Collaborated with International Leadership Charter High School to understand their needs
Conducted initial user research and interviews
February – March 2024
Explored ideation sessions with my UX class
Created design synthesis and user personas
April 2024
Developed wireframes and high-fidelity prototypes using Figma
Conducted usability testing with students
May 2024
Finalized the prototype design and presented Syllabot for user testing
The Inspiration
In Spring 2024, I took NMDD 3450 - User Experience Design: Design for Empowerment. For the semester, we collaborated with the International Charter Leadership High School in The Bronx to help assist in creating a tool for the college readiness process.
Simultaneously, my own experiences at Fordham highlighted the lack of detailed, accessible information about courses before committing to them. This overlap of needs inspired me to develop Syllabot—a platform concept that empowers students with the information they need to make informed decisions about their education.
The Problem
Unmet Expectations: Students often find that classes don't align with their expectations based on limited course descriptions.
Inflexible Schedules: College schedules are typically unchangeable after registration ends, leading to regret and stress.
Lack of Information: Insufficient insights into course workload, teaching style, and content make it hard to choose the right classes.
College Readiness Gap: High school students, especially from underprivileged backgrounds, lack resources to prepare adequately for college course selection.
Objectives
Provide Detailed Course Insights: Offer access to past syllabi and examples of coursework with instructor and student approval.
Integrate AI Chatbot Interface: Allow students to interact with a chatbot prototype to ask specific questions about courses based on previous syllabi.
Combine Reviews and Ratings: Merge student reviews similar to Rate My Professor for comprehensive feedback.
Facilitate Peer Connections: Enable students to connect with classmates via LinkedIn.
Support College Readiness: Equip high school students with tools to better prepare for college course selection.
Understanding the Users: Prospective & Current College Students
College Students
Needs: Detailed information about courses to make informed decisions.
Frustrations: Limited ability to adjust schedules post-registration; classes not meeting expectations.
Goals: Find classes that align with their interests and academic plans.
High School Students
Needs: Resources to understand what college courses entail.
Frustrations: Anxiety about the unknown aspects of college life; lack of guidance.
Goals: Gain confidence and preparedness for college through accessible tools.
Educators and Advisors
Needs: Platforms to assist students in course planning.
Frustrations: Limited tools to provide comprehensive course insights.
Goals: Support students in making choices that enhance their academic success.
The Inspiration
In Spring 2024, I took NMDD 3450 - User Experience Design: Design for Empowerment. For the semester, we collaborated with the International Charter Leadership High School in The Bronx to help assist in creating a tool for the college readiness process.
Simultaneously, my own experiences at Fordham highlighted the lack of detailed, accessible information about courses before committing to them. This overlap of needs inspired me to develop Syllabot—a platform concept that empowers students with the information they need to make informed decisions about their education.
The Problem
Unmet Expectations: Students often find that classes don't align with their expectations based on limited course descriptions.
Inflexible Schedules: College schedules are typically unchangeable after registration ends, leading to regret and stress.
Lack of Information: Insufficient insights into course workload, teaching style, and content make it hard to choose the right classes.
College Readiness Gap: High school students, especially from underprivileged backgrounds, lack resources to prepare adequately for college course selection.
Objectives
Provide Detailed Course Insights: Offer access to past syllabi and examples of coursework with instructor and student approval.
Integrate AI Chatbot Interface: Allow students to interact with a chatbot prototype to ask specific questions about courses based on previous syllabi.
Combine Reviews and Ratings: Merge student reviews similar to Rate My Professor for comprehensive feedback.
Facilitate Peer Connections: Enable students to connect with classmates via LinkedIn.
Support College Readiness: Equip high school students with tools to better prepare for college course selection.
Understanding the Users: Prospective & Current College Students
College Students
Needs: Detailed information about courses to make informed decisions.
Frustrations: Limited ability to adjust schedules post-registration; classes not meeting expectations.
Goals: Find classes that align with their interests and academic plans.
High School Students
Needs: Resources to understand what college courses entail.
Frustrations: Anxiety about the unknown aspects of college life; lack of guidance.
Goals: Gain confidence and preparedness for college through accessible tools.
Educators and Advisors
Needs: Platforms to assist students in course planning.
Frustrations: Limited tools to provide comprehensive course insights.
Goals: Support students in making choices that enhance their academic success.
Personas
Personas
Persona 1: Jane Rodriguez
Age: 17
Location: Bronx, New York
Education: Senior at International Leadership Charter High School
Aspiration: First-generation college student aiming to major in Biology
Bio:
Jane is an ambitious high school senior excited about starting college but feels overwhelmed by the course selection process. She lacks access to detailed information about classes and worries about choosing courses that may be too challenging or not align with her interests.
Behaviors:
Seeks advice from teachers and counselors.
Searches online for course information but finds limited details.
Values tools that provide clear, accessible information.
Frustrations:
Uncertainty about what to expect in college courses.
Fear of committing to classes that may hinder her academic goals.
Limited resources tailored to her needs as a first-generation student.
Goals:
Understand the workload and expectations of potential courses.
Connect with current college students for insights.
Build confidence in her ability to navigate college successfully.
Persona 1: Jane Rodriguez
Age: 17
Location: Bronx, New York
Education: Senior at International Leadership Charter High School
Aspiration: First-generation college student aiming to major in Biology
Bio:
Jane is an ambitious high school senior excited about starting college but feels overwhelmed by the course selection process. She lacks access to detailed information about classes and worries about choosing courses that may be too challenging or not align with her interests.
Behaviors:
Seeks advice from teachers and counselors.
Searches online for course information but finds limited details.
Values tools that provide clear, accessible information.
Frustrations:
Uncertainty about what to expect in college courses.
Fear of committing to classes that may hinder her academic goals.
Limited resources tailored to her needs as a first-generation student.
Goals:
Understand the workload and expectations of potential courses.
Connect with current college students for insights.
Build confidence in her ability to navigate college successfully.
Persona 2: Alex Thompson
Age: 20
Location: New York City
Education: Sophomore at Fordham University majoring in Computer Science
Occupation: Part-time tutor and coding club member
Bio:
Alex is a college student who has struggled with course selections that didn't meet his expectations, leading to a delayed graduation plan. He's looking for a reliable way to choose classes that align with his interests and academic requirements.
Behaviors:
Frequently consults Rate My Professor but finds reviews inconsistent.
Discusses course options with peers but desires more concrete information.
Actively involved in student forums and online communities.
Frustrations:
Previous courses lacked practical application, contrary to course descriptions.
Difficulty in adjusting his schedule after registration deadlines.
Feels that course syllabi are not accessible enough before enrollment.
Goals:
Access past syllabi and examples of coursework to make informed decisions.
Find classes that offer practical experience in his field.
Connect with classmates ahead of time to form study groups.
Persona 2: Alex Thompson
Age: 20
Location: New York City
Education: Sophomore at Fordham University majoring in Computer Science
Occupation: Part-time tutor and coding club member
Bio:
Alex is a college student who has struggled with course selections that didn't meet his expectations, leading to a delayed graduation plan. He's looking for a reliable way to choose classes that align with his interests and academic requirements.
Behaviors:
Frequently consults Rate My Professor but finds reviews inconsistent.
Discusses course options with peers but desires more concrete information.
Actively involved in student forums and online communities.
Frustrations:
Previous courses lacked practical application, contrary to course descriptions.
Difficulty in adjusting his schedule after registration deadlines.
Feels that course syllabi are not accessible enough before enrollment.
Goals:
Access past syllabi and examples of coursework to make informed decisions.
Find classes that offer practical experience in his field.
Connect with classmates ahead of time to form study groups.
The Design Process
1. Discover
User Research
Collaborating with the International Leadership Charter High School, we conducted interviews and surveys with students to understand their concerns about college readiness.
Findings:
Students felt unprepared for the course selection process.
Desired more detailed information about classes, beyond basic descriptions.
Interested in connecting with peers and mentors for guidance.
Interviews with College Students
I interviewed my friends Japraj and Nick, who shared their experiences with the college application process.
On the broader perspective of education:
"Life is not about just college at the end of the day. It's one form of education, but there's many different routes, and there's many different ways to get to some point." — JaprajOn the significance of scholarships for underprivileged students:
"It's just tough because I feel like a lot of the time, like kids in those scenarios, like don't really even have an understanding of what's possible." — Nick
The Design Process
1. Discover
User Research
Collaborating with the International Leadership Charter High School, we conducted interviews and surveys with students to understand their concerns about college readiness.
Findings:
Students felt unprepared for the course selection process.
Desired more detailed information about classes, beyond basic descriptions.
Interested in connecting with peers and mentors for guidance.
Interviews with College Students
I interviewed my friends Japraj and Nick, who shared their experiences with the college application process.
On the broader perspective of education:
"Life is not about just college at the end of the day. It's one form of education, but there's many different routes, and there's many different ways to get to some point." — JaprajOn the significance of scholarships for underprivileged students:
"It's just tough because I feel like a lot of the time, like kids in those scenarios, like don't really even have an understanding of what's possible." — Nick
Design Synthesis
Analyzed data from user research to identify key themes and needs.
2. Define
Ideation Sessions
My team and I brainstormed various solutions for a college readiness tool.
Ideas Explored:
Major Matching App: A dating-style app that matches students with majors based on interests.
Social Media-Based Suggestions: Recommending majors or courses based on students' social media activity.
VR Day in the Life: A VR based app that would provide detailed course information and personalized assistance through recorded class sessions.
2. Define
Ideation Sessions
My team and I brainstormed various solutions for a college readiness tool.
Ideas Explored:
Major Matching App: A dating-style app that matches students with majors based on interests.
Social Media-Based Suggestions: Recommending majors or courses based on students' social media activity.
VR Day in the Life: A VR based app that would provide detailed course information and personalized assistance through recorded class sessions.
Choosing the Chatbot Route
Ultimately we decided to go with an approach that would show the transparency of a certain class even if not in VR. The idea of an AI chatbot interface idea came to be because it directly addresses the need for detailed, accessible course information and aligns with the high school's goal of enhancing college readiness. While we didn't develop a functioning chatbot, we focused on designing a high-fidelity prototype that illustrates how the chatbot would interact with users.
3. Design
User Flow
We mapped out a User Flow of the MVP, essentially allowing a student to view potential classes, leave reviews, and view liked courses.
3. Design
User Flow
We mapped out a User Flow of the MVP, essentially allowing a student to view potential classes, leave reviews, and view liked courses.
Wireframing
The product, initially called Virtualso (due to the previous idea of mixing VR), followed similar UI's to the many chatbots we now see.
Wireframing
The product, initially called Virtualso (due to the previous idea of mixing VR), followed similar UI's to the many chatbots we now see.
Prototyping
After the initial concept was brainstormed, I prototyped a variety of screens on Figma to simulate a student who wanted to learn more about a computer graphics course taught at Fordham. I then created a style guide so that everything would remain consistent.
Prototyping
After the initial concept was brainstormed, I prototyped a variety of screens on Figma to simulate a student who wanted to learn more about a computer graphics course taught at Fordham. I then created a style guide so that everything would remain consistent.
4. Validate & Deliver
Usability Testing
Tested the prototype with students from the high school and college peers.
Participants: 10 high school seniors and 5 college students.
Tasks:
Navigating the prototype to ask the chatbot specific questions about a course.
Viewing past syllabi and examples of coursework within the prototype.
Reading student reviews and exploring the peer connection feature.
Providing feedback on the overall user experience.
4. Validate & Deliver
Usability Testing
Tested the prototype with students from the high school and college peers.
Participants: 10 high school seniors and 5 college students.
Tasks:
Navigating the prototype to ask the chatbot specific questions about a course.
Viewing past syllabi and examples of coursework within the prototype.
Reading student reviews and exploring the peer connection feature.
Providing feedback on the overall user experience.
Findings:
High School Students:
Found the chatbot interface intuitive and easy to navigate in the prototype.
Gained confidence in understanding college courses through the simulated interactions.
College Students:
Appreciated the concept of accessing detailed course information.
Provided suggestions on how to improve the chatbot's responses in future developments.
Iterations:
Based on feedback, we:
Refined the chatbot interface in the prototype to better simulate nuanced conversations.
Enhanced the visual design for viewing syllabi and coursework examples.
Improved the layout to make navigation more intuitive.
Findings:
High School Students:
Found the chatbot interface intuitive and easy to navigate in the prototype.
Gained confidence in understanding college courses through the simulated interactions.
College Students:
Appreciated the concept of accessing detailed course information.
Provided suggestions on how to improve the chatbot's responses in future developments.
Iterations:
Based on feedback, we:
Refined the chatbot interface in the prototype to better simulate nuanced conversations.
Enhanced the visual design for viewing syllabi and coursework examples.
Improved the layout to make navigation more intuitive.
Key Learnings
Prototyping is Powerful: Even without a fully engineered product, a high-fidelity prototype can effectively communicate ideas and gather valuable user feedback.
Teamwork Amplifies Success: Collaborating with Lauren and Yulynn brought diverse perspectives and skills that enriched the project.
Empathy is Crucial: Understanding students' anxieties and challenges informed the design process.
Key Learnings
Prototyping is Powerful: Even without a fully engineered product, a high-fidelity prototype can effectively communicate ideas and gather valuable user feedback.
Teamwork Amplifies Success: Collaborating with Lauren and Yulynn brought diverse perspectives and skills that enriched the project.
Empathy is Crucial: Understanding students' anxieties and challenges informed the design process.
Next Steps
Develop the Chatbot Functionality: Explore possibilities for turning the prototype into a functioning application.
Expand Course Database: Include more colleges and universities in the prototype for broader applicability.
AI Enhancement: Collaborate with developers to integrate natural language processing capabilities.
Feedback Integration: Continuously gather user feedback to refine the design.
Next Steps
Develop the Chatbot Functionality: Explore possibilities for turning the prototype into a functioning application.
Expand Course Database: Include more colleges and universities in the prototype for broader applicability.
AI Enhancement: Collaborate with developers to integrate natural language processing capabilities.
Feedback Integration: Continuously gather user feedback to refine the design.
Reflection
This was my first UI/UX project that involved a client and solidified my desire in creating products and experiences for the potential benefit in society. I valued the semester long process in ideating and designing a functional prototype that I was excited to share upon completion. I hope that one day I can develop Syllabot since I truly believe that it would save time and effort in the class registration process, as well as gaining a real insight into a class. All in all, this experience has prepared me to tackle future design challenges with creativity, functionality, and confidence. Developing the Syllabot prototype was a rewarding experience that allowed me to address real needs expressed by both high school and college students. By collaborating with the International Leadership Charter High School, I was able to tailor the tool to support college readiness effectively.
Reflection
This was my first UI/UX project that involved a client and solidified my desire in creating products and experiences for the potential benefit in society. I valued the semester long process in ideating and designing a functional prototype that I was excited to share upon completion. I hope that one day I can develop Syllabot since I truly believe that it would save time and effort in the class registration process, as well as gaining a real insight into a class. All in all, this experience has prepared me to tackle future design challenges with creativity, functionality, and confidence. Developing the Syllabot prototype was a rewarding experience that allowed me to address real needs expressed by both high school and college students. By collaborating with the International Leadership Charter High School, I was able to tailor the tool to support college readiness effectively.
Thank you for taking the time to learn about Syllabot! Check out my other projects!
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!
