Databases

18
Dec

visualMUSE is an inspiration board (approximately 40″x30″) with embedded internet-ready screens that combines the tactile experience of pinning up clippings and swatches as an inspirational tool with the wealth of visual resources now available the internet. Inspired by traditional inspiration boards, I designed visualMUSE as an attempt to address an interesting question: How can we bridge the digital divide in inspirational tools by combining the viscerally stimulating tactile experience of viewing physical inspirational artifacts on a physical board with the massive amount of inspirational imagery available on the web?

visualMUSE

visualMUSE addresses this question by integrating both experiences onto one plane­ while equipping the designer with the digital resources to keep a record of the images that they view (and which images they find immediately inspiring). The embedded screens on the board rotate through images that have been retrieved based on the user-determined keywords, and all the user has to do is press a button underneath the screen if they especially like an image, or alternatively if they want to discard an image. All of this information is recorded on a database so that the user can review his or her selections at the end of the day (or even months later if desired).The physical board pictured is accompanied by an image management tool that I hand-coded with PHP and MySQL to handle the data retrieval side of the project. Click here to read more about the image management system.

visualMUSE

The prototype for visualMUSE board pictured here was created by coding a Processing sketch to pull images from Flickr’s API (through a series of PHP scripts) for a given set of user-defined keywords. A piece of foam board with windows cut to match the placement of where the embedded screens would be placed was mounted to the front of a 28″ monitor to simulate the effect of embedded screens.

visualMUSE

visualMUSE

visualMUSE

visualMUSE

You can read more about the process involved in the creation of the visualMUSE board prototype at my MFA documentation blog.

Category : Databases | Fall 2010 | Final Project: visualMUSE | Major Studio: Interface | Blog
18
Dec

The visualMUSE control panel is a data management companion tool to the visualMUSE inspiration board—a 40″x30″ board with embedded internet-ready screens that combines the tactile experience of pinning up clippings and swatches as an inspirational tool with the wealth of visual resources now available the internet.

The online control panel interface supports and enhances this process by equipping the designer with the digital resources to keep a record of the images that they view (and which images they find immediately inspiring).

visualMUSE Control Panel

The embedded screens on the board rotate through images that have been retrieved based on the user-determined keywords, and all the user has to do is press a button underneath the screen if they especially like an image, or alternatively if they want to discard an image. All of this information is recorded on a database so that the user can review his or her selections at the end of the day (or even months later if desired).

The way the system is organized, the user can create a series of different “Projects” that each have four categories (to correlate with the four quadrants of the physical board). Each category can be created dynamically from the prototype site by adding the titles and desired keywords that the user wants visualMUSE to use when pulling images from the Flickr API. These projects are then stored in a MySQL database, where they continue to update their stores of new imagery that matches the determined keywords.

visualMUSE Control Panel

After the user has passed the day giving feedback to the visualMUSE inspiration board, they can come to their computer and have a comprehensive view of their impulse reactions throughout the day, and a log of all the images they’ve seen to that point. Images that have been marked as “favorites” will be marked as such, and the user would be able to change an image’s status (i.e. favorite vs. normal status vs. discarded) from the interface itself.

Click through to read more about the physical visualMUSE inspiration board.

Category : Databases | Fall 2010 | Final Project: visualMUSE | Major Studio: Interface | Blog
12
Dec

The User Experience

Traditionally, design research consists of two separate processes: research on the context and precedents of the design concept, and visual inspiration/creation, often with the aid of a visual tool such as a mood board. The interactive mood board is designed to allow the designer to integrate these two processes in a way that may provide some symbiosis—the user can see images that relate to the topic of his or her choosing without having to devote full attention to internet searching, all on the same board as the swatches and photos that have already been selected as visual inspiration.

How it works.

When the user is working on an ongoing project, instead of conducting the two disparate tasks of online research and visual inspiration, they can pull out their interactive inspiration board and get to work. The designer first has to decide what four aspects of the project they are looking for inspiration or help on, and can then label the different quadrants of the board to denote which is which with dry erase markers on designated label spots above the LCD screens. They then go on their computer and enter these four topics into the form provided in the corresponding web interface. Once the tags have been assigned (i.e. entered into a web form) the program does the rest—the script will perform a Flickr image search on the search terms entered in each tag, and display the images found in this search on the LCD screens for each topic.

The images will rotate through the display for the user to look at next to their other pieces of inspiration and are entered into a database that keeps track of all the search results it has returned to the board. If the designer likes the particular image, they can press a button to “star” that particular search result—this will trigger the system to (optionally) email them a link to the article where the image was found and will make a note of the result’s preferred status in the database. If a particular search result is either off-topic or simply doesn’t suit the project, the user can press the “skip” button in order to remove the image from the group of images rotating through the frame. This image will be flagged in the database as irrelevant and will not show up in later searches of the database (unless the user specifically wants to browse rejected search results). If the user simply wants to hold the rotation for a minute to look at the picture for a longer period of time and make a decision, they can press a pause button that will freeze the rotation until they press it again.

