Fluid Interfaces Logo
Identity project for the Fluid Interfaces Group @ MIT Media Lab
During my year-long visit to the Fluid Interfaces Group at the MIT Media Lab I have felt like home. The group members are amazing, not only for what research matters but also personaly. I wanted to show my appreciation to the group somehow. Since the group did not have a logo, and we were working on the redesing of the group's site, I decided to contribute by desiging a Logo
It was quite a challenge to design an image that expressed fluidity and technology without falling in the topical vision of liquids and watersplashes. It took a while to come with something interesting. Finally, when I was having breakfast one morning, I dropped some milk on the table.
After that I worked on developing the concept and explored different variations and possibilities. I created around 30 variations of the logo so that people in the group could choose the one they liked best. The winner was:
However, my favorite one was the one I put on top of this entry...
Sparks
Concept, Data Visualization and Organization
Project in collaboration with Kent Millard
The Sparks project was developed in the context of the course ‘Technologies for creative learning‘ by Mitchel Resnick. Over the course we discussed several topics on how people learn and how to create engaging learning experiences. For the final project I teamed with Kent Millard (MassArt master student). Our initial idea was to create an online community for people to share time-based media projects, obtain feedback and learn technical/creative skills. One of our focuses while designing the system was on how to get people inspired and active. We thought it was a key point to keep people engaged, and increase the quality and the quantity of shared pieces in the community.
Along our endless conceptualization meetings (which we both enjoyed a lot) we came with the idea of Sparks: a system to document inspiration and to relate work within the community database. Immediately we realized the depth of the idea and we decided to change our approach to explore this concept.
The idea for Sparks was to design a system that allowed creators (in any community) to reflect on their work and provide a context (influences, inspirations, homages, parodies) for it, i.e., the intention of their work; and to enable the community to express their perception of the work ("That reminds me of..."). By using the system for tagging other people's creations users would provide critical feedback on specific projects and generate a network of interwoven creative sources that could serve as inspirations for others.
As we see it, the Sparks system generates a triple-win situation. One, it allows its users to know the inspirational sources behind pieces they admire so that they are well informed and inspired. Two, from the creator point of view, it gives feedback on how people perceive the posted work and how the piece relates to other pieces. Three, by tracking all the connections made with Sparks the body of community-generated work can be informed to observe trends, customize content suggest interesting pieces to community members to keep them more engaged and active.
This project cought the eye of Brian Lucid, professor at MassArt during Kent's end-of-semester presentation and we both were invited to co-teach the ‘Design Studio 2‘ course during the spring semester. ‘Design Studio 2‘ was a graduate course that focused in visualizing relationships within information datasets.
GetLost!
Project in collaboration with Sean Follmer, Jinha Lee, Natan Linder and Edwina Portocarrero @ MIT Media Lab; Special thanks to Bonifaz Kaufmann
Within a context where mobile phones and other GPS-based devices can track our exact position and calculate the most efficient route to our destination, we wanted to give people the freedom to explore their environment freely; with their heads up.
GetLost! is a physical device resembling a compass where the user can determine the time they want to walk. The system will automatically generate a random path with the user specified duration that starts and finishes at the same point. The device will guide the user through this path.
The difference with the state of art guiding systems is that instead of voice advice or map located feedback all the indications are simplified to a single pointing device. This enables people to relax, knowing that they will return to the starting point within the time they selected, and enjoy the ride. As we see it, It can either be used as a meditation tool or as a random exploration tool.
SOMOS
Project in collaboration with Natan Linder @ MIT Media Lab | Fluid Interfaces Group, working with UROPs Sinchan Banerjee and Maksim Stepanenko
Cellular phones have been around for a while now, it is fair to say that they are our main one-to-one communication tool. Despite of the evolution this devices had experienced over time the basic interface for the address book remained the same. The SOMOS project is an attempt to redesign the contact application in mobile phones.
The main aim of the project is to optimize the amount of time that is used to find a specific contact in the address book app. By studding user habits, relationships between contacts and applying clusterization algorithms we believe that is possible to radically change the way we use our phone's contact book.
The way information is displayed on the screen is another of the challenges this project faces. Currently, an address book has between 250 entries to a 1000. Fitting all this information in a cell phone screen is complicated. I am specially focusing in this part of the project. My first attempt is the desing above where the contacts are displayed in a circular visualization inspired in old circular dial phones and groups are color clusters in the inner part of the circle.
SoundForms
Microsoft Surface, C#, Java, Processing and Chuck
Project in collaboration with Seth Hunter and Eric Rosenbaum @ MIT Media Lab | Fluid Interfaces Group
Soundforms are a series of experiments with the relationships between sound and shape. Seth and I shared a fascination towards adding a sound diminution to already familiar objects in our environment. On top of that, we both had been previously working on projects that explore collaborative interactions and we were profoundly interested in the possibilities that those experiences had in the learning and the creative processes.
The aim of Soundforms it to experiment different interfaces for musical creation through objects with a focus on establishing creative connections outside the interfaces; connections between participants.
From the technological point of view Soundforms is also an interesting projects. It is a conglomerate of different technologies: the system works over the Microsoft Surface, we adapted a C# module to extract the useful information from it and send it through the TUIO protocol to a Processing application that controls the visual and a Chuck patch that triggers the sound.
Multitouch Space Invaders XL
TBeta and ActioScript 3.0
Project by Multitouch Barcelona (Dani Armengol, Roger Pujol, Xavier Vilar and Pol Pla) @ OFFF Oeiras 09
The Multitouch Space Invaders XL installation was presented in the context of OFFF Oeiras 2009. It was an improved release for the Multitouch Space Invaders installation presented as part of the Guten Touch installation at the Red Bull Music Academy. the difference: It was BIGGER! We created a 6x4m multitouch screen for this installation.
Bigger not always means better. We had to work really hard to get it working smoothly. Despite our previous experience from the Multitouch Space Invaders installation the XL version was a challenge in many ways.
For starters, scaling the technology was hard. Since the screen size was four times bigger we needed to create a structure to support the screen and a platform for the calibration of the screen. Moreover the instead of having only one camera for the tracking we needed to add a new one and create a communication socket between the two computers processing images and the one that connected to the beamer.
From the interaction point of view, scaling the experience was also an interesting test. Within the context of the Red Bull Music Academy we had really few people interacting at the same time; from 1 to 20 people. OFFF Oeiras had more than 3,500 visitors that meant that the variation could be much bigger. We wanted to make the experience engaging and enjoyable independently of the amount of people playing, but at the same time we wanted to have as many people as possible playing.
Easy is boring, difficult is engaging, too dificult is discouraging; we needed to find the flow. But is to find the balance if you don't keep track of the people that is playing at one given moment. With that in mind we added a module of artificial intelligence to our system to be able to regulate the difficulty level of the game to the amount of people playing.
The results after three weeks of hard working and a final rush of four sleepless nights were worth it: 200 people playing together at the same time, cheering after spending nearly a minute chasing the last invader and finally killing it. Goosebumps and shiny eyes, one of the happiest moments in my life :)
HI, a Real Human Interface
Video
Project by Multitouch Barcelona (Dani Armengol, Roger Pujol, Xavier Vilar and Pol Pla), recorded at Hangar music by Lullatone
Have you ever thought that your computer is alive? That there is someone inside working for you? ‘Hi, a real human interface‘ is a metaphor for how interaction with technology should be. It was our attempt to create the perfect interface; one that really understood our deepest needs, a human interface indeed.
The Hi video was intended to be an self-portrait project. We wanted to be able to explain what we were doing in a plain way. We knew, though, that you are not always as you want to be; instead as people see you. With that idea in mind we created a video that reflected our vision about interaction design. Making technology warmer has always been the goal of our collective and we couldn‘st think of a better way to do it than by literally embedding a human being inside of it.
We posted the video in our website and we waited for our portrait to be created. The comments people left in response to the video conformed the best portrait we could have ever created; that is, in our opinion, the power of internet. Our video, like a chameleon, had different colors depending on the context it appeared and we got a lot of feedback on our work and thoughts from all kinds of publics.
See the video below and don’t forget to leave your comment!
Guten Touch
Project by Multitouch Barcelona (Dani Armengol, Roger Pujol, Xavier Vilar and Pol Pla) @ Red Bull Music Academy
The Red Bull Music Academy is a yearly event that travels the world being the vanguard of new sounds in the musical panorama. For a month they gather 60 young artists from all over the world in a city so that they can learn and create with one another and learn from guest consolidated musicians.
The 2008 edition of the academy took place in Barcelona. Multitouch Barcelona was commissioned to create an interactive piece for the relaxation space in the academy. The building was a beautiful old thread factory from the early twentieth century with huge spaces and a lot of potential for installations.
We created Guten Touch, a set of interactive experiences for a big multi-touch wall (3x2m). Our initial idea was to create an evolutive experience that showed the possibilities that new models of interaction such as multi-touch technologies added to creativity. By going from very simple experiences to more complex ones we wanted to "educate" our participants.
As it turned out, we were the ones that learned the greatest deal. Although people was attracted to the installation for its technical complexity, simple experiences only kept people interested for a short period whereas more complex experiences overcrowded the room.
By watching our audience interacting with the piece we got a lot of inspiration to improve our initial designs to seize each of the experiences. This constant iteration produced two of Multitouch Barcelona's most interesting pieces: the Natural Paint and the Multitouch Space Invaders.
The following video is a musical compilations of the experiences we designed for the Guten Touch installation.
Red Bull Music Academy Graphic & Interactive Design
Project in collaboration with the amazing team of the Red Bull Music Academy
One of the most challenging design jobs I have ever taken was to be the graphic and interactive designer for the Red Bull Music Academy. I was in charge of creating the graphic communication for the event as well as maintaining the website.
I created the press releases for the gigs, the flyers, the graphic ads, posters, and all sorts of inner print materials for the event. For the website I designed the banners and supervised the daily photo galleries.
The above picture shows some panels I designed for public concerts. The picture below shows the event guide that was published in the main newspapers and of the country.
Tangible Loops
Diploma Project (awarded with honors)
Tangible Loops was my diploma project for my undergraduate. It consisted on a tabletop tangible user interface for musical creation. It enabled users to associate sounds to physical tokens and alter playback properties by rotating them and moving them across the surface.
During my undergraduate degree I enjoyed learning programming and design notions but, somehow I was missing interaction design subjects that went further than the usability for GUI. I wanted to explore the possibilities other sorts of interaction had an thus I created a project that enabled me to show the importance of the field.
Since I did not have any experience on the field I had to conduct a rigorous research before start programming the final application. I needed it to be able to respond to user manipulation in real time, generating sounds that matched users expectations. In the process I worked with many different technologies producing a detailed analysis of pros and cons of each one that, in the end, I added in the project documentation.
The final working prototype was implemented connecting the reacTIVision vision module to a MAX/MSP patch that generated both the audio and the visual output.
Volkswagen BlueMotion Web Campaign
ActionScript 3.0, HTML, and CSS
Project @ Bryte
This project is a good example of the kind of work I developed during the two years I spent working for website design firms. I developed it while working at Bryte Digital Dialoges. For this specific project, I had complete control on the project: I handled the client interviewing, the design and conceptualization processes and, finally, I implemented the site.
It consisted in a webiste for the Bluemotion campaign that Volkswagen wanted to do in Spain. Volkswagen created the Bluemotion initiative with the intention of compensating the emissions of CO2 that their vehicles emitted.
The concept for the design was based in the beauty of nature and aimed to transmit a vision of equilibrium between technology and environment. It integrated beautiful images of forestal landscapes with the necessary web elements in a natural way. At the same time, though, the aesthetics followed the Volkswagen line of technological innovation and power.
This project shows the influence of previous experiences in my work. To create this naturality and flow in the web elements I used a set of sinusoidal-based mathematical functions that made the menu oscilate in irregular organic patterns. Previous projects experiments I did in flash help me to come out with good solutions for the challenges this project dictated.
ActionScript + Maths = Fun
Series of Experimental Projects
I love this projects. They are the reason why I started designing and programming. I found in ActionScript 2.0 a perfect tool for my personal expression. I used to spend hours and hours refining little applications I did just for fun.
I loved to integrate mathematical concepts to achieve interesting interactive designs. This two examples show the power that maths can add to visualization and interaction. The first one is an anti stress application that simulates a 3D effect of depth in explosions. The second one is a more elaborated 3D world that uses spherical coordinates to generate motion of particles within a spherical container.

