Spring 2011

17
May

My final project used enticing and vibrant color as a means to start chipping away at our country’s childhood obesity epidemic. My goal was to create a visually stimulating toy/play experience that would allow children to “accidentally” learn some things about nutrition while they competed agains their own past scores or their friends.

The toy/game consists of a shallow box that contains a number of game pieces, each of which has a vibrant photo of a healthy food on it, and a point value on the back that would ultimately be derived from a thorough analysis of their nutritional value. (In later iterations I would also introduce a small number of unhealthy foods with negative point values.) The objective is to assemble the meal that they think will get the highest point value! (There is even a dry erase scoreboard included on the lid to keep score.) There are six different “compartments” or “slots” for the pieces to go in, sized so that the child has to include on item from each food group in their final meal, and a collection of extra pieces in a hidden compartment under the main board.

My hope is that with repeated playing of this type of game, children would become familiar with healthy foods and be more likely to eat or request them in real life. When you spend so much time looking at beautiful photography of saturated vitamin-rich foods, for many people frieds foods would start to look less and less appetizing—and while I realize this is less likely to happen with kids, I believe that there is something to be said for our instinctual attraction to brightly colored (read: nutritionally valuable) fruits and vegetables that was developed over thousands of years. Marketing is certainly a tough beast to go up against, but this type of activity could only help, not hurt, the situation.

In addition, the game would work in some ways like a game of Memory, where the child would start to remember the point values associated with each type of food, which would hopefully stay with them later in life. Giving kids a sense of what food is good or bad for them at a young age in a positive way could be highly valuable by allowing them to wield some knowledge on nutrition without burdening them with worries about calories and fat—burdening children with the concept of “dieting” at a young age can be dangerous for some, potentially leading to the beginnings of bad lifelong relationships with food.

Images of the final/current prototype can be viewed below:

Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!Know Your Lunch!

Category : Color as Language | Spring 2011 | Blog
17
May

The Project [+Inspiration].

It is no secret that our mood can influence what we want to see at the movie theater. Nor is it news that the overall state of the economy, through its direct impact on the lives of each one of us, can have a significant impact on our mood. So mathematically it would follow that the economic state of the nation would have some impact on the movies we watch, especially when we consider movies by genre. This documented relationship (there have been more than a couple studies on the topic) was the inspiration for this project—it is designed to allow you to see the relative popularity of each genre (based on the top 20 movies of each year to ensure that we are sampling movies that were actually popular with users) while simultaneously seeing the changing economic conditions over time.

The visualization is currently live at lizrutledge.com/boxoffice-economics for anyone interested in interacting with it first-hand! There is also a screen capture showing the visualization’s functionalities below.

Technology/Implementation

The visualization is built using a whole group of web languages, making use of a MySQL database, PHP to pull and parse the data, JSON to translate the PHP into javascript, and Processing.js to take these new js variables and visualize them dynamically. I also made use of a jQuery slider from a tutorial site that I heavily customized (in both appearance and functionality) to suit my rather specific needs. All text in the legends are clickable active html, overlaid on top of the canvas area in which the Processing sketch is running. This allowed for much easier and more fluid interactions by enabling me to simply use javascript onclick attributes to change variables without requiring any sort of click detection within the sketch or page refresh to acquire new PHP data.

Initial Concept Prototypes.

1. GDP Line Graph with Move Pop-Outs

This was my first full sketch on the concept, using a completely different strategy. This implementation would have focused more on the GDP data and simply scattered movie pop-outs along the length of the graph.

The [Box Office] Economics of Emotions | Original Concept Sketch

2. GDP Line Graph with Move Pop-Outs | Higher Fidelity

Once I got this into Illustrator, it ended up not looking like I had wanted to (imagine this picture with confetti all over it), so I decided to change course in order to emphasize the genre popularity more than the GDP information. (It may be richer data, but at the end of the day people are more interest in movies that they have an emotional connection with than the GDP from 1972.)

The [Box Office] Economics of Emotions | Second Concept Iteration

3. Area Graphs of Each Genre Over Time

This was an attempt to clean up the overall aesthetic and tackle the issue of displaying 12 different genres’ respective popularities over the same axis. While this type of area chart was not the answer, I was happy with the concept of focusing largely on the genres so continued to move in this general vein.

The [Box Office] Economics of Emotions | Third Concept Iteration

Final Concept: The First Iteration.

