Portfolio Project Case Study — Know Yourself

Diego Salvatierra
Mar 20, 2018 · 8 min read

How might we help middle and high-school students engaged in projects define and share their learning goals and help each other achieve them?

Context

Project-based-learning (PBL) is an educational methodology where students complete projects solving authentic, real-world problems, as opposed to listening to lectures and passing tests. Although the idea has been around for over a century (see John Dewey), PBL has recently resurfaced as a hot trend in education. It is trumpeted by innovative schools such as the Khan Lab School in Silicon Valley and the Innova Schools in Peru. But these schools have been purposely designed for PBL, with teachers who have received extensive training on the methodology. PBL is harder to implement in pre-existing schools, especially for teachers who have taught with more traditional methodologies their whole careers.

I decided to tackle this problem for a course at the Stanford d.school and as part of my Master’s Project at the Stanford Graduate School of Education.

Innova Schools (Peru)

One of the main challenges with PBL is getting clarity on what students learn in a project. Students should define their learning goals, and when working on project teams, teachers should make sure that students are actually working towards those goals. In a project, as compared to a test, it is easier for students to “hide” and for just one or two students to complete the bulk of the work.

I visited a public charter school implementing PBL to see how they dealt with these challenges. I saw that they used duties and skills tracking worksheets. While useful, these worksheets were difficult to track and draw data from, cumbersome, and could be confusing to some students.

Worksheets used at a public charter school implementing PBL

Goals

With this in mind, my design goals were the following:

1. Help middle and high school students define their learning goals for a project

2. Make it easier for students to teach each other so that everyone on the team meets their goals

3. Make it easy for the teacher to view and keep track of this process

As students define their learning goals, they become aware of themselves as learners who have strengths and weaknesses, and who more importantly can improve on these weaknesses, thus fostering a growth mindset.

Design sprint map

Design

The basic idea in my initial prototype was to give students a visualization of what skills they knew and what skills they could improve on during a project.

Initial app sketches
Logo development (with help from the Noun Project)

After developing initial sketches, I proceeded to design the app on Figma:

Initial app views

Students rate themselves themselves on a range of skills selected by their teacher on a vertical bar, which then directly generates a skills chart. This helps students become aware of what skills in the project they need to improve on. Although it is only a self-assessment, the hope is that by making learning goals explicit students will be able to tackle them better. Students can view others’ skills charts in order to see who can help them improve on something. The logo is a flame meant to symbolize the lighting of the fire of knowledge.

The initial mobile prototype can be viewed on InVision here.

I proceeded to test this prototype with students in a project-based technology class at a middle school in Palo Alto. I had the students go through the app prototype to test usability. I also developed worksheet prototypes with the basic skills chart functionality to test their reactions and team dynamics when actually making such charts (as the InVision prototype was not fully functional), shown on the images below.

Paper prototypes. I also tested a bar chart to see whether my selected radar chart was really the best option

To protect the students’ privacy, my recording of this testing session is only viewable to my d.school course instructors, in this link. I also tested the app with current and former teachers at the Graduate School of Education. From this testing I found the following positive results:

1. Students like the radar chart design, finding it intuitive and new.

2. Students had not done much reflection on their learning goals, or if they had, they had forgotten it. They found the exercise useful.

3. Students are indeed willing to select a skill in which to teach others.

4. Teachers indicated they would be willing to try it when teaching projects.

I also found the following things that need changing:

1. Students already use laptops in class, so I should switch to a desktop app.

2. The “rate yourself” language can be intimidating for students—need to switch to softer language.

3. Students want to compare the charts directly in one view.

4. The rating scale is unclear: what does high or low on the bar mean?

5. Students have very different internal scales in which they measure themselves (i.e. for some a medium result is low, for others a medium result is high), so the charts should be relative between students instead of directly based on their self-assessments.

6. Why is the logo a flame? Meaning unclear. Looks too much like Tinder.

Having validated several of my key design ideas (radar chart, usefulness of exercise, student willingness to teach others), I proceeded to make the necessary changes in response to user testing. I began sketching a new desktop version.

New prototype sketches

I proceeded to create the new design on Figma. Major changes include a re-framing of the self-assessment into a five-item Likert scale with gentler wording (“How comfortable do you feel with…?”), plus the ability to overlap different teammates’ skills charts at the same time. It can be viewed here.

Style guide for final prototype

The fonts, particularly Museo Sans, was selected to be friendly yet serious. It is the same font used by a successful education NGO that I used to work for, Consejo de Curso. The color palette was chosen to draw both excitement with a new project (orange) and calm in assessing yourself (blue). The stars for rating yourself are rounded so as to make them less intimidating during the self-assessment process. Lastly, the bottom blue bar projects upward to instill a sense of progress and growth mindset.

New logo and icon (with help from the Noun Project)

The new spark/star icon is evokes the shape of the skills radar chart. It is also meant to evoke a compass shape or a north star, as Know Yourself helps you find your direction in a project. This new icon hopefully removes any confusion with the previous one.

I tested this new prototype with high school students at Palo Alto High School. Since the desktop mockup on Figma is not functional, I again created worksheets to test new functionality, in this case the re-framed self-assessment questions.

Two sample self-assessment worksheets

Video from the testing session is shown below. (As students’ faces are not shown, I share a link to the video here).

Students again found the radar charts exciting and intuitive, and they enjoyed the new ability to view different teammates’ charts simultaneously. New pages for adding their own skills also appeared to be intuitive. They compared the general usability favorably to other online tools they use in school. They indicated that using this tool would make their teamwork better, as it would lower the frustration of teammates not knowing what to focus on.

On the critical side, they indicated some confusion at being named the “expert” in something, although they did indicate that it made them feel more confident. Perhaps for a future version I can make the language softer and the designation less sudden.

Next Steps

Having seen that students enjoyed my prototype and found it useful, I will continue to make improvements on it over the course of the next two quarters. Besides small user interface changes, new features to be changed or added include the following:

1. Add an “assign duties” feature for students to distribute tasks in a team. This was suggested spontaneously by the middle-school students and some teachers.

2. Connect learners to online resources to improve on weak areas. This was suggested by the high-school student testers, as well as my thought partner in my Master’s Project.

3. Add scaffolding for peer-learning, guiding students on how they should teach each other, and allowing them to connect with other students who could teach them within the same classroom. This is because students indicated willingness to teach others, but do not have much experience doing so.

A final next step would be to begin programming this desktop version into a usable prototype, as opposed to a mockup, now that I have validated many of the main features.

Conclusion

This design project has made me make my idea for a Master’s Project real and concrete. Along the way, I’ve found many things that worked well, and quite a few that did not. I still have two quarters to make this project more relevant and useful for middle and high school students. I have also come to see that this self-knowledge methodology can be applied in many areas, including traditional classroom work, extracurricular self-paced learning, and even workforce training. For now, I will continue my focus on school students in project-based-learning. Testing with a specific audience has led me to many useful design insights, and I want to continue getting similar insights in the future. In some small way, I hope to make project-based-learning a more productive and meaningful experience for students engaged in it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store