For my senior capstone, my group and I partnered 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

TIMELINE Jan 2024 - Jun 2024

(20 Weeks)

CREDITS Ariane Keona Ochoa (me)

Selina Arjomand

Rocel Costo

Kobe Herrera

Karen Phan

DISCIPLINES UX Research

Interfaces

Frontend Development

TOOLS Figma

Google Workspace

React.js

To inform our redesign of the dashboard, my team and I spent the first 5 weeks in discovery and research. Our partners wanted us to conduct this redesign from the ground up so we began by conducting:

20 informal surveys to identify questions for interviews

50 formal interviews to uncover student struggles and needs

Identify user needs and challenges

Interpret interview findings into personas

Surveys & User Interviews

Affinity Diagramming

User Personas

The primary questions we asked our interviewees dealt with how students felt motivated to learn, what kept students engaged while learning, and how students succeeded in their learning.

Through affinity diagramming, we identified the leading factors that impacted a student’s motivation, engagement, and success.

We uncovered that students had diverse motivators to perform well in school, with the organization and structure of courses and the usefulness of the material being the most impactful.

The interviews showed that major factors that affected a student’s engagement with the material were the teaching style and practices, and class content.

Students are looking for a variety in the lectures and activities done in class to keep them interested. Once again, many students found that the material of the class affected how engaged they were in learning.

In terms of succeeding in class, students reiterated their desire to have structure with the assignments and content from their courses, as well as studying and reviewing accommodations from instructors.

Many students value an organized and central space that alerts them of deadlines and help them stay on track and manage their multiple classes more efficiently.

40% of students mentioned needing to improve their time management.

25% of students mentioned needing to be more proactive about asking for help.

2 out of 3 instructors mentioned that large class sizes negatively impact their role as an instructor.

How might we streamline access to students' challenges and increase instructors' visibility of struggling students?

After consolidating our findings, we concluded that students needed better time management and a way to easily communicate with their instructors. Meanwhile, instructors demonstrated the need to have students more visible and simplify the process of reaching out to students by identifying their feedback and needs.

We then created personas to ensure a clear understanding of user needs and help us prioritize features that addressed key user insights as we began to design.

This student persona highlights students who require engaging content to stay motivated.

This instructor persona represents those who want to get to know their students better to provide them more specific help.

After wrapping up our research, we began ideation. We brainstormed possible ways of solving our challenge and landed on the idea of a widget dashboard with personable widgets that helped students with time management and reaching out to instructors and helped instructors with viewing student feedback and struggles.

We aimed to get through one iteration of a fully prototyped dashboard for both students and instructors at the end of our first 10 weeks.

Design the dashboard in 10 weeks

Prototype mockups on Figma

Wireframing & Prototyping

Design Systems

Item 1 of 3

To start, we came up with 5 widgets for each view, letting our research 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

Upon coming up with our widget ideas we sketched out possible layouts of how this concept would materialize on a student learning dashboard. We were inspired by the bento box UI style and tools that we were already familiar with, like Canvas’s home page - which are demonstrated in the mid-fi wireframes.

These rough ideas acted as a firm foundation for our product, as it was scalable and allowed for easy additions and iterations in the future.

→

The lo-fi sketches laid out a general concept of what some widgets could look like, on their own and laid out on a dashboard.

The sketches were then translated into mid-fi wireframes on Figma where we got a better understanding of the composition and widget designs.

Producing and fine tuning the hi-fi mockups were our last goal with this part of the project, and we were on a time crunch. Having spent 5 out of the first 10 weeks in research, my team and I were left to mockup and prototype our product in 2 weeks.

We managed to design static dashboards for both the student and instructor views while our dev members developed a semi-functional prototype with movable widgets and 1 functional widget per view.

Our first iteration of the student dashboard landed well. Most widgets were simple actions like sending messages, accessing resources, or checking off a to-do list. It addressed the students needs from the get-go and was a sound basis for future iterations.

The instructor view was info heavy with 3 graphs displaying student responses and 2 actionable widgets to reach out to certain students.

FEATURE HIGHLIGHT: STUDENT CHECK-IN

One major feature we designed was the student check-in system. It was a high priority to our clients that we include and focus on creating a user-friendly and useful student check-in that would allow students to share their difficulties and help make struggling students more visible to instructors.

The check-in underwent the most changes throughout the project as we attempted to identify question types that worked best for each question and create a quick experience for students while keeping them engaged to answer each question with intention.

In the early stage of wireframing, we came up with a basic student check-in quiz, with 2 choice based questions about the student’s mood and any difficulties, and 3 fill-in questions for more detailed feedback and messages to be sent to the instructor.

↓

Designing the hi-fi mockups of the student check-in allowed us to hone in on the styles of questions we offered and the user experience while going through the quiz.

We narrowed the fill-in questions to 2 and focused on providing users with choice-based questions at the beginning for quantifiable translation for instructors and an easier answering process for students.

↓

As you’ll read about in the next section, after usability testing and working with our clients, we refined the student check-in to a simpler process.

The first “state of mind” question remained throughout all iterations as a grounding check-in for students. Next, there are 3 tables of radio buttons with statements for the student to agree or disagree with. This allowed for a range of ways students could express their content or discontent with the class or how they are performing, while also creating measurable data for instructors to interact and digest.

After reaching our minimum viable product for the first 10 weeks of the project, we initiated the final half of our capstone with our first round of usability testing. We completed 8 usability tests with 6 students and 2 instructors, and this became the basis of our design decisions moving forward as we iterated on our first draft of the dashboard.

At the same time we worked closely with our clients to define our scope and refine the functionality of features to ensure we were designing experiences that helped students and instructors communicate better and feel heard.

Taking the feedback from our usability tests, we conceptualized possible changes and prioritized what features needed to be changed for the improvement of the user experience or to address user needs.

Redesign the dashboard based on feedback

Test updates on users

Prepare designs for handoff to devs

Usability Testing

Iterative Design

Frontend Development

“How do I know that my professor actually cares about what I have to say?”

“I can’t tell if it’s actually sending to them when I hit submit.”

“What am I to do with this information about the students?”

“The course feedback chart confused me a bit.”

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.

With our first round of usability testing done, we identified key changes to make to the dashboard. We kept our initial widgets the same for students and spent most of the time redesigning the student check-in. On 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.

KEY: Time Management, Student Visibility, Student-Teacher Communication

Screenshot of a digital course interface titled 'BrainBoost Hub' for Spring 2024, showing a wellness check-in, to-do list, course feedback, resources, and a four-slide student check-in process with questions about current mental state, value, costs, and feedback.

Screenshot of a digital academic course report dashboard from BrainBoost for Spring 2024, displaying feedback summaries, student progress, and evaluation data for the course 'IN4MATX 162W: Organizational Information Systems'

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 leadership skills 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.