Problem Solution My Contribution Research Defining the Problem Framing the Solution Developing the Solution Design Decision Future Directions Reflections

EureKAS: Reflection App for Middle Schoolers

A webapp that aligns students intrinsic motivations with the learning goals in the context of project-based learning


Sept.2019 - Dec.2019


UX Designer & Researcher


Anna Boyle, GyuEun Park and Miaojun Xu


Webapp 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.

My Contribution

As part of a team of 4, I was the team coordinator, UX researcher and designer. Some of my contributions are as below:


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.

Key findings:

  1. 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.
  2. 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.
  3. 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

Design Iterations

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:

  1. Introduce the goal of usability testing. Train them in using the prototype.
  2. Go through the tasks. Encourage users to think aloud.
  3. Ask follow-up questions.
  4. 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.

Design Decisions

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.

Future Directions

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?