Prototyping

The following are several prototypes that I’ve created ranging from lo-fi experience prototyping to participatory paper prototyping to tap-through wireframes.

Prototyping materials - envelopers, notes, and photos

Prototyping materials - envelopers, notes, and photos

Prototype 1 | Lo-fi Experience Prototyping
Overview
On February 17th, 2011, with the help of my brother, I completed my first round of prototyping.. Will was perfect for this session because 1) Story Forest is about reliving past experiences, which in this case was our early childhood in Manhattan and 2) our experiences were very similar since we are only a year apart in age.

Before prototyping, I had a list of questions along with some assumptions that I wanted to validate.

  • What information medium effectively triggers memories and emotions, e.g. photos, text, audio, video?
  • Would someone want to contribute to a memory tree?
  • Does a memory die with an associated landmark?
  • How does one feel after visiting several memory trees?
  • Which memories are most valuable? Is it based on lifetime period? General events? or event-specific knowledge (ESK)?

Prototyping Plans
A few days prior, I had a chance to explore by foot the area that we grew up in during the early 1980s. This region covered parts of the Lower East Side (Rivington and Allen St.) and Chinatown. At each significant location, I took either a photo or wrote a message about what made that place special to me. I also had my mother do a voice recording via voicemail with her memories about raising us in the neighborhood. This piece of content was associated to the front doorstep of the apartment we used to live at on Allen street.  I then placed these pieces of content into envelopes which would then be opened at their respective locations. For content that required a digital device, such as my mom’s recording, additional instructions were placed into the envelope on how to access that data.

Here’s the list of locations that were plotted out for Will to visit including the type of media that was presented in an envelope at each spot:

  1. 129 Mott Street (written note) – My dad used to visit this fish market when ordering stock for his restaurant
  2. Bowery and Hester (photo) – This was where the Great Wall of Chinatown used to be along with the Music Palace movie theater
  3. 62 East Broadway (written note) – The barber shop that provided us with the classic bowl haircut
  4. Market Street and East Broadway (written note and photo) – Used to have lunch here while waiting for my parents to get their food shopping done
  5. Eldridge and Delancey (written note) – There used to be a playground here
  6. Eldridge and Rivington (written note) – The daycare center with the blue cots and Nilla cookies served with a glass of milk
  7. 157 Allen Street (written note, photo, and audio) – My family’s first apartment
The path we walked in order to relive our childhood

The path we walked in order to relive our childhood

We skipped location #1 since the fish market was closed by the time we got there.

