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
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 pivotal to 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 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?
THE DESIGN & DEVELOPMENT
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.
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
To Do List
Curated Resources
Provide Course Feedback
FOR INSTRUCTORS
Mood Trends
Flagged Students
Course Feedback
Comprehension Trends
Student Check-In Responses
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
“I can’t tell if it’s actually sending to them when I hit submit.”
- Student 2
“What am I to do with this information about the students?”
- Instructor 1
“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.
S2 ➜ Fixed the feedback and contact widgets to properly provide sent confirmation.
I1 ➜ Redesigned the flagged students widget to include actionable information and a contact button.
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 identified key changes to make to the student and instructor views. We kept our initial widgets the same for students, spending 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 consequently, 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
Curated Resources
To Do List
Contact Instructors
Provide Course Feedback
FOR INSTRUCTORS
Flagged Students
Student Learning Gaps
Course Feedback
Final 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.js, 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!
➜
➜
LESSONS LEARNED
This comprehensive project took my group and me through all aspects of the product development cycle from research to launch, allowing us to put to use all that we’ve learned from college. It was fulfilling to work through each step of our project and contribute to every aspect of building our product, with each of us interviewing, designing, and developing at one point or another. With 3 designers and 2 frontend developers, we had to adapt and do work that we might not be comfortable with so that we could successfully launch our prototype. Meanwhile, we also faced challenges in communication between our clients and our professor, with their conflicting desires for our project. Our first 10 weeks were a mix of UX research and design rather than design and development. We had to come to a compromise with each of our stakeholders to successfully deliver an MVP that adhered to both their needs; and therein we learned to advocate for ourselves, work together as a team to solve problems as they arose, and be proactive in providing those solutions.
Through this opportunity, I also grew in my ability to interview and work with users to gather insights, as well as my ability to lead as each of us took turns managing the project, allowing us to practice delegating tasks and directing meetings. My skills as a designer naturally improved as well; getting to iterate on our designs after usability testing was never an option with our typical 10-week quarters, but given our timeline of 20 weeks for this project, we were able to experience a full design cycle and execute an iteration that took user feedback and improved on our past designs.
With more time and possibly more resources, like a backend developer, my team and I could have produced a more elaborate prototype. While we had less time in design and development because of our user research requirements, we gained valuable experience in formal interviews and received the necessary insight to inform our designs. However, since we had spent at least 5 out of the 20 weeks in research, we lost that time and had to work twice as hard in our last 10 weeks to reach our MVP. Additionally, extra time would have allowed our designers to spend more time on usability tests and our developers to research alternative backend solutions that may have better scalability.