Wireframes and Prototypes

I spent the past 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 (First Version)
2. You will then get the following message. 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.

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.”