TABLET APP FOR TEENS PORTFOLIO BUILDING
CLIENT | COLLABORATOR
Assemble
DURATION
BRIEF
A portfolio building toolkit prototype to facilitate learners to document and seek feedback often and foster capable, confident makers.
2017.10 - 2017.12
COLLABORATION
Group of 4
ROLES | RESPONSIBILITIES
UX Researcher | UX Designer
WHAT MAKE THIS PROJECT UNIQUE
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
WHAT IS THE PROBLEM
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?
SOLUTION BRIEF
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
STAGES OF THE PROJECT
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
UNDERSTAND THE ENVIRONMENT
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.
UNDERSTAND USERS
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.
Insight
Some students doesn't want to share their projects.
Insight
Students were already aware of categorizing their projects.
Define Focus
TARGET ON STAKEHOLDERS
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.
CREATE OBTAINABLE PROMPTS
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
TRANSITION FROM RESEARCH TO DESIGN
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
PROPOSE DETAIL SCENARIO
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
UNDERSTAND PROTOTYPES
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.
User testing
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...
Students were unwilling to do the documentation because they did not understand the value of documentation.
Design iteration
Iterate based on the feedback from user testing
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.
Created a theme
We created a metaphor of "launching the satellite" to bring a familiar language to the unique users we have based on our previous culture probe results.
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.
Design iteration 2
Creating a more customized experience
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, we iterate screen details based on feedback.
Students only selected 1 learning interest in the beginning because they did not realize they could choose multiple ones.
Select all the topics your are interested in to explore more.
Select all the topics your are interested in to explore more.
DESIGN DECISIONS
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.
Before you go, Want to start the journey?
Takeaway
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.