Welcome to BrainBoost, Prenostik’s Student Learning Dashboard aimed at improving graduation retention rates through a proactive and user-centered approach.
For my senior design project, my group and I collaborated with Prenostik — an EdTech startup with a mission to address the issue of college dropouts — to re-design and develop a working prototype of their student learning dashboard (SLD).
Our refined dashboard identifies and streamlines access to student learning challenges to increase the visibility of struggling students and assist instructors in better understanding student needs and frustrations.
ROLE
UI/UX Designer
Front-end Developer
TEAM
Ariane Keona Ochoa (me)
Selina Arjomand
Rocel Costo
Kobe Herrera
Karen Phan
TIMELINE
January - June 2024
(20 Weeks)
SKILLS
UX Research
Interface Design
Interaction Design
Wireframing & Prototyping
Frontend Development
TOOLS
Google Workspace
Figma
React
USER RESEARCH
From our first meeting with the project sponsors, we learned that user research would be pivotalto the development of our project. We spent the first 5 weeks employing various user research techniques by gathering interview questions through 20 informal surveys, conducting 50 formal interviews with students and instructors, and interpreting the user research into key insights and user personas. This research served as the basis of our designs, informing our entire process to ensure that our product addressed user needs.
Affinity Diagramming
User Personas
WHAT DID WE LEARN?
The main takeaways from our user research were that students needed better time management and a way to easily communicate with their instructors. Meanwhile, instructors demonstrated the need to make student needs more visible and simplify the process of reaching out to students by identifying student feedback and needs.
FROM STUDENTS
40% of students mentioned needing to improve their time management.
25% of students mentioned needing to be more proactive about asking for help.
FROM INSTRUCTORS
2 out of 3 instructors mentioned large class sizes negatively impact their role as an instructor.
THE PROBLEM
How can we streamline access to students' challenges and increase instructors' visibility of struggling students?
Amidst wrapping up our user research, we started ideating a solution. We brainstormed possible ways of solving this challenge and landed on the idea of a widget dashboard. Thus began our design process, from sketching lo-fi wireframes to designing hi-fi mockups, we aimed to create one iteration of a fully prototyped dashboard for both students and instructors at the end of our first 10 weeks.
THE DESIGN & DEVELOPMENT
Our Design System
OUR INITIAL WIDGET IDEAS
For the first half of this project, we set out to design both the student and instructor views of the student learning dashboard in its entirety. We came up with 5 widgets for each view using our user research to inform what widgets would best accomplish Prenostik’s mission of increasing graduation retention rates and would adhere to top user needs as listed below in the key.
KEY:
✸ Time Management
✸ Student Visibility
✸ Student-Teacher Communication
FOR STUDENTS
Weekly Wellness Check-In
Contact Instructors
Curated Resources
Provide Course Feedback
To Do List
FOR INSTRUCTORS
Student Check-In Responses
Comprehension Trends
Flagged Students
Mood Trends
Course Feedback
Low-Fidelity Wireframes
Mid-Fidelity Mockups
High-Fidelity Mockup
USABILITY TESTING
After reaching our minimum viable product for the first 10 weeks of the project, we began the final half with our first round of usability testing. We completed 8 tests with 6 students and 2 instructors. Through consolidating our findings through affinity diagramming we found that these were some of the pivotal feedback and changes we had to make to our designs.
WHAT DID NOT WORK…
“How do I know that my professor actually cares about what I have to say?”
- Student 1
“What am I to do with this information about the students?”
- Instructor 1
“I can’t tell if it’s actually sending to them when I hit submit.”
- Student 2
“The course feedback chart confused me a bit.”
- Instructor 2
HOW WE FIXED IT…
S1 ➜ Reworked student
check-in to capture the student's state of mind and ensure consent.
I1 ➜ Redesigned the flagged students widget to include actionable information and a contact button.
S2 ➜ Fixed the feedback and contact widgets to properly provide sent confirmation.
I2 ➜ Refined the course feedback widget’s data visualization and overview organization.
OUR REFINED WIDGET IDEAS
Upon completing our first round of usability testing, we realized there was a lot to change with small bugs on the student front end and a full-blown redesign for the instructor view. We kept our initial widgets the same for students and spent most of our time making technical fixes to improve the user experience on the working prototype. Meanwhile, with the instructor side, we narrowed down the widgets from 5 to 3, to focus on providing instructors with actionable and accessible methods to help them understand student struggles and reach out to them. Each iteration was done with the users’ feedback in mind and a consistent reference to our main user needs as listed below in the key.
KEY:
✸ Time Management
✸ Student Visibility
✸ Student-Teacher Communication
FOR STUDENTS
Weekly State of Mind Check-In
Contact Instructors
Curated Resources
Provide Course Feedback
To Do List
FOR INSTRUCTORS
Flagged Students
Student Learning Gaps
Course Feedback
Redesigned High-Fidelity Mockup
Working Prototype
During the design process, our development team was working simultaneously to implement the finalized hi-fi mockups into a working prototype! Meanwhile, the design team prepared guidelines for the development team to follow to aid in implementing our designs, including the design system, prototypes of the hi-fi mockups, SVGs of our custom icons, and the iterative redesigns organized by feature.
Using React, we developed the desktop front end of BrainBoost while local storage was used to implement the back end and connect the student and instructor dashboards to send and receive data.
You can access the working prototype of BrainBoost here and try it out for yourself!