This allows the designer to continue working on other aspects of the project but to glance up at the board from time to time and see if any new pieces of inspiration have appeared that help them create new ideas or simply flesh out their precedent research. Once the user has decided to return to their research, all they have to do is go back to their computer and view the database of collected search results via the provided web interface. There they can view a list of all search results returned with notations by the starred entries, a list of only the starred entries, or a custom search query or their choice.

Pulling back to a larger scale, the interface will allow each user to have multiple projects running on the same account on different mood boards, so if they have multiple projects going at once, they can retrieve their search results for all the various tags in one interface. (Or if the user only has one interactive mood board, projects are saved so that they can switch back and forth between projects on the same board if necessary.)

Mood Board | Storyboard

(Click on the image to see a larger version of the storyboard.)

What it looks like.

Below are some sketched prototypes of what the image will look like (on a general level).

Mood Board

Mood Board

The web interface.

The web interface will feature an area to select one of several projects that belong to the user, and a tabbed view of the four topics when a project is selected. The user will be able to change or modify the search queries at any time, and the system will retain a record of all past search results for later review. This way the user can change one quadrant of the board if they feel satisfied with a certain aspect of the design without losing the research they gathered in the process.

Mood Board

Inspiration Board Control Panel

 

The following is an example of the types of images and search results will be pulled onto the LCD screens, stored in the database, and which can later be reviewed using the web interface. The search term used in this particular example was “Red Bench”.

Red Bench Search Results

Category : Databases | Fall 2010 | Final Project: visualMUSE | Major Studio: Interface | Blog
2
Dec

Prototypes.

Look and Feel Prototype 1: The Overall Board’s Appearance

This would be the general lay-out for the board—cork and/or magnet board with the user’s own materials attached to it, surrounding screens with streaming data. These particular photos are low on the display side (I only have the one tiny one at the moment) but some of the magazine clippings can be visualized as larger LCD screens for the purpose of this prototype.

Online Inspiration Board Prototype

Online Inspiration Board Prototype

Look and Feel Prototype 2 : The LCD Displays

In order to show what the LCD screens might look like while rotating through feeds, I created some sample graphics and uploaded them to a digital picture frame keychain. These are a few screenshots (albeit a bit fuzzy) of what that might potentially look like once I’m able to either hack the keychain’s display or find another method of integrating an LCD display.

Online Inspiration Board Prototype

Online Inspiration Board Prototype

Online Inspiration Board Prototype

Implementation Prototype: Pulling Feed Text from Twitter

My current success hacking the digital image keychain is limited, so for an implementation prototype I wrote a script to pull down the text of the most recent tweet from four different users by adding to (and otherwise modifying) the Twitter Alert code from last week’s prototype. This code alerts the user when a new tweet has been posted and then displays the text of that tweet for the user to read.

The Code.

PHP


");
}
for($i=0;$i<(count($username));$i++){ echo ($statuses_count[$i]."\r"); } for($i=0;$i<(count($username));$i++){ echo ($text[$i]."\r"); } ?>



 

Processing


import processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int[] ledPins = new int[4];

boolean manualReset=true;
boolean redbox=false;

String[] tweetCountText = new String[8];
String[] oldTweetCountText = new String[8];

PFont font;

int bgcolor=0;
String data[];
String websites[] = {
"rutledgecapital.com/ER/","lizrutledge.com/","a.parsons.edu/~rutle173/","pamelarutledge.com/ER/"
};
int whichWebsite=0;

void setup()
{
size(400,400);
background(bgcolor);
font = createFont("Verdana",14);
textFont(font,14);

//println(Arduino.list());
arduino = new Arduino(this, Arduino.list()[0], 57600);
ledPins[0]=11;
ledPins[1]=10;
ledPins[2]=9;
ledPins[3]=6;

rectMode(CENTER);

for (int i=0;i8) { //if getting a bad request/getting rejected by Twitter then move on to the next site
if(whichWebsiteint(oldTweetCountText[i])) { //if more total tweets than the last round
//if(oldTweetCount[i]!=0) {
// arduino.analogWrite(ledPins[i], 255);
redbox=true;
//}
}

if(redbox) {
fill(255,0,0);
rect(width/2,height/2,width/2,height/2);
}
fill(255);
text(tweetCountText[i+4],10,20+20*i);
}
for (int i=0;i

Measuring success.

The measures of success for this project will be varied since it contains several different components relating to different classes and disciplines. On a base level, I will measure a certain amount of success by whether or not the prototype functions in a way that accurately reflects the purpose of the final product, from the displays through the interface. On a design level, success will be determined based on user testing and feedback, focusing specifically on designers and creative professionals and students that might ordinarily use some type of mood or inspiration board in their daily work.

Category : Databases | Fall 2010 | Final Project: visualMUSE | Major Studio: Interface | Blog