The Power of Data in EdTech Applications Pt. 2

Nicholas Navarra
4 min readFeb 22, 2022

Hey, it’s been a minute since I wrote here. I hope everyone’s gotten off to a GREAT start on the year. I plan to post more frequently. I have a lot of great topics planned, so please stay tuned. This post is to follow up to my previous post about data and design in EdTech. Now I’m bringing what I wrote there to life and discussing it.

It’s been awhile. Now, where was I?

I will showcase how this design lures educators into looking at their students’ data. Once the fish (educators) have had a nibble of the bait (data), they get hooked (success). Below you will view a high-fidelity wireframe created with Sketch. To refresh from my previous post: EdTech applications won’t be effective if users don’t look at their data, interpret it, and utilize it to make a change.

Voila! Here is my K-12 EdTech application Hi-Fi wireframe for teachers. I can almost hear it now…“Uh, uh-huh, yeah Uh, uh-huh, yeah (It’s all about the data, baby).” Ok, maybe Puff Daddy didn’t say that, but it has a ring to it. You may first notice the “feed” style that displays recent test data in the top rectangle. No need to waste anyone’s time with a barren homepage and a logo/stock photo. The text that states the students name and skill for each test is clickable and will take the teacher directly to the students’ recent progress screen. Here, the teacher could view more test data such as questions missed or look at other assessments the student has taken. Next to the text on the left, a warning icon (a bright red triangle with an exclamation point in the middle) lets the teacher know when a student has struggled (scoring 69% or below). In this example, Jerry scored a 42% on a science test and the app is alerting the teacher to investigate further. A hand icon next to the text indicates the teacher may send a student a high five. The students will see the high five the next time they login on their dashboard. This was conceptualized to praise students that score a 70% or higher and to to make the application more interactive. The recent test updates also have a scrollbar to continue viewing more updates because they may have a lot of students taking assessments.

Bar Graphs on the Dash

The bar graphs are color coded for easy interpretation. The bars are colored cyan for 80–100, yellow for 70–79, and bright red for 0–69. The standards (skills) that K-12 students must test on are listed below each bar for entire class averages. If you have an eagle eye you may notice these standards have a “3” in them, that is because they are third grade standards. The bar graph will be designed to update and create a new bar graph after every student has taken the next assigned test. Then, the oldest bar will disappear. A teacher can quickly see where remediation is needed and assign more work and/or reteach the skill in class outside of the application. For example, the class average was a 63% on the LAFS.3.RI.1.2 reading skill: “Determine the main idea of a text.” The teacher can go into assignments screen and provide students with additional main idea skill activities inside the app. Additionally, they have the autonomy to reteach the skill in class during reading centers or a thirty-minute intervention time. In a complete and interactive prototype of this application, I would have made the dashboard scrollable to show more subjects for elementary school (science and social studies) or more classes for middle and high school where teachers may have 7 or 8 classes for an individual subject.

Navigation Bar and Icons

The icons are rather large and easy to see. I had a lot of fun with the Chalkduster font for typography to give it that “school feel.” However, I only used it in several places because it can become a bit too much if used everywhere. I created several mockup versions of this design to get the UI looking great. The other text is written in Damascus font. The reporting tab is right on the dashboard for an intuitive user experience. No need to a cumbersome path through many screens to pull a hidden report. For example: assignments>class>student name>skills>run report. No need to name names, but IYKYK. Inside the reporting screen, this can be accessed easier with trees or drop down bars. Time saved? Check! The future of students, teachers, and educational stakeholders is the hands of product designers. Data is and always will be essential in educational institutions. I hope you enjoyed reading this as much as I’ve had fun creating it.

Nicholas Navarra is a product designer who believes in solving problems through user empathy and creating an intuitive user experience. Connect with me on LinkedIn or view my portfolio and website.

--

--

Nicholas Navarra

Hey there! I like to write about product design, technology, EdTech, AI, leadership, and education. My background is in tech and education.