A portfolio building toolkit prototype to facilitate learners to document and seek feedback often and foster capable, confident makers.

2017.10 - 2017.12


Group of 4


UX Researcher | UX Designer


This project illustrated on the purpose of a portfolio outside career and professional needs. Instead, it aims on learning from feedback and building up confidence through the document journey.

Project Overview


As an informal education organization, Assemble recognizes portfolio playing a role in maker education. But, for teenagers not interested in making career or professional gains, what is the true value of portfolios or documentation practices?


Build a portfolio-documenting service system that helps learners illustrate projects in their

interests and get feedback to improve.

Digital plus physical experience to blend in the environment

To truly embed the design into a maker space like Assemble and nudge teenagers to document, the system is trigger by a physical display in class and a digital document process on tablets. 

Tutorial Video

A introduction of "why a good maker needs to document" video will be played at the beginning of Assemble's program to give learners a better motivation to document their process and work. 

Lodestart App

Tablets will be accessible in the toolkit for learners in Assemble to capture process, upload projects, and reflect to get feedback.

Real-time Progress Board

Students' projects will be displayed on the screen after they finished and chose to share. So that peers can have discussion and teachers can give them timely feedback. 


Design Process


This 8 weeks project separated into 4 main parts including user research, persona, experience map, and prototype.

1. Understand the experience

2. Identify users' needs

3. Ideate solutions

4. Design and testing


Discover Experience


An artifact model helps us understand the tools that 5th -7th grade learners currently use in Assemble space.

To design a complete experience, we took into consideration the tools that were already in use. Asking questions such as: Was the lack of documentation practice an issue of tooling? With what tools did Assemble go about sharing and displaying student work?  

Displaying - Assemble used both virtual and physical tools displaying current students’ works.

Documenting - Smartphone is mainly used for documenting process and final works.

Not only artifacts, the flow of learning matters.

A behavior map helps us unfold the context for designing a documentation system that can blend in the environment. We discovered 1. students normally stay in their position. 2. Teachers will take photos to document students process. 3. Students take photos and share with their friends through social media.


Interview gets poor results from kids? Use another design method to understand our extreme users.

We design a cultural probe to understand 5th-7th grade learners in Assemble to avoid poor results from a normal interview format. In this method, 5 students are asked to design a museum for themselves. The result become a gateway for us to probe learners motivation, interests, projects, and organization of their works.


Some students doesn't want to share their projects.


Students were already aware of categorizing their projects.


Define Focus


Spot the pain points and needs...

We keep an eye on the results of cultural probings and interviews to identify the 3 main participants in the environment. These proto - personas help us stay anchored on users and avoid adding features from designers’ desire.

For each proto - persona we identify the motivations, tasks, and emotional needs in the activity.


We've targeted users. Let's define actionable design goals now.

HMW create an effortless documentation process for teachers?

HMW categorize students' works and allow them to see their progress in different skills?

HMW create a process linking physical and virtual display?

HMW foster more efficient feedback between teachers and students?


Experience Mapping


Plan out the entire experience with a focus on HMW and users.

To illustrate the HMW, each team member sketch 5 storyboards. To synthesize the ideas into a cohesive design concept, each storyboard was printed and cut to rearrange. Later, we proposed an documentation experience map with a daily outer loop and a one-time capture inner loop.

The two circles with colors are steps that we decided to focus on due to the project timeline


Bring reflecting and giving feedback into a project timeline.

The outer loop describes how students would start a learning journey, create work, capture/reflect (inner loop), ask and receive feedback, and then share their work.

Create a almost effortless capture experience is the key.

The inner loop describes a projection of real-time student capture images, students using tablets to capture information, and then students completing reflection prompts.


Build It Out


First thing first, Figure out why and what we are prototyping.

Based on What do Prototypes Prototype? by Stephanie Houde and Charles Hill, prototypes  have 3 different testing focus including roles, look and feel, and implementation. Hence,  before starting each of the testing, the first step is to define the focus of the specific type of prototype.


Start with understanding the roles of the design features playing in Assemble.

For 1st prototype, we create interactive screens by combining paper prototyping and ipad camera, a projector with documentation station prototype, and the progress projecting board.

Capture & reflect interface

During the user test, students took real photos by switching from paper prototypes to camera function of Facebook and write reflections above the image.

Physical device

We tested a projector case as a portable documentation station where students could store and take out the tablet to document their works.

Projecting nudge

Once the students have finished their documentation, their photos will be displayed besides their profile.

Feedback is always important! What we observed...

1. Students don’t have the concept of documentation.

2. Learners want to document the completed projects only.
3. Documentation facilitates both learners and teachers’ interactions.

4. The projected information is helpful to quickly assess the progress of students.


Iterate based on the feedback from prototype 1.

For prototype 2, we focus on the testing that might construct portfolio mindset and scaffold the process of documenting half way done projects. E.g. a tutorial video explaining the benefit of documenting and minimum viable product about capturing and sharing projects.

Tutorial Video

Test if students can understand the value of documenting by watching this Introduction video of portfolio process. Most of the students understood what the video was about. But, they were not sure about the connection between video and app.  

Screens of Key features

Test the key features of the application and how students and teachers interact with it using an interactive prototype and contextual inquiries including 6 students at Assemble.

Feedback is always important! What we observed...

1. Students see getting feedback from teachers as a formal but not frequent choice.

2. The upload process is understandable for most of the students.

3. Students only selected one learning interest at the beginning.

4. Students don't understood the relationship between the app and the video.


Not just big concepts, Detail user flows and interactions are important as well.  

For prototype 3, we focus on revising parts that confused users  in the app. E.g. adding explanation for choosing more than one learning interest at the beginning. Also, we consolidate features that have better feedback from previous interview. E.g. strengthening an informal and timely feedback system for students and teachers. 

Information Architecture helps us clarify the confusing part of the user experience and structure the backbone of the interaction design.

After created IA, all discussed features were translated into screen-by-screen wireframes with a logical flow to discuss if the flow makes sense to users.

 By following the orange lines moving forward and backward, the interaction of the real users with the app was simulated. 


Design Highlights

The entire design aims to

1. Trigger learners motivation to document by creating nudges

2. Provide easily accessible tools for documenting, reflecting,and managing work.

3. Build a sense of accomplishment by sharing what they’ve learned in a safe environment.

4. Create positive on-topic conversations with both peers and teachers.

Learning Interest

Choose multiple learning interest to create different categories in which students are interested.

Lightweight Documentation

Provided a scaffold process to document students’ projects in one screen.

Project Based Feedback Chatting

Provided  a casual chatting environment for students to reach out  timely feedback.

All-In-One Project Synthesis

Provided pictures, contents, and feedback in one screen to minimize the review effort.

Before you go, Want to start the journey?


What went well in this project was the user research we learned and used to probe out 11-13 year old teens’ needs. The process to synthesize storyboards that resulted in the Inner and Outer Loops was also efficient in framing how micro and macro aspects of documentation would fit into Assemble’s rhythms.


The huge difficulty for this project was that given the time limitation we had to narrow down the scope of Lodestart. Hence, we decided to focus on the most crucial part of the experience and design on tablet first.


Given more time, I would like to design a mobile version and test out the documentation effect on the smaller screens.

Last, I want to thank Assemble for giving us a wonderful chance to cooperate and my teammates being a wonderful support in all aspects.

© 2020 by Cheng-Hong Wang