Documentation Kit Β πŸ“· Β is a tool kit with tactile and digital components that help young learners document and develop skills of success for their future.

Timeline β€”
4 Months
Role β€”
‍Web UX/UI Design
Design System
Printing and Production
For β€”
‍Quaker Valley High School
National Science Foundation Fund
With β€”
Advisors: Marti Louw and Daragh Bryne
Team: Miranda Luong


OVERVIEW
The Self-Directed Learning Curriculum
This documentation kit was developed alongside with educators from Quaker Valley High School through their 'Self-Directed Learning' curriculum. As one of the two designers on the team, I helped quickly prototype the various components of the kit, developed the design and visual system for the print and digital components, and also prepped the various components to be printed and produced.

In the end, 100 poster kits were assembled and shipped to the students at Quaker Valley High School, with an interactive timeline interface that helps assist with the digital components of the kit.

MY ROLE

Designer + Researcher

01. The Poster Kit
What are the various components of this kit and how they work?

SOLUTION
The Kit Components
The Quaker Valley (QV) high school poster kit was created to help young students document their project process in order to review their successes and stay motivated throughout their self-directed learning experience. These are all the components that come with the kit.

SOLUTION
The Kit Components
The Quaker Valley (QV) high school poster kit was created to help young students document their project process in order to review their successes and stay motivated throughout their self-directed learning experience. These are all the components that come with the kit.

SOLUTION
‍‍‍
An Arranged Poster
Students document or log their evidence by adding evidence stickers to the front of the micro-credential cards, which are a set of skills based on the QV curriculum. The arrangement of the cards allow students to create unique layouts and is also reflective of their individual experiences and skills. Here is an example of one layout that is created after all the poster components are arranged.

SOLUTION
‍‍‍
An Arranged Poster
Students document or log their evidence by adding evidence stickers to the front of the micro-credential cards, which are a set of skills based on the QV curriculum. The arrangement of the cards allow students to create unique layouts and is also reflective of their individual experiences and skills. Here is an example of one layout that is created after all the poster components are arranged.

SOLUTION

How It Works
In the poster kit, the various components allow for both a mix of tactile and digital uses. With how it is designed, there is a level of personalization with how students can engage with it.

Students are also provided with both digital and analog ways of documentation their process evidence either uploading it onto a online database or by writing it onto the physical stickers.

SOLUTION

How It Works
In the poster kit, the various components allow for both a mix of tactile and digital uses. With how it is designed, there is a level of personalization with how students can engage with it.

Students are also provided with both digital and analog ways of documentation their process evidence either uploading it onto a online database or by writing it onto the physical stickers.

02. Background & Process
What does the behind-the-scene of this project look like?

PROBLEM CONTEXT
Process Documentation is Difficult
Quaker Valley High School, located in Pittsburgh, has a Self-Directed Learning (SDL) curriculum that is project-based. It is intended to help students foster skill development in areas of their personal interests through direct experiences outside of a traditional academic setting. At the end of the semester, each student presents their project and skill development in a school-wide press conference.

In the past for the SDL curriculum, students have had difficulties maintaining an inventory of evidence as there were many different components and resources, but they were all scattered in various locations, making it hard to organize, especially in the context of remote learning.
‍
From the pain points that we were hearing from the teachers and students, this is how we decided to frame the problem space.

How Might We offer students a concrete way to see their progress, remember their successes, and therefore stay motivated?

PROBLEM CONTEXT
Process Documentation is Difficult
Quaker Valley High School, located in Pittsburgh, has a Self-Directed Learning (SDL) curriculum that is project-based. It is intended to help students foster skill development in areas of their personal interests through direct experiences outside of a traditional academic setting. At the end of the semester, each student presents their project and skill development in a school-wide press conference.

In the past for the SDL curriculum, students have had difficulties maintaining an inventory of evidence as there were many different components and resources, but they were all scattered in various locations, making it hard to organize, especially in the context of remote learning.
‍
From the pain points that we were hearing from the teachers and students, this is how we decided to frame the problem space.

How Might We offer students a concrete way to see their progress, remember their successes, and therefore stay motivated?

PROCESS
Visual Tessellations as Inspiration
‍In Quaker Valley's original documents, they had arranged the micro-credentials with hexagonal shapes so that the arrangement together can ultimately form a greater whole. This was something we wanted to somehow keep in the design of the poster. In the end, we decided to focus on tessellations as inspiration for building the poster's design system. We wanted to continue with a design that would suggest an interconnection between all the skills of an individual student.

PROCESS
Visual Tessellations as Inspiration
‍In Quaker Valley's original documents, they had arranged the micro-credentials with hexagonal shapes so that the arrangement together can ultimately form a greater whole. This was something we wanted to somehow keep in the design of the poster. In the end, we decided to focus on tessellations as inspiration for building the poster's design system. We wanted to continue with a design that would suggest an interconnection between all the skills of an individual student.

PROCESS

Various Poster Iterations
Here are some of our poster iterations with various explorations in color palette, card shape, and layout. Our focus was to provide something that would be visually interesting for the students while also giving them the flexibility to customize the card layout to their own preferences.

PROCESS

Various Poster Iterations
Here are some of our poster iterations with various explorations in color palette, card shape, and layout. Our focus was to provide something that would be visually interesting for the students while also giving them the flexibility to customize the card layout to their own preferences.

ASSEMBLY

Packaging 100 Poster Kits
Since the curriculum had over 60 participating students, this required us to send our posters to be produced at a higher scale. In the end, we created an assembly line to print, assemble, and package all the various kit components into 100 envelopes.

ASSEMBLY

Packaging 100 Poster Kits
Since the curriculum had over 60 participating students, this required us to send our posters to be produced at a higher scale. In the end, we created an assembly line to print, assemble, and package all the various kit components into 100 envelopes.

03. Online Data Visualizer
How did you create add digital interactions to your physical kit?

SOLUTION
Digitally Engaging with the Data
As part of the kit, we also built an online data visualizer to support the evidence that students log through the Google form. Initially, all the data would go into a Google Drive's folder, and students had to individually go into each folder to find their photos and writing.

To provide a more engaging and impactful way for students to view their data and evidence, we built this viewer with timeline and graph view to notice trends of how and what they are documenting.

SOLUTION
Digitally Engaging with the Data
As part of the kit, we also built an online data visualizer to support the evidence that students log through the Google form. Initially, all the data would go into a Google Drive's folder, and students had to individually go into each folder to find their photos and writing.

To provide a more engaging and impactful way for students to view their data and evidence, we built this viewer with timeline and graph view to notice trends of how and what they are documenting.

Next Steps

Currently, these kits are being used in a research study with a few students in the Self-Directed Learning curriculum. We have a protocol set up that will allow us to observe and analyze how the students are interacting and engaging with the various components of the kit, and ultimately if it is helping aid the learning and skill-building process in the long run.

As for additional next steps, we are focusing on getting feedback for improving the kit for future iterations as well as packaging everything to be handed off to the next group of people who will be developing this project further!