In this version of the visualization, I decided to move to bar charts that change dynamically over time instead of trying to tackle the issue of 12 different area graphics of varying magnitudes on the same axis. To interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010—the bar charts will automatically resize to the new year’s data.

Below the bar chart on the right side, the top four movies of that year are dynamically shown, along with their genre for comparison.

In addition, there was a GDP graph below the slider (in a sort of spark line approach) to show the viewer what the economic conditions were for that year relative to a larger timespan. When moving across the time axis, increases in the GDP graph are denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn. Likewise, a red segment of a genre’s historical box office revenues would indicate a decrease in revenues from the last period, making it easier to notice the ups and downs.) While I was very happy with the animation of this part of the visualization, it felt very segregated from the rest of the data and needed to be further integrated.

The [Box Office] Economics of Emotions | First Iteration

Final Concept: The Current Iteration.

In this most recent iteration, I wanted to integrate the GDP chart more closely into the composition, so moved it behind the bar charts instead of down below the slider as it was placed in the last iteration. In addition, I added the functionality of detail views that let you see the relative popularity of each genre over time.

Just as before, to interact with the visualization and see these relationships for yourself, you can move the slider left and right to view the composition of box office revenues separated by genre from 1948 to 2010. In this new iteration, however, you can also click on one of the genres to see a more detailed historical visualization of the genre over time.

When moving across the time axis, increases in time-based line graphs are still denoted by the marker turning blue—drops in the data are denoted by the marker turning red. (So for example, when the ball that glides along the GDP chart turns red, that indicates a period of economic downturn.) By including this same functionality on the detail views of each genre as well, however, you can now watch the relationship between the GDP marker and the genre markers and begin to see the direct and inverse relationships that emerge from the data.

The Main/Home Screen (View All Genres for Each Year)

The [Box Office] Economics of Emotions

The Detail View (View One Genre Over Time)

The [Box Office] Economics of Emotions | Detail View

Future Considerations.

Going forward, I have a handful of plans for this visualization. I have some APIs lined up (which never made it to the “editing table” due to time constraints) that would allow me to display cover art from top movies for each year, as well as link from the top four movies of each year to reviews (NYTimes is the obvious candidate but something like Rotten Tomatoes could be another option). With more time I would also like to develop a non-cluttered way to show the movie(s) responsible for each peak in the historical graph just by clicking on the point, and change the detail view’s “Top 4 Movies” to be the top four movies of that particular genre until you go back to the main view. And as with any design, there are a million little things that I would tweak to increase the level of polish.

These changes are only a few of the things I would love to do to refine this further and increase the functionality and strength of message—I hope to have more time over the summer to keep working on it. (So many changes, so little time!) I’m really happy with the improvements made in between the last iteration and the current one, and look forward to seeing what else I can improve upon with a much less limited schedule.

Category : Data Visualization | Spring 2011 | Blog
10
May

Presenting the full Iris+Olivia collection was a lot of fun, and provided some very valuable feedback. It was also exciting to finally get to display all the pieces in one place, and to see how people reacted to all aspects of the line—branding, craftsmanship, concept and presentation alike.

The inspiration for this collection was my own curiosity about the interplay of technology and self-identity, and the resulting exploration of the interplay between identity, self-expression and technology was well-received. I also received good feedback on the concurrent focus on the idea of duality—between form and function, technology and fashion, hard and soft, and so on—adding an interesting dynamic to the collection.

Based on the feedback I received, I would love to continue to develop the brand to find ways to balance the identities of the extreme characters with the concept of unifying similar types of pieces across the two personas. It would be highly beneficial to have a way to group and identify items both by the character/line they’re under and their physical characteristics—for example, a piece could be in the Iris collection but also in a subgroup that spans both Iris and Olivia dedicated to bracelets with flash drives for clasps. I also want convert the mockups into an actual website to get these designs out in the world—I think it would be a great addition to the technology and fashion landscape, and would love to see how people outside of the department react to the pieces I created.

You can find the presentation slides and images of the display board below.

The Display Board.

Iris+Olivia Collection Display Board

Iris+Olivia Collection Display Board

Iris+Olivia Collection Display Board

To see the full evolution of this project, feel free to check out the entire Iris+Olivia category. And to read the paper I’ll be submitting to the International Symposium on Wearable Computers click here!

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
2
May

