Prototype I

Visit cardcollage.herokuapp.com for the functional prototype.

Overview

At this stage, we decided to move forward with what we are calling “Card Collage”, an app that allows you to sketch a template, take photos or videos that match the template, and tile them to create cards, flyers, and special messages. It’s designed to spark collaboration between multiple people assembling the collage, and creative responses from those who are receiving the collage.

Need-finding redux

In order to make sure that our project was matching real needs, we went back to the need-finding step to get a clearer picture, interviewing four people:

Mary:

a mother, and part of a large extended family
loves making physical cards to send out
receives e-cards, but sometimes there's no way to respond, even by replying to the email!
she wants a way to express gratitude for these cards, BACK to the senders.

DJ:

a son in a large family
lives far from home, where his dad is recovering from a concussion
his brother lives in LA
they want to join forces to make something personal and nice for their dad. they send individual emails, but they want to do something together. Seems like a job for Card Collage!

Bosch:

Works for the Reikes Center, a nature center and after-school program in Redwood City
He has never really gotten e-cards, and likes physical stuff
But he wants to make cool outreach emails for the parents of the Reikes Center kids, to show them what they have all been doing
If he used Card Collage, he would get each kid to make something cool for each picture, and then have it spell out "Reikes"
"It would be awesome if they could each express themselves, but you also get to see them as part of something bigger than themselves"

Nancy:

a mother - her family members all live in different places (SF, LA, Indiana, Palo Alto)
she wants to make a family card to send out from her whole family
she's not particularly tech-savvy and doesn't have a smartphone though!
"It would be fun if each recipient could add their own piece to the card, like a chain letter"

As a result, we were more confident that something like Card Collage could meet a need to make nice collaborative cards. The people we interviewed also went beyond our project conception by suggesting an ongoing collage (like a chain letter), and two of them emphasized having the recipient respond in some creative way, perhaps by adding their own photo or video.

This week's tasks

Card Collage has three types of users - the planner who makes the template and invites collaborators, collaborators who contribute pieces, and the recipient. We decided that our first prototype would focus on the collaborator, because it requires multiple people understanding the purpose, and because taking good photos/videos seems to be the most difficult step. Since the collaborators have the least motivation to contribute to the project, we wanted to make sure they have an engaging and easy user experience. As such, we play the role of the planner and provide the starting template.

At the same time, we wanted to test how the resulting collages would actually have the desired effect on the recipients (delight, engagement, participation). As such Dan also made several collages himself WOz-style and did WOz tests on several recipients.

WOz testing for Card Collage recipients

Written from Dan's perspective, i.e. first person is Dan.

Test 1: Birthday card (empty slot)

The purpose of this test was to see how enthusiastic someone would be about receiving a Card Collage with an implicit invitation to fill in the middle piece.

I got myself and three of my friends to strike poses, and assembled them into a card with an empty space in the middle:

Below the picture were birthday messages from each of the four people. (In a full version, these might be built into the tiles.)

I emailed it to another friend, and asked him if he would want to put a picture in the middle as a response if he received it as a birthday card. He said that he would, but that he felt very uncomfortable being prompted for a response in a way that put a lot of attention on him. This may be less uncomfortable if we offered a template for what he should put in the middle, rather than giving him an empty space.

Test 2: Birthday card (template slot)

Second iteration, this time with a template:

I sent it to the same friend in order to see if that made him feel better. It did! Here is the result:

This was useful - it suggested that people benefit from clear instructions on how to contribute, especially when they are on the spot!

Test 3: Birthday card (full slot)

I tried the same thing, but this time putting a photo in the middle in advance. The goal was to see how someone would react to a birthday card that used a photo of them as part of a collage.

I sent it to my girlfriend, with the same birthday messages, and asked her what she thought. She thought it was kind of bizarre and quirky, but not upsetting. It didn’t look like a “normal” birthday card. She said that this made her not want to use it with her friends. My takeaway - sending someone a card with all of the pieces filled in is not a sufficient prompt for communication or response.

Test 4: Valentine’s Day card

For a second test of this theory, I sent my girlfriend a Valentine’s Day card that I made myself, with no notes:

She thought that it was cute, but just saw it as a funny picture and not an invitation to communicate. Again, without some kind of scaffold, she had no spontaneous sense that she should add something.

Test 5: Party flyer

I made a fake flyer for a party at my house (the house’s name is Ithaka):

I sent this flyer to three friends for feedback. They thought that it was quirky and funny, and sort of amusingly bad looking, but not very out of the ordinary. It was just a flyer, with no sense of rich communication. Same problem as above.

Again, our big takeaway was that the cards are nice enough to look at, but that they won’t prompt creative responses without detailed scaffolding. This is our major design challenge, but we are confident that we can engage the recipient when we add video, embedded personal messages, and the right kind of invitation to participate.

