EDU: An Interactive App

GHAIDA USAMA EL-SAIED
5 min readAug 11, 2017

By Ghaida El-Saied, Nick Meier, Estephan Rustom, Omar Beyhum and Nick Bajaj

It’s no secret that modern education isn’t very interactive. Today's students are stuck memorizing facts, and creativity is difficult to integrate into classrooms without the proper tools. In his candid TED talk Do Schools Kill Creativity? creativity expert Ken Robinson stated that “we don’t grow into creativity, we grow out of it. Or rather, we get educated out of it.” Almost all of us can attest to this through personal experience.

For our UI/UX class this semester, we tackled this challenge, and built a prototype of a learning tool. This tool would be aimed at lower middle and upper elementary school students. For our purposes, we focused on making biology interactive, since biology has so much potential to be interactive.

Concept Video

Showing just how much an interactive learning tool can change a life

Observation

To better understand our users, we decided to go to a place where kids go to learn. We went to the Lawrence Berkeley Hall of Science, and conducted a task analysis. We watched all the interactions (from afar since we could not interview kids), broke down their tasks into hierarchical structures, and analyzed those tasks for any clues on how to move forward.

Here’s an example of a hierarchical structure based on an activity at the museum where kids could film their own movies:

To summarize, what we learned from our task analysis, hierarchical structures and observations is that we have to concentrate on an age group, understand that kids hate rules and will break them (and when it comes to learning that’s okay), and that (sometimes) they aren’t interested in working in groups and want learning autonomy

Everyone, Meet Tommy

Tommy is our persona, and he was inspired by some of the kids that we saw at the museum. Essentially poor Tommy just can’t handle the tedious level of memorization that has infiltrated sixth grade classrooms. His report card has come in the mail, and unfortunately he isn’t doing to well. He wants a new bike, but his dad won’t buy it for him unless he does better in biology. Luckily for Tommy, a bunch of students he’s never met (and unfortunately never will) at UC Berkeley built him an application to get him to interact with the real world and to understand difficult biology concepts. Tommy used it, and not only did he get his bike, but he learned, expanded his mind, and raised his grades. The storyboard below shows an illustration of Tommy’s rise to fame:

It’s also the inspiration behind our concept video above.

Prototyping

So how exactly did the students at Berkeley save Tommy? Well first they prototyped. Our idea boiled down to having users complete an interactive task on their phone and if desired are linked back to reading on their monitor for additional information. We do not show our users reading and then a task (which is more customary) because it is important for us to fully immerse our users in an experience so they learn from experience and not just memorize the text. Also, using websockets, the phone is where the tasks occur, and the reading is on a monitor. This is to not break flow, and to keep our user moving and engaging. We focused on two concepts for our prototyping; photosynthesis and pollination.

Low Fidelity Prototypes:

Pollination activity

With this activity our goal was to have our user tap the screen to move a bee across the screen. They would pollinate flowers and see what happens when flowers are pollinated.

For the leaf activity, users would be prompted to take a picture of a leaf and apply various factors, such as color change, to see how that impacts the rate of photosynthesis.

High Fidelity Prototypes

In the above animation, we see that the bee pollinates the flowers. Once they’ve been pollinated twice, a fruit forms and it falls from the tree!

For this portion, the user is prompted to take a picture of an actual leaf. Edge detection algorithms focus on the leaf and allow the user to change its color using a slider. A sine wave at the bottom shows an actual rate of photosynthesis based on these variables. Also, the user has the chance to change the season and see how season and color change can affect the rate of photosynthesis.

And that’s the story of how Tommy got his bike!

Thanks for reading!

--

--