Project RAISE stands for “Reclaiming Access to Inquiry based Science Education”.
We are focused on using “Universal Design for Learning”. A principle that involves designing to encourage learning and stimulate interest. The National Science Foundation awarded $3 Million to the College of Education at UMass Amherst to develop an innovative new model for teaching science to the incarcerated youth. Read more about it here.
I was hired for the project as a User Experience Designer. I am primarily in charge of brainstorming and designing textbook activities which are interactive and fun, while helping students learn more about Ecology. In this series I will go through my design thinking process behind creating the experience of a few of the activities I’m working on. Some topics I have become familiar with while creating the textbook experience include biodiversity, the way that energy is spread throughout ecosystems, and how different animal populations are affected by changing environmental conditions. We go through design and development sprints which involves a series of designing and user testing followed by iteration based on feedback.
Understanding the users
The users are high school students ranging from ages 14–21. They have a very broad range of technical and academic capability. With this in mind it is important to design for all the different types of students that are going to be interacting with the textbook. Many have not been exposed to proper education and may have physical/mental disabilities. In order to maximize students’ learning, the textbook must encourage engagement, and this can be accomplished by building a simple interface filled with actions that are easy to interact and provide instant gratification. When designing for the students I need to keep all information and possible interactions in front of them. For example, there should be no way to minimize or hide actions, to avoid user confusion and distraction. These students have a tendency to go off track and lose focus when taken to a different page for example.
Design Activity: Movie Player
I outlined the core experience the movie player should present as well as some details to keep the experience consistent with the rest of the textbook. The design is structured so on the left side of the iPad will be a reading textbook page and the right side will be a related interactive activity to keep the students engaged.
- Students can add/delete slides with media and text content. This includes imported videos, photos, and voice recording.
- All possible interactions are visible for the students (No minimizing).
- Students can change the animations for transitioning between slides, select colors, and change the time a slide is present on the screen.
- Maintain consistency with overall design style and feel of the entire app.
- They can then play their full movie.
Usability Testing Feedback from the Students
We brought out iPads to the students in the correctional center to test the movie player. They were super excited and eager to play with them. We setup the testing in a classroom setting, we gave the students very little instruction besides a brief tutorial video they watched in the app. We wanted to see how much of the functionality and experience was intuitive for them. There were 5 students in the detention center who used the movie player. Afterwards we had them gather in a circle to get their impressions and suggestions. They found it amazing how we were actually listening to their feedback and planning on reiterating accordingly. These students grew up with tough lives and were often neglected. It isn’t normal for people to actually listen to what they have to say. We had also taken into consideration some observations we made when watching the students use the movie player.
We gathered all of the students feedback and compiled it into a document. For the most part, the feedback was positive. We came up with a few suggestions on our own as well. Here is a list of some of the feedback we decided to work with:
- Iconography used for the buttons was confusing, a student stated that the icon used for picking colors looked like a mountain or a camera feature.
- Students didn’t know if the different functions were effecting one slide or all the slides as a whole.
- They had tendency of adding media or making mistakes in slides but had no way of undo/delete and expressed frustration.
- No clear indication of when the recording was on/off. No state change.
- We realized that students may want to play the movie from a certain slide instead of having to start from the beginning, or want to go through one slide at a time.
I discussed with the team all the feedback and revised the design. Here is the second version.
- I decided to create two toolbars and attach it to the slide so it was clear that the functions were associated with each shown slide. It establishes a distinction.
- The toolbar has some icon changes so its easier to understand the purpose of each button, the color palette for picking colors, the bouncey ball to indicate animation, and a undo/redo button for when they make mistakes.
- I followed a consistent style of existing movie players when creating the player toolbar.
- Changed the color of trash and add slide so they stand out overall from the rest of the buttons.