A webapp that aligns students intrinsic motivations with the learning goals in the context of project-based learning
Duration: Sept. 2019 - Dec.2019
Role: UX Designer & Researcher
Team: Anna Boyle, GyuEun Park and Miaojun Xu
Result: Website prototype
Reflection is hard, particularly for middle school students
Our client is Kentucky Avenue School (KAS), a K8-12 school in Pittsburgh. The Maker Class at KAS is a Project-Based Learning (PBL) class that requires students to write reflections to make an online portfolio to showcase what they have learned. However, students do not see the value of reflection and find writing cursory. So how might we align students' intrinsic motivations with the learning goals in the context of project-based learning?
Eurekas: reflection made easy
Eurekas offers natural, integrated and rewarding reflection learning experience for middle school students at Kentucky Avenue School.
As part of a team of 4, I was the team coordinator, UX researcher and designer. Some of my contributions are as below:
Planned and conducted contextual inquiries, interviews and cultural probes in the research phase, speed-dating in the ideation phase and usability-testing in the design phase
Ideated and sketched initial solutions. Mapped out the functionalities of the site.
Created lo- to hi-fidelity prototyping. Created UI toolkit.
Created visual artifacts such as work model and digital learner experience map.
Contacted stakeholders in KAS, negotiated and scheduled meetings.
Learning from users
Through contextual inquiry, interviews, and cultural probes activities, I was able to understand the value of portfolio-making in learning, the key challenges facing students and teachers, and students motivations.
Reflection allows students to develop meta-cognitive skills. In reflecting, students are able to learn from the process and failures. They are able to develop meta-cognitive skills that are essential for their future learning.
Students view reflection as another schoolwork without added value. Students do not understand the importance of reflection. When they are have finished making a project, they are mentally "done" with it.
Students want portfolio to be personal. They enjoy the changing cover-photo part and reflecting on personal matters.
Defining the Problem
How Might We align students' intrinsic motivations with the learning goals in the context of problem-based learning?
We identified more than one problem in our initial research phase. We narrowed down the problem space to students lacking motivation to reflect and perceiving writing as stressful.
In our research, three design principles emergerd: rewarding, integrated and natural.
Framing the Solution
By tapping students’ intrinsic motivation to reflect through scaffolding, visualization, and customization, students find documentation and reflection rewarding, integrated, and natural.
In an ideation session, we brainstormed 30+ ideas, created 10 storyboards and conducted 3 speed-dating testings to validate the ideas.
Three key ideas emerged to form our vision statement as stated.
Idea: Students will indicate their feelings and performance of one milestone using emoji and progress bar, before they move on to the actual reflection.
"It doesn't seem so serious when you use an invitee, it takes off a layer of intensity." - P1
Idea: Within a milestone, students can choose emoji to indicate their feelings toward a project. A student's progress across milestones is represented visually in reports and journey maps
"They (the students) are used to communicating that way." - P1
Idea: students can customize the cover page of each individual reflection as well as the journey map.
"It is like a 'box of LEGO', it gives you the freedom of what you want to do." - P2
Conceptualize our ideas using a learning experience map
The learning experience map is a hybird of customer journy map and service blueprint. The "storyboard" and "emotions" channels communicate a student's journey and his/her ups and downs when using our product. The "learner", "instructor" and "peer" channels communicate how these three stakeholders influence one another.
Developing the Solution
We conducted two rounds of usability testings with 8 users. The first round used a black and white paper prototype and the second round used a digital functional one. Our usability testing process is as the following:
Introduce the goal of usability testing. Train them in using the prototype.
Go through the tasks. Encourage users to think aloud.
Ask follow-up questions.
Thank them for participating.
Visualization: Iterate to find the clearest metaphor
Visualization was a validated concept in our speed-dating exercise; but it seemed that we were not providing the right visualization to students. It was not obvious that these "round circles" were bubbles and that a bubble standed for a "milestone" in the project. Meanwhile, "milestone" was not the language used by middle school students.
After several iterations, we decided to go with the simplest idea: use a flow chart to convey the idea of a journey map.
Scaffolding: Iterate to find the balance between autonomy granting and cognitive load reducing
At first, to reduce the cognitive load a student might experience, we offered a limited set of emoji. In the lo-fi testing session, most students went with the "it was fine" option. We interpreted this observation as - the limited options and captions under the emojis restrained students' imaginations and hindered a deep reflection.
We also designed the cards to unfold themselves, but it turned out students would rather click "done" before they got the chance to see everything.
Suprisingly, all four students in the first testing session chose writing as the medium for reflection. One interpretation was that the "freedom" to choose amongst a variety of options confused them. Therefore, we decided to make writing default to encourage them to explore alternatives such as sketching or audio-recording.
Customization: Iterate to find the right extent for personalization
Our previous hypothesis was: Students would like to have as much freedom as possible in customizing the cover page. However, in both rounds of usability testing, we found that students were confused over the many functionalities provided to them.
So, we decided to focus only on choosing the cover page photo, discarding the Choose Color feature. This will reduce students' cognitive load when entering this page and encourage further reflection by choosing a meaningful photo.
Playground: Newly added feature in support of unstructured reflections
One new theme emerged during the usability testing session was that students prefer different types of reflections in different contexts. Currently, our platform only supported structured reflections after each milesonte in a project-based learning classroom. But what about making our product more integrated into students' lives? How can we support reflections in a less structured way?
Inspired by the moodboard concept, we decided to add a new "playground" feature storing students random ideas.
Support Big Picture Understanding through Project Journey
Feature: Students can "create a new step" to add a new milestone to the project. The visualization of the journey map helps students understand the big picture and draw connections among steps.
Rationale: Project Journey supports learning through making the connection among steps visible.
Scaffold Reflection through emoji and learning progress bar
Feature: EureKAS makes reflection easier by allowing students to choose emoji and indicate learning first, before they move on to the actual reflection part.
Rationale: Students find writing stressful, the scaffolding process can make the process easier. In our usability testing sessions, students expressed how they liked the emoji part.
Choose the cover page to design a customized learning journey
Feature: Students can choose the cover photo of a new step. It can help students further reflect their learning.
RationaleCustomization cover photo makes the learning process feel more personalized and engaging.
Unorganized reflections are stored in playground
Feature: Playground is a place to store unstructured reflection. Students can record small moments of learning, upload and tag them for future use.
Rationale: Good reflection moments can come unexpectedly. By collecting these unstructured reflections in a playground, EureKAS creates a moodboard for students to refer to in the future. This supports lifelong learning.
Make Eurekas more integrated into the classroom
Eurekas can have a broader usage by involving parents, peers and teachers in the learning process. Teachers can set learning goals and give feedback to students' reflection on the teacher dashboard. Students can also share their portfolio with parents and peers easily.
To conceptualize our future plan, we created the following diagram:
Evaluate The Impact of Eurekas
If the product is launched, we will have the opportunity to evaluate the product using the success matrics and evaluation plan we created during the process.
If I have more time, what could I have done differently?
Plan co-design session with students to generate new insights. This will help us further explore the solution space. We might be able to know what types of technology and interface (color, font etc.) students prefer.
Talk to more students to segment our student persona. Our current user persona gives us a general picture of who are the students. But as we move on to the ideation and design phase, we started to see the emerging of two types of students. Some students are more than willing to reflect on their personal lives - but are not into reflection as a homework. Others might be less interested in reflecting either way. To dive deeper into the needs of the different users, we can better prioritize features and potentially create a good learning and user experience for everyone.