Documentation Video

For documentation we decided to make a printed document quoting the development of the project. This document will be supported with a video. This is the first version of it.

Presentaion day

Finally, we make it work on the touch screen. Although it is not perfectly work (Flickr photo search service was temporarily unavailable during our presentation), people still seems interested in touching people's memory. Here, I just want to thank you to Mike Greer, Henrik Ekeus, Dr Mark Wright, and my partner Pablo for making it the day memorable to me in my life memory.

Flash problems

Working on the new Flash movie

• New scene elements created
  
• Twitter text display successed

Flash problems

• Unable to link two types of data sourced from Twitter and Flickr
• Buttons' actions are unable to work
  

Redesign user interface

In order to combine Twitter and Flickr data, the interface redesign to visualise two types of data (texts and images) for the user to navigate the people's memories from the social networking sites.
Screen 1: Do you remember...(optional answers: I remembered/I forgot)
Screen 2: Something represents the user's request in textual and graphical context

One Background

Resolving action script problems

Date: 18 March 2009 (11:30-15:30)
Attendees: Henrik Ekeus, Mike Greer, Mei
Outcome:

• Henrik Ekeus and Mike Greer overcome Flash technical problems, such as: Flickr photo searching by keywords and accessing Titter blog texts.
  
• Henrik gave some advice on the touch screen and the geo information design.

Mash-up photo gallery

16 March: Improving the display of the mash-up photos sourced from Flickr website
Features: randomly resizing and rotating photos to display on the screen.
Problems:

• only search photos by one keyword from Flick's tag database
• on mouse over event does not work yet
• sometimes the random numbers set the size of the photos too small
  

Connecting to Flickr

15 March: Testing Flickr Photo search method


Resource:

• http://www.flickr.com/services/api/
• http://www.thetechlabs.com/xml/make-your-own-flickr-search-engine-with-flash-and-as3/
• http://www.adobe.com/support/flash/

re-Design blog template

The layout of our blog originally was selected from the site's template library. In order to unify the visual style and readability on this blog, we redesgin our blog's interface to make a constant look with the project interface design.

The layout design of a prototype

The first screen: a dialogue

Starting from a conversation: I remembered and I forgot. The logos floating on the screen are some popular social networking sites or user-generated contents. The dotted background and intertwined line are trying to show that they form a massive informative space. Two dialogues are the initial options for the user to navigate through this digital memory space.
(PS: All the logos are used in here belong to their respective owners.)


Second screen: generating the most popular terms from the digital memory space

Initially, the film-reel like bars are created to display the popular terms in the horizontal axle. However, I found too many search results from the site like Flickr or Twitter. Therefore, I add some note-like images to display the most popular words/phrases, such as I forgot my passwords or wallet. This note-like images are not only could be used to represent what the things are most forgettable but also a sub-menu for the user to go into a particular sentence or a phrase. In order to make the screen more interesting, the two large screens basically can be used to show the most time immemorial images/videos chosen by the designers, rather than generating automatically form the database.


The third screen: perceiving a new world of something forgettable


In here, a simulated interface outlines some mush-up images related to the certain term matched the selected words on the previous screen - 'I forgot umbrella'. The photos can be display in the tiled presentation, like the first one and two image. But I hope, ideally, all the photos can display randomly on the screen to give a roughly overview of the people narrating their common memory. But I don't know whether it is possible or control the size of the images and their rotations. And, the images stack up may course more technical problems. But the third one is more ideal way to display the notion of mash-up data from the Web.
(PS: The images in a simulated interface are not related to the sentence 'I forgot umbrella' because of concerning the copyright issue. Here using some my personal photos is to show the arrangement of mash-up images. Ideally, the final project stage should be able to harvest the images hyper-linked from some user-generated content.)


Inspirations:

• 118118
  118118 is the UK's most popular directory enquiries service company. They start a new service to answer whatever their customers text to them. The interface are a cloud of question marks floating on the screen and each question mark represent a question feed. Their two iconic runners are on the both sides of the screen waiting to respond to the user's action. Once a user clicks on a question mark, one runner will stage their customers' questions and the other will show the answer. This dialogue design is interesting to me, therefore, I use the dialogue design to establish a conversation with user in order to lead them navigating through out the memory space.
• Make a Wish
  
  While I was looking for some photos from my album, I found this work. It was a work showing people's wishes on the New Year Day. The videos are projected onto the wall of the Home of Edinburgh City Council. The visual style was very artistic and the contents were interesting. I was standing for a while and enjoyed looking at people's wishes. A wish is part of a person's life, the part has not been completed yet. I made a wish too at that time. Anyway, it reminds me we could extend our work beyond the desktop one day.
• My sketch
  
  
  I thought of the work flow on the paper for a while and then moved onto the computer to design the layout or colour scheme.

Interface design process

The draft of the project interface


Style:
The design of the interface for the project Memory Traces tries to visualise the process of our project development and also aims to fit the idea of tracing our own memory of doing this project. In the very beginning, the visual style trends to come up a look of the time worn-out because I was thinking of our memory images evolving over time. I surfed some websites, such as CSS Beauty and some Photoshop tutorials, to learn and observe how to create the vintage and hand-drawing styles to illustrate our project interface design. In the meantime, I reviewed all the articles we post on our blog. Initially, I thought of a metaphor of a vintage note book or mind map. Unfortunately, I had tried to make a mind map several times, but I could not draw the style very well. And, a book metaphor might be too limited for this project. Finally, I decided to keep the idea of displaying a silhouetted landscape of Edinburgh and make a combination of the words on our blog as a background. This is also inspired by Digg Labs quoted by Pablo (see screen shot of Digg Labs) and previous discusstion about sms chunks on the screen. The draft version might need to be modified to fit both of our culture background. The initial design is a step stone for the final project and I hope the final one could be more colorful and illustrated in a retro style to fit the theme of our project. However, it is something I need to overcome. Improving the visual design for me takes time to master the visual styles.

Functionality:
Firstly, a simple image is used to integrate the content of Memory Traces project, including:

• I forgot/I remembered website (now it is a prototype)
• A proposal
• A link to the documentary of our working process (Memory Traces blog)
• Acknowledgments
  

Moreover, this interface might be used to brand the project and the size of the interface might try to adapt for the high screen resolutions display(the minimal is 1024*768).


Endnotes 1: some useful Photoshop tutorials

• http://www.deviantart.com
• http://myphotoshopbrushes.com/

Endnotes 2: some photos we took in Scotland and the city of Edinburgh are used to make the border of the a silhouetted image.

The Rober Burns Map

This is a route of what I encountered related to Robert Burns. A person who I never know before I came to here, but the city makes me remember him. I used it as a theme of discovering something surround in this city and recorded my experience onto the map of the city of Edinburgh. In the meanwhile, try out the geographical mapping tool to gain some basic understanding of tagging images or videos on the web map. In here, I chose Picasa because it supports the basic function of Google Map and can be viewed in Google Earth.

There is another Rober Burn Map
The map published by John Bartholomew and Sons Ltd shows Kilmarnock at the time of Burns with photographs of houses and towns associated with the poet (Source: The magazine of the National Library of Scotland, Winter 2008). It is another version of mapping out a person's life in print medium. As Pablo Martínez Zárate wrote in previous article, designing a geomapped story might be a good way of bring the user to navigate through our project.