web application for high school education

STEMtelling

background

STEMtelling: Improving Instructional Practices for Diverse Learners through Digital Storytelling

STEMtelling was first used in 2016 as a paper prototype in a high school Biology course that served majority Somali students in Minneapolis, MN. Our client, Jenny Norman, created STEMtelling as a method to connect with and learn from students’ cultural and personal relationships with science. By centering student’s experiences, cultural identities, and interests, students demonstrated an increase in STEM interest, class participation, and higher grades.

challenge

Currently, Jenny is in the early stages of developing a web-based application for STEMtelling and wanted some help developing an interactive prototype to beta test in six schools in the fall. She hopes to develop it further in the future as a mobile application that is a healthy form of social media.

She described the experience beginning with sharing STEMtell stories of science concepts created by teachers or other students. Then students would be able to create their own STEMtell stories that center their personal experiences with scientific concepts. The STEMtell story formats include video, audio, photography, text and illustrations to make it as accessible as possible to all students. 

Knowing that some students may struggle to get started, Jenny wanted students to receive prompts to encourage and support them to keep going. She also wanted to allow teachers to view a student’s story, and “code” or “tag” it with the STEM concepts that it is describing and/or supporting. Once the STEMtell is approved, it is published in a shared gallery for the class.

goals

Build an interactive prototype that demonstrates the platform intent of STEMTelling which is to serve as a bridge between students’ lived experience and science, allowing teachers and students to share and connect with the science experience that already exists in their everyday lives.

solution

After reviewing the research Jenny provided and our own research, our team decided to recommend a web-based application to be used on Chromebooks and laptops for Jenny’s initial beta test. We learned about the importance of transparency, privacy, customization and setting up a flexible framework that would work for a variety of classroom settings, so we chose to focus most of our time on initial profile setup, assigning STEMtells, the review process and interactions between students and with teachers. Our goal was to provide a safe space for students to share their stories and in the process, create a supportive environment in the classroom.

methods

  • Stakeholder Interview

  • Comparative Audit

  • User Interviews

  • Secondary Research

  • Teacher & Student Interviews

  • Student Survey

  • Sitemaps 

  • Wireframes

  • Prototypes

  • Usability Testing

  • System Usability Scale Evaluation

  • Annotated Wireframes

tools

  • UserBit App

  • TeamGantt

  • Google Docs/Sheets/Slides

  • Zoom

  • Otter.ai

  • Figma

  • Photoshop

  • Illustrator

my role

  • Collaborated in writing the SOW

  • Lead communication contact with client

  • Created Gantt chart in Team Gantt

  • Setup project in UserBit

  • Conducted Interviews

  • Reviewed and tagged interview transcripts

  • Designed logo/branding

  • Designed high-fidelity teacher portal prototype

  • Provided support for the presentation

  • Participated in final presentation with the team

  • Prepped the final deliverables for the teacher portal prototype annotated wireframes,
    style guide and assets for client handoff

  • Facilitated final handoff meeting with client

approach

Client Provided Research

Jenny gave us a pile of research she had conducted on students’ connection to STEM and their personal lives. Reviewing it proved the importance of her vision for STEMtelling. The biggest takeaway was that everything is connected to STEM and this app could help uncover those connections, which was very exciting.

Comparative Audit

We were initially a bit overwhelmed by the idea of prototyping such a complex web-app, so started comparing other popular educational apps with some similar features. Flipgrid quickly rose to the top as our main inspiration for the STEMtell creation and teacher portal. For the interactivity, Tik Tok and Snapchat provided inspiration.

Student Survey

We conducted a student survey to determine what educational apps students liked, how they learned about their interests and what format they would prefer to use for creating their STEMtell. We learned that students don’t like to write, but are often self-conscious about seeing themselves in videos, so often prefer recording audio only or adding other video or visuals. 

Teacher & Student Interviews

It was fascinating to interview teachers because they are so skilled at explaining their thoughts and after more than a year of remote learning, have lots of ideas about what would be useful in our app. Students also gave us amazing insights, which we incorporated into the design.

Secondary Research

Because of the timing of our project happening at the end of the school year, we had to rely a lot on secondary research, mainly about how to design for teens. It was fascinating to learn that currently, teens prefer clean, simple design that doesn’t involve a lot of clicking. They also value transparency and the ability to customize. 

“Teens are not technowizards who surf the web with abandon. And they don’t like sites laden with glitzy, blinking graphics. Letting stereotypes steer your design can lead to disastrous outcomes.”

Teenager’s UX: Designing for Teens by Alita Joyce and Jakob Nielsen

Prototyping

For our prototype, we focused on the main functions that our client wanted to include in the app and also incorporated the feedback we received from teachers and students. I worked on the teacher portal pages and decided to flesh out the profile approval process, STEMtell assignment page, student activity page and the review process between student and teacher. 

Usability Testing

We tested the prototype with students and teachers and received very positive feedback. All users said they would use it the app and liked that it was easy to use, highly customizable and would provide useful information to make connections between STEM and students’ interests.

 
Student Survey from Jenny about how STEM connects to their lives.
StudentSurvey.png
Interviews.jpg

“I think the overall design looks very nice and clean. I'd say something that would be good is dark mode. The children love dark mode.”

—Student

teacherpages.png

Teacher response to would you use it:

“Yeah absolutely, I think, providing that kind of opportunity to to have students tell connect to to their lives and, and, and make connections to STEM is really really important.”

presentation & annotated wireframes

STEMTAG_PORTFOLIO.png
 

recommendations

We organized our recommendations for next steps and future phases to share with Jenny. Here are some of the highlights:

  • Consider using FlipGrid API integration for content creation

  • Adding icons to interests and images to STEMtags to improve accessibility

  • Making BIPOC STEM influencers more visible so students can see themselves

  • Working with influencers and recent grads to create more STEMtell examples

  • Doing more research to ensure all language is inclusive to all students

  • Potentially adding a chat section where students interact about stem subjects not related to their STEMtags

  • Consider ways to connect to STEM standards to help engage more teachers

  • Add more career-related options for trade and tech schools