Overview of Features

1. The planner goes to the Card Collage app and creates a new template - choosing the number and arrangement of tiles, and using a simple plugin to draw a design on the tiles. This could be a pattern, a set of letters, or anything else. Once complete, the planner gets a URL to share with collaborators.

2. Collaborators access the collage template via the planner's URL, and they can choose a tile to fill in by clicking it. When they click a tile, they go to a "Take a photo" page where they use their webcam to take a photo. Their goal is to take a photograph that matches the template. They get a 3-second countdown and a partially-transparent image of the template over their webcam image in order to help them take an accurate photo. If they don't like the result, they can retry. The WOz testing above and from last week made it clear that users taking a photo need the template overlaid on their photo image, so that they can make an accurate recreation of the template. In other words, while you are lining up a photo to replace a tile, you see a faint picture of the tile on your phone or computer. Without it, a heart template from last week's WOz testing:

...ends up looking like this:

Once they are happy with their image, they can click forward to a page where they can attach a brief video and/or text message to their photo. Then they hit "Done", and the result is saved back to the collage. WOz testing suggested that it was important for people to see others' contributions in order to understand what they are being expected to do.

3. Once the collage is complete, the planner gets notified, and can send a link to the recipient or recipients containing the collage. The recipient can open the collage, see all the attached video and text messages, and reply by adding another tile to the collage. (Our next round of testing will explore more ways for the recipient to respond to receiving a collage.)

For this prototype, we focused on the collaborator experience (the second paragraph above) because the quality of the collage depends most upon the ability of people to make good content.

Current Implementation Progress

Our current implementation progress focused on a complete experience for the collaborator. In particular, we accomplished the following:

Set up frontend to record video messages and take pictures, and to preview those rich media.
Set up backend to push data to Firebase and retrieve data from Firebase.
Host unique collages at different URLs, and allow all collaborators access to the same unique collage.
Users can choose tiles, upload photos, and attach video and text to them.
Users get a countdown and semi-transparent overlay on their webcam image to help them take photos.
Contributions from all users are synchronized in real time.
Users can see photo contribution from other users so they get a sense for what they need to do.

Future Implementation and Design Tasks

0. Add capability for collaborators to preview other people's videos and text messages. Currently, we disable that feature for privacy reasons (to allow more personal messages), but we want to have that option, which the planner can enable or disable.

1. Build the recipient exprience. Most importantly - a means of effectively engaging the recipient of a card collage after it’s complete. We don’t want receiving a card collage to be a passive experience - we want to hook people in so that they feel connected to the creators and want to add something back. We will do more user testing next week to focus on promoting this engagement, build that experience for the user, and iterate with more testing and building.

2. Build the planner interface, to complete the end-to-end experience. In particular, the planner creates a template and sends link to multiple people. As a design decision, we won't focus on this interface as much because we want to hone in on the user experience for collaborator and recipient. For now, we assume that the planner is heavily motivated to start the collage and invite friends.

3. Message board for collaborators to discuss with each other their contributions.

4. A way to optionally see the original template when you send a collage. Part of the fun of the collage appears to be seeing how others meet the challenge of making their piece, but you can’t judge the challenge if you can’t see the original template.

5. `One idea we are considering: instead of adding a photo and optionally adding videos on the “other side” of the tile, just add a video, and make the first frame of the video the picture on the tile. That way, when the recipient mouses over the tile, the picture comes to life.

Advantages of the “video first frame” method: you force everyone to make a video, and you get the illusion of making the videos come to life when you mouse over them
Advantages of the “flip the tile” method: it’s technically easier, you DON’T force people to make videos, and you can also add text.

Other Implementation Notes and Prototype Design Decisions

1. While we were testing the photo-taking screen, we noticed that the webcam image is reversed! This makes it very confusing to match a template. We reversed the video signal using CSS, but the image that got saved when we took a photo was still the wrong way. An interesting bug that only revealed itself during development.

2. Our webcam images are in widescreen format, but each tile in the collage is a square. We used CSS to cut the webcam image into a square tile by hiding the parts outside the frame.

3. On the back end, we decided to use Firebase to store data because we want it to be possible for multiple people to use Card Collage synchronously.

4. For this prototype, we chose a zigzag pattern (see the party flyer above) as our template, for two reasons. First, each tile in the zigzag is a simple 90-degree angle, which is easy to create with your arms. Second, the zigzag is a linear pattern that can be made longer or shorter to accommodate people for testing.

4. We also decided to constrain our app to only show photos when you first enter the main screen. Originally, we thought that any videos in the collage would play silently and simultaneously, but we decided that this would be visually confusing and disrupt the template pattern.

Milestone 4: Functional Prototype I