Design Phase: Iterate, Iterate!

Authors: Yu Zhao, with AnnaB, Miaojun Xu, GyuEun Park

Where are we in the design process?

We are now in the final design phase!

Lo-fi Prototype and Usability Testing-1

Prototype: Based on the learning experience map, we created a black and white prototype and printed it out for prototyping testing.

Goal: The goal of this research was to understand the ease-to-use, effectiveness and desirability of our prototype. We aim to answer the following questions about the usability session:

• How easy-to-use and intuitive students find the platform?
• How effective our design of reflections prompts are and how might we scaffold them?
• How enjoyable students are using our platform?

Method Selected: The usability testing session consists of 2 parts: prototype testing and reflection prompts testing. In the prototyping testing session, students were given a paper prototype and three tasks to complete. In the reflection prompt testing session, students were given a sheet of reflection prompts and asked to rank their difficulty level. The two testing sessions were followed by an interview where students were encouraged to share their overall experience with the prototype, the confusions and the suggestions.

Participants: We conducted the usability testing sessions with four students at Kentucky Avenue school. They were chosen by Aimee Defoe and taken out of class to participate in our study.

What did we learn from our lo-fi usability testing?

We identified several usability issues with our prototype.

Project journey map

Findings: First, the project journey map page is not intuitive to students. The word “milestone” is unfamiliar to the students; the “generate report” button is too prominent, and how to add a new project milestone is not obvious to students as well. Also, the visual representation of a bubble is confusing for students.

Design implications: Change the wording of “milestone” to “step”. Place the “generate report” button in a less prominent place. Replace the visualization of “bubble” to make the design more obvious.

Reflection

Findings: In the paper prototype, we provided only 5 emoji choices to students. Students did not seem very excited about this, one student mentioned that the emojis were not intuitive for her. All students chose writing (as opposed to sketching or audio-recording). Two explanations account for the observation. First is that the choices are not made intuitive enough for students to make the choice. A second explanation is that students tended to choose various mediums based on different projects and contexts. For instance, one student mentioned that is can be weird to audio-record in a classroom.

Design implications: Provide students with as many emoji choices as possible. Default writing and make it explicit that students have other options as well. Add a playground where students can upload informal and unstructured reflection to cater to the need of different reflection formats in various contexts.

Customization

Findings: The customization page is also slightly confusing for students. They do not know what the “x” stands for.

Implications: Make the functionalities on the page more obvious.

Hi-fi Prototype and Usability Testing -2

Prototype: We designed a hi-fi prototype testing session incorporating feedback from the paper prototype testing session. We also refined our UI in this version.

Goal: The goal of this research was to understand the ease-to-use our prototype is.

Method Selected: This testing session consists of 2 parts: the usability testing of the main “reflection” function and the playground function. In the reflection testing session, students were given a digital prototype to complete the task of creating a reflection about the current step. In the playground testing session, students were given a digital prototype and perform a think-aloud of how they think this function can be used. The two testing sessions were followed by an interview where students were encouraged to share their overall experience with the look and feel, the on-screen interactions, the confusions and the suggestions.

Participants: We conducted the usability testing sessions with four students at Kentucky Avenue school. They were chosen by Aimee Defoe and taken out of class to participate in our study.

What did we learn from our hi-fi prototype testing?

Project Journey map

Insights: Students scroll down the project journey map page to see the step overview, which is not the main interaction we intended.

Implications: Do not show the step overview unless the user clicks on it.

Reflection

Insights: Students found the language used in the site too simple, they wished that the language and instructions can be more thorough so that they knew more precisely what they needed to do next. Also, we found that students were choosing various mediums to reflect in our hi-fi prototypes, which suggested that our design was an improvement in terms of communicating the idea of freedom granting.

Implications: Instead of using one sentence to deliver the instruction, we can add more detailed prompts.

Customization

Insights: It was hard for students to indicate how many hours they spent on one step as some steps might only take several minutes. Students were also interested in customization and can imagine choosing cover photos for their steps!

Implications: The idea of using time spent to customize each step did not work very well — we decided to have students indicate the time spent when they were creating the project and limited the scope of customization to cover photos and colors.