Final Project: visualMUSE

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
13
Dec

The board so far—overall dimensions are 40″x30″ with four 7″x5″ windows. The board is mounted on my 28″ monitor, and images will be visible through the cut windows in order to simulate embedded screens.

Board Prototype
Board Prototype

Category : 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
23
Nov

In order to address the divide between digital imagery and analog inspiration boards, I want to integrate the two of them into one piece. The references below show different angles of some of the things I am trying to achieve with this project.

References and Inspiration.

Inspiration board posted on the Bright Bold and Beautiful design blog:

Inspiration Board Precedent

The placement of this oversized inspiration board directly over the two computers in the studio is an interesting blend of analog and digital—it is almost as the screens are part of the board. My inspiration board would aim to do precisely this but in a more integrated way, so that the user could still be on his or her computer doing something else while viewing inspirational imagery out of the corner of their eye.

Polyvore

Polyvore.com is a website that allows the users to essentially create their own digital mood/inspiration boards by pulling images of different products and including them in one composition. Other users can then comment on the looks that they’ve pulled together, giving this particular site a social aspect as well. It is an interesting precedent for this project due to the purely digital nature of what is essentially cutting images out of magazines and catalogs—yet what if you had a piece of fabric that you really liked for a certain look? The completely online interface opens many social doors for the activity but limits the user in what they can add to the compositions they create.

Image Spark

Image Spark

Image Spark is a membership-based online tool to create mood boards and share images by creating customized image libraries. It allows you to create boards and share the images with others. Image Spark is in a way the purely digital form of what I’m trying to do with this project—the integrated analog and digital elements in the board proposed in my project would be a way to use the internet as a resource to find images but allows the user to see them in a more tangible format.

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

The Problem.

The Online Inspiration Board is a method of addressing the growing disconnect between a physical inspiration board and the best resources for adding material to an inspiration board. These days the best way to find a large volume of ideas or inspiration is through images searches on the internet, Twitter feeds, or blog feeds—but these feeds and posts can’t be easily torn out like they could in a magazine.

The Target: Design Professionals and Students

The main target of this product would be a number of different kinds of design professionals and students that use inspiration boards as part of their work or personal life. (Other creative hobbyists would be able to find use for the digital inspiration board as well; they are not, however, the target user group for this project.)

Proposed Solution.

With this product, the user would be able to input their favorite inspiration blogs (whether they be design blogs, home improvement blogs, or lolcats for that matter) into the interface, and have a number of LCD screens on the board that would then stream the information from these feeds. Space would be left open in order to allow the same functionality of an analog inspiration board, so that the user could still pin up any print outs, magazine clippings, swatches, etc that they want to include in their design—this way, they would be able to see the incoming feeds right up against the pieces they’ve already selected for the feel of their project instead of having to visualize these elements when staring at tabs on a browser.

Each feed’s display would also feature an adjacent button that would function as an “interest” button; if the user is interested in reading more about the particular story that’s currently featured on the board, they can push the button and have the link to the story or post emailed to them for further review (and potentially for printing out to pin onto a free part of the board.)

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

Precedents: Inspiration Boards.

Many people use inspiration boards, whether they are professional designers or simply like to be inspired in their everyday life. The following are examples of inspiration boards found across various design blogs, showcasing the variety and visual interest inherent in one of these boards.

A custom inspiration wall created by Jessica Engeman on her blog Domestic PDX:

Inspiration Board

Inspiration Board

A personal inspiration/bulletin board at different times over a 16 month interval, posted by Flickr user geonetix:

Inspiration Board Precedent

Inspiration Board Precedent

Inspiration Board Precedent

Inspiration boards posted on the Bright Bold and Beautiful design blog:

Inspiration Board Precedent

Inspiration Board Precedent

Personal inspiration board created by a professional organizer. How-to detailed at her blog, The Order Obsessed:

Inspiration Board Precedent

Inspiration board created by decorator pillow-designer Sabrina Linn, featured on the Canadian House and Home website:

Inspiration Board Precedent

(I also recommend taking a look at her website. The bold use of color and pattern in the pillow collections is lovely, and each collection has a page dedicated to the inspiration that went into it, much like a mini inspiration board.)

The writer of this House and Home article perhaps said it best when describing the functionality of an inspiration board:

Someday soon you’ll find yourself burning the midnight oil and shackled to your (stylish) desk. When that moment comes, you’ll thank yourself for pinning up inspiration shots, magazine tears, birthday cards and vacation snaps. They’ll refresh and revive you and help inspire you to pen that magnum opus.

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