Welcome to BrainBoost, Prenostik’s Student Learning Dashboard aimed at improving graduation retention rates.
For our senior design project, my group and I worked in collaboration with Prenostik to re-design and develop a working prototype of their student learning dashboard (SLD). BrainBoost 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.
This project was completed in fulfillment of IN4MATX 191A/B: Senior Design Project in collaboration with our partner, Prenostik.
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
Graphic Design
Frontend Development
TOOLS
Google Workspace
Figma
React
USER RESEARCH
With just our first meeting with our project sponsors, it was abundantly clear that user research would be a pivotal part of our project process. We spent the first 5 weeks knee-deep in gathering interview questions through informal surveys; conducting 50 formal interviews with students and instructors; and interpreting the user research into key insights, user personas, and use cases. These deliverables served as the basis of our designs and aided in further development of the project.
Affinity Diagramming
User Personas
Use Case Diagram
WHAT DID WE LEARN?
The main takeaways from our user research were that students were in need of better time management and accessible communication with their instructors. Meanwhile, instructors demonstrated a need to make students more visible and simplify the process of reaching out to students and 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 CHALLENGE
How can we streamline access to students' challenges and increase instructors' visibility of struggling students?
Amidst wrapping up our user research, we started designing our solution. We brainstormed and ideated 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 prototypes.
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 and adhere to top user needs as mentioned 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 whether it be small bugs on the student front end or the full-blown redesign we built for the instructor view. We kept our initial widgets the same for students and spent most of our time making minor fixes to improve usability. Meanwhile, with the instructor side, we narrowed down from 5 to 3 widgets to hone in 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!