When we got to Bowery and Hester (#2), Will remembered the wall of graffiti that existed on the corner of the street, but it didn’t trigger the memory of the Music Palace movie theater that was located right next to it. After revealing the contents of the envelope, which consisted of the photo pictured below, he not only remembered the movie theater, but he also quickly recalled a memory about watching a Cantonese movie with my aunt when we were kids.

The Great Wall of Chinatown and the Music Palace (courtesy of Harris Graber)

The Great Wall of Chinatown and the Music Palace (courtesy of Harris Graber)

For the next location, 62 East Broadway (#3), my brother and I stood in front of the underground barber shop talking about how the barber was basically babysitting us while our mom was busy running errands. At one point, my brother mentioned the oscillating fan that used to sit in the corner of the shop, which was also one of my key memories of the place. That one memory helped to validate my own past memories and also further established a common ground between what we were reminiscing about.

At Market street and East Broadway (#4), the memory that he recalled wasn’t as important because, according to him, it was “still too recent.” Afterwards, as we made our way over to Allen street, Will all of a sudden stopped in his tracks and excitedly said “There’s this wafting smell of what seems like coffee.” Going back to the question of this being in a home vs. a city, this sensorial stimulation proves that this service should exist within the city landscape rather than a confined area such as a home because a city offers more variety in the types of memory cues.

Next stop, Eldridge and Delancey (#5). Will didn’t recall a playground ever being there, even after I gave him some details about the recreation area.

Before reaching our final destination, we walked by the school at Eldridge and Rivington (#6), where we used to attend daycare. Will didn’t remember the building, but he did remember certain events that happened inside such as the blue cots that we used to nap on.

As we finally reached 157 Allen street (#7), I handed Will a pair of headphones along with my iPhone. On it was a voice message that my mom left behind with some of the memories that she still retained about raising us in the neighborhood. In the video clip below, the facial expression and the overall reaction that Will displayed demonstrates that the audio piece was a powerful memory trigger. It’s also important to note that my mom’s memories about her getting us cakes for our birthdays triggered Will’s event-specific knowledge of getting a Smurf’s cake for his birthday.

Afterwards, Will mentioned that listening to the audio at that specific location motivated him to “try to go back in time to try to remember how it all happened.”

In hindsight, watching Will react the way he did was meaningful to me. It validated how we both felt about our childhood (lifetime period).

Conclusions

  • More recent general events tend to not be as meaningful to rediscover unless it pertains to an event-specific knowledge
  • Photos are efficient in triggering memory
  • Audio is efficient in triggering emotional memory
  • Contribution of memories to a memory tree at a specific location should not be restricted to having to be at that location
  • Leaving memories behind should require as very little bio-cost as possible (voice)
  • Capturing the reaction of a person to a memory should be considered
Paper prototyping toolkit

Paper prototyping toolkit

Prototype 2 | Participatory Paper Prototyping

The interaction between people with their memory trees plays an important role in this project. To figure out whether or not my proposed solution for the memory tree interface made sense, I did some participatory design using a paper prototype.

The Toolkit
My participatory design toolkit consisted of the following:

  • Memory Tree – various sizes to simulate growth
  • Memory Labels – annotate what memory each memory branch represents
  • Accessible Memories
  • Inaccessible Memories
  • Branches – used to group memories and to connect to other relevant memories left behind by others

Process
After briefly explaining the scenario, I gave each participant the following tasks:

  1. Populate the tree with a couple of memories using the toolkit provided.
  2. How would you respond to a memory left behind by someone else?
  3. What happens to a person’s memory tree when you tag that person to a memory in your tree?

Findings with Dave
Dave approached the prototype with the idea that his memories would be broken down into the following hierarchy:

  1. location (tree)
  2. spaces (branch)
  3. memories (leaves)

The first example he cited that happened to fit this model was his parent’s home. This was a result of me forgetting to mention that this takes place within the context of a city where not all locations have well-defined spaces. Nevertheless, he proceeded and the following insights were a result of the exercise:

  • This approach of breaking down a memory becomes complex instantly. It’s no longer a tree of memories, but a web of branches. Too many tiers to deal with. The example that was brought up, house > room > toy box > toy. It’s like the reversal of a memory palace.
  • Does turning off memories after accessing them an attempt to get people to look at all other available memories?
  • It’s very important to establish and visualize which branch is the original branch that all subsequent branches are branching off of.
  • How can turning on and off memories create a conversation between people tagged to a memory?
Dave breaking down his memories by location, space, and memory

Dave breaking down his memories by location, space, and memory

Most of what Will did confirmed my original solution

Most of what Will did confirmed my original solution

Findings with Will

  • It’s important to clarify that everyone has their own Story Forest.
  • Why would someone want to access their memory again if they’ve accessed it already? What if we make a memory inaccessible for a year after accessing it?

Wrapping It Up
I realized that during this exercise, it was really important to clarify that each person has their own Story Forest. While a person can create trees and memories in their own forest, other people can also contribute to that person’s forest by tagging them in their own memories.

How a shared memory in a person's forest contributes to another person's forest

How a shared memory in a person's forest contributes to another person's forest

Also, since each person has their own Story Forest, the accessibility of memories of one forest are independent from another. Continuing from the example above, after I view the memory that my brother indirectly added (step 3-4) to my tree via tagging, I would not be able to access that memory for another year. Meanwhile, this would not affect the accessibility of the memory on my brother’s tree.

Overall, I think the interaction between people and their Story Forests (as seen above) creates a support structure that motivates and incentivizes them to help each other to achieve their goals. This conclusion would not have been possible if it weren’t for Dave and Will asking about how one’s action affected another.

Prototype 3 | Tap-Through Wireframes
I spent a week iterating and testing wireframes for the Story Forest iPhone app using the method as described by Matthijs Collard at Adobe. Using a combination of Adobe’s Fireworks, jQuery, and PHP, this prototyping method got me through a couple of rounds of testing. On the 4th round, its limitations were starting to show when I included swiping and other native iPhone gestures. I’m sure there are tweaks that exist (e.g. fixing the position of the main navbar), but I haven’t had a chance to dive into those yet.

Below are links to the iPhone wireframes that you can play around with. Not everything in the wireframes are hooked up. I kept my focus solely on the major call-to-actions in order to reduce the amount of time required for this phase of the project. I’ve also included the list of changes (towards the end of this post) from one version to the next, which were made based on user testing.

To download the wireframes to your phone, follow these really simple instructions:

  1. Go to any of the following URLs in your Safari browser on your iPhone. Please note that these URLs do not work on your desktop.:
    http://storyforest.genelu.com/wf-rd4(Latest Version)
    http://storyforest.genelu.com/wf-rd3
    http://storyforest.genelu.com/wf-rd2
    http://storyforest.genelu.com/wf-rd1
  2. You will then get the following message. Click OK.

    The message that pops up after navigating to the link. Click OK.

    The message that pops up after navigating to the link. Click OK.

  3. After clicking OK, click on the middle button (the arrow jumping out of the box) in the bottom tool bar. Afterwards, click on Add to Home Screen.

    Click on Add to Home Screen. This adds an app icon to your iPhone.

    Click on Add to Home Screen. This adds an app icon to your iPhone.

  4. And voila! The prototype is now on your iPhone.

User Comments and Suggestions
In versions 1 and 2, I wanted to nail down these types of basic interactions before moving onto version 4, which has a larger emphasis on visual imagery.

Versions 1 and 2

  • User was trying to tap out of the map modal window in order to access other trees.
  • “The trees [on the map] should light up.”
  • On Branch listing page, “1/4″ is not clear.
  • When navigating other trees, there should be a “Next Tree” button.
  • “2 of 4 Trees Nearby” is unclear.
  • What does “12 Days” or “15 Days” mean?
  • “Isn’t this just a filing system?”

Version 3

  • Swapped out the folder/subfolder structure with an image of a tree pulled from Jer Thorp’s Tree Growth to better visualize the connections made between stories within a tree and its branches.
  • Implemented a Compass feature to help users find a tree nearby. This is helpful when there are multiple trees located near each another.
  • Notes have been added as a content type.
  • A branch is required prior to adding photos, notes, or audio content to a tree. The branch serves as the overarching header of a group of content.

Version 4

  • Updated the tree navigation to gestural swipes instead of the native iPhone directional pad.
  • Simplified the compass. Someone suggested having leaves of a tree show up on the compass interface when near a tree.
  • Data may become overwhelming if users contribute more comments than actual content (photos, audio recordings, notes).

Additional Changes Aside From Wireframes

  • Users are able to input data whether or not they are at the location of a Story Tree. One scenario that was brought up during user testing was that if a friend had left for another country, he/she can reminisce with old friends by posting stories and tagging them to locations around their city back at home.
  • There is no longer a lockout period for stories since the system has already constrained memory access to location. According to one user, “denying someone of their rights to access a memory is wrong.”
This entry was posted in The Book. Bookmark the permalink. Both comments and trackbacks are currently closed.