I’ve settled on a homepage for the proposed Iris+Olivia website, picture below. I’ll be designing detail pages for all the pieces as well, but wanted to post an update on the homepage now that the photography is my own and the duality is reflected more as I had intended.

Can’t wait to get the rest of the pages together, I’m really enjoying how this is coming together to form a plausible brand/collection.

Iris+Olivia Home Page Mockup

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
30
Apr

Since the branding is such an important part of this project, I’ve been working on getting a website mock-up put together. Here’s where I’m currently thinking for the homepage, using sample images pulled from the interwebs until I have a chance to have a photo shoot for the finished pieces. It misses the duality of the brand right now due to the images, but I think that once I get my own photos and play up the color differences it should be must clearer.

Iris+Olivia Home Page Mock-Up

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
26
Apr

Too busy again to talk too much about these new prototypes, but wanted to give a sneak peek at a couple of the pieces that I’m working on. The first item that shows stitching is the construction process of a bib necklace that’s in the works. The front of the necklace is full of hand-positioned silk rosettes and trim; the back will be microfiber cloth to clean your laptop screen (or glasses for that matter). The bracelet will simply have a USB drive as the clasp as part of that theme of pieces, but is constructed of studded trim cut into designs and fastened in place.

It’s looking like a good day for Iris!

The Bib Necklace.

Jewelry Prototype
Jewelry Prototype

The Bracelet.

Jewelry Prototype

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
20
Apr

After several weeks wrestling with the branding identity of my jewelry line, I have finally settled on Iris+Olivia. The pieces I have been developing for the Collection Formerly Known as Geek Couture had started diverging in aesthetic, so I wanted to create a space where pieces that are aesthetically very different could still feel part of a unified identity. The solution I arrived after having many conversations with friends and classmates (special thanks to Liza and Nathan in particular!) was to give the brand a dual-identity through creating two extreme characters. One would be the tough, chain-loving girl I’d originally envisioned as my key target audience, and the other would prefer much softer, more colorful pieces—both, however, would still unified by their love of and need for both tech accessories and the ability to express themselves through their fashion choices. Each side will have similar pieces, executed with very different materials and personalities, in order to show that this idea can translate to any aesthetic. (I felt it would make it easier to imagine the type of pieces I’m creating being used in any type of middle-ground style when it can be worked seamlessly into an ultra-feminine style as well as a super-tough and edgy style.)

To support this idea of contrasting/opposite characters, I wanted to find a way to express this opposition in the name itself, and wrestled with that for a while as well. Metaphors like angels and demons seemed too obvious and dramatic, and while a Dr. Jekyll and Mr. Hyde approach sounded fun, it didn’t fit the spirit of the collection to date. The turning point was a suggestion from my #1 advisor Liza to do something involving the ultimate digital nod to polar opposites: I/O. (For non-tech nerds, I/O stands for input/output, the fundamental relationship that drives all technology.) And thus Iris+Olivia was born, with Iris being the edgier, “sharper” of the two (both linguistically and aesthetically) and Olivia being the softer of the two (again both aesthetically and linguistically).

A few versions of the logo are below—I tried to make a relationship between the names (especially the I and the O) while giving them each a distinct personality through typographical treatment. I can’t wait to get going on the next batch of pieces now that I have the identities of their wearers so much clearer in my mind!

Logo Options

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
18
Apr

Don’t have much time to wax and wane on these ones, but wanted to put some images up of the most recent prototypes. These two are both working with the idea of the flash drive as a clasp replacement, giving the flash drive two functions (mass storage and essential component of the jewelry).

Pictures and description of both are below!

The Charm Bracelet.

This chain bracelet is riffing on the idea of a charm bracelet (like Italian charm bracelets) where the links can be added, removed, traded, and so on to create a bracelet or piece of jewelry of any length. At one link it fits as a double-finger ring—with more it becomes a bracelet, a wrap bracelet, and eventually a necklace. The interesting part of this design lies greatly in this idea of swapping data amongst friends, creating an all-new way for friends to interact. In an interesting way it melds together the tradition of making mix tapes/cds with fashion, an interaction that really tickles and intrigues me.

Jewelry Prototype

Jewelry Prototype

Jewelry Prototype

Jewelry Prototype

The Wrap Bracelet.

This red bracelet is a simple implementation where the flash drive is simply taking the place of the clasp of a wrap bracelet.

Jewelry Prototype

Jewelry Prototype

Jewelry Prototype

Jewelry Prototype

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog
8
Apr

The Assignment.

For this assignment, we were tasked with creating a data visualization that uses two potentially unrelated APIs to create one cohesive “mashup” visualization. Chris Piuggi and I teamed up to make something out of the Facebook API and NYTimes Best Sellers API, but after some initial research quickly changed to the NYTimes Movie Reviews API in order to access information that would be more relevant in the context of a social network service.

The Concept.

We began to develop the idea of a Facebook Movie Recommendation Service (FMRS) that would primarily make use of the Facebook API to pull information about your favorite movies as well as those of your friends to create a sort of visual Pandora for movies. This interaction provided users a path to discover similarities between friends and movies, and begin to discover new titles they might enjoy. The envisionined application seeks to provide recommendations based on friends rather than individual preferences to show a wealth of options, as well as prompt discover between the user and data. The hope would be to grow this into a full fledged system in which users could recommend movies and find ratings, based on their friends, as well as their preferences. Integration of Netflix API could potentially create this dynamic interchange between the user and the data.

Movie Visualization Mockup

Movie Visualization Mockup

Movie Visualization Mockup

Movie Visualization Mockup

The Implementation.

As we started to work on the visualization, it became apparent that the Facebook API is a beast. We tried to grapple with several different APIs within the Facebook API structure, spending some time working with the FQL (Facebook Query Language) API only to find out that it was not going to meet our needs given our familiarity with the API’s unique quirks in the given amount of time. We then decided to use the graph API (a REST API) to access data about you and your friends and could get data reliably from our own friends, but only if we manually went into the system and extracted an authentication token every ten minutes when it expired. Wanting to make this a realistic app, we decided to tackle some javascript in order to allow the user to log in to their Facebook account on the same page and get authentication that way (since we clearly wouldn’t have users playing in the code itself).

This is where things got sticky. In order to use these login authentication features, we needed to use javascript, a language in which neither of us have much experience. We made a lot of progress and got to a point where we had data from several different sources ready to be called, but could never get all of the languages to talk to each other. The complications of passing variables between PHP, javascript and Processing.js turned out to be very tricky, and got the best of us on this go around, but with more time we hope to be able to get all of the components coexisting happily in the future.

Aside from the data being accessed but not passable between languages at our point of progress, we also created a Processing sketch that we included in a web page to perform the actual visualization. In the sketch, the user would click the wheel or hit a key to move the “carousel” either forward or backward in order to see each of their friend’s movie preferences. A video of the interaction can be viewed below.

Future Considerations.

In the future it would be great to get all the variables talking to each other and really get this visualization off the ground. We think that it would provide a unique and useful service to Facebook users once we integrate the separate movie information and reviews and got the visuals working exactly as we would like them, and hope to see a more developed version in the future now that we’ve been able to learn a little bit more about all the web language interactions going on behind the scenes.

Category : Data Visualization | Spring 2011 | Blog
7
Apr

The group feedback session on Tuesday was really helpful for this project—my classmates were able to see my prototypes in person and had a lot of helpful advice. They gave me ideas and thoughts on potential pieces, and the direction they see it going—Nick was especially excited about pieces that incorporate old technological geek-fad artifacts (like the Casio Calculator Watch) into jewelry—and helped me refine my concept.

I had originally been thinking about this project as a way to carve out a space for women that are interested in the technology/geek/hacker culture, but am increasingly realizing that it is both not quite what I’m trying to do and also could bring in a lot of gender issues that have less to do with my project. Instead, we decided that the concept should deal more with simply providing people with a way to express their personal style through their electronic accessories instead of having to conform to the current state of “gadget” design. While not quite as “deep” as a more gender-leaning position might have been, it is much truer to the inspiration for the project and still completely relevant to many people.

An additional conversation with my mom (who holds a PhD in media psychology) helped refine the concept further. We came to the conclusion that it could actually do more than just give them a way to combine tech and style, and actually somewhat address the issues surrounding the digital divide. Having technology integrated seamlessly into parts of life that we are already familiar with and have positive feelings about reframes technology as a friendlier experience. Depending on the pieces I’m able to generate, it could actually work towards normalizing technology by turning a personal object into a piece of technology, blurring the lines between reality and technology.

Category : Final Project: Iris+Olivia | Major Studio: Interactivity | Spring 2011 | Blog