Creative Coder.
Nice to meet you.

How about you?
Let me guess.
You are a Recruiter.
You want me to build an Interactive Installation.
You need to develop a Website or Mobile App.
You want to know more about The Faces of Facebook.
You want to check all the content.
The Faces of Facebook
1.2 billion of Facebook profile pictures collected in a single web page.
Playing around with Facebook API, I found a bug that allowed me to access the profile pictures of all Facebook users, so I put them together in a simple interface and published it.
It became a worldwide sensation receiving 7M+ visits from all continents, broadcasted on TV programs, emitted on radio stations, published in printed newspapers and posted on more than 6,000 websites.

It was pretty overwhelming being interviewed all of a sudden by BBC India, LBC Lebanon and Middle East International TV, TN Argentina, German Radio Station MDR JUMP, Blu Radio Colombia, Radio Metro Argentina, El Pais Cali Newspaper, Semana Magazine, 20 minutes France, Spain, Switzerland and Mexico, AdvertisingAge, Creativity Online, CNET, Yahoo News, Google News, The Huffington Post Japan, MSN News, Wired, Mashable, The Verge, Gizmodo, BBC, CNN Tech, CNN Latino, DesignTaxi, and so on.
The homepage is a canvas of pixels that shows all the faces zoomed-out, organized in chronological order, from Mark Zuckerberg onward. Users can click on any pixel of the screen to zoom-in and get a 100x100px picture of that pixel and its surroundings, drag to navigate in any direction, and scroll down to zoom-out.
According to Facebook’s Legal Department, I shouldn't affirm that the order is chronological.
In zoom-in mode, users can click on any face to check that person's profile.
Sorry Mr. Sarode, it was a random pick and I hope you don’t mind.
Through the Pin button users optionally sign in via Facebook to pinpoint their picture on the page and see where they show up in relation to their friends.
I received thousands of emails. Most of them media requests, many congratulating, some weird ones, several job offers, paid project proposals, and few threatening.
I want to share these two.
Jan from Germany: just 1 word.
"Someday I would like to be like you". From Enzo, an Argentinian kid.
In the meantime, the project was all over the news, the website was inaccessible to thousands of visitors due to 2 annoying issues.
When the website reached 24K+ visits per second, the server collapsed for the 4th time in less than 5 days.
Hackers didn’t stop trying to hack the website. That is why I closed the project and stopped aggregating new profiles to the collage.
I learnt so many things from this project. Like this one: my name in Russian is Натали Рохас.
Type: Personal Project
Tasks: Creative Director + Designer + Front-end developer + Back-end developer
Technologies: HTML5 (canvas tag), Javascript, CSS, jQuery, EaselJS, Ajax, FB API, PHP and MySQL
Years: 2012, 2013
Out Of Home advertising display that attracts visitors and converts them into players of advergames. Upon entering Hamelin, users sees their silhouette integrated with the contents on the screen in front of them as a mirror. As they move, the silhouette moves.
Back in 2005 I co-founded Cuatic, a company specialized in Physical Interaction Installations. In 2008, supported by a €200K investment from risk capital, we created this product flagship product for the firm.

TV network La Sexta opened Hamelin to promote its program The Infernal Wall. Cuatic developed a game that recreated the contest program. The challenge of this game was to go across 10 walls, each one containing a different figure. Players must mimic the figure with their body and fit neatly into the figure of one of the wall, otherwise they lose and start again.
The Infernal Wall
Given the successful results, Hamelin was rented to other advertisers. For each advertiser we created a different advergame: interface, graphics, animations, copywriting, sound and vinyl.
Kandoo - Kids Wipes
This game was intended to reinforce the personal cleaning habits for kids. Children should explode the bubbles that contain elements related to the cleaning activity at the scene (the green ones) and avoid the red ones.
Raimat Wines
Visitors are asked to add instrumental notes to a base melody and compose a beautiful Christmas song. Each note is represented by a bunch of grapes placed on a pentagram and are added to the song by touching them.
Bones TV Program
Detectives have to reconstruct the skeleton by catching the missing bones and avoiding the ones already on the bed. It required special attention to the similar and small bones.
Alhambra Craft Beers
In a stand at skiing resort Sierra Nevada (Granada), the skier goes down the slope avoiding obstacles to reach the goal as fast as possible. Winners are rewarded with a warm gift.
We did several prototypes before building the final product.
First software prototype developed on proce55ing and Action Script.
Final software developed on openFrameworks and Action Script.
First hardware prototype, hello doll.
Second hardware prototype, at 1:1 scale AKA The Green Box.
Transporting and assembling Hamelin was a non-stop 24h odyssey.
Mounting the iron and steel pieces along with the methacrylate plates, transporting it with a toll, loading all the lights and electric system, setting the 9 screens and configuring them, gluing the vinyl, placing the computers, starting the software and adjusting the in-situ lighting parameters.
Cuatic won the Award of Best Entrepreneurial Project for Hamelin and its Business Plan at the 6th Contest of Banespyme-Orange organized by IE Business School Madrid, recognized as one of the leading business schools in the world that offers one of the most prestigious international MBA programs in the world.
Unfortunately the financial crisis hit Spain right before Cuatic signed the second round of financing.
Project: The Infernal Wall, Bones
Client: La Sexta TV Network
Agency: Bufete de Marketing

Project: Kandoo - Kids Wipes
Client: Procter & Gamble

Project: Alhambra Craft Beers
Client: Mahou-San Miguel
Agency: Comuniqar Consultores de Marketing
Project: Alhambra Craft Beers
Client: Government of Catalonia
Agency: GroupM

Project: Raimat Wines
Client: Codorniu

Type: Physical Interaction Installation
Tasks: Inventor + Creative Director + Developer + Producer
With: Cuatic
Years: 2008, 2009
Latino Emoji App
Keyboard App with a collection of 370+ Hispanic emoji stickers.
Developed by native Latino designers, these Emojis include insightful and original Faces, Sayings, Culture and Food to truly add the flamboyant Latino personality to text messages.
Zubi Advertising is a full-service Hispanic agency in the U.S. for whom I work closely with. After Apple’s effort to give their keyboard a Hispanic touch by adding a Mexican taco (that was not quite a taco), Zubi’s Executive Creative Director came up with this idea and requested me to develop an App with Hispanic Emojis divided by Countries.

I took the ball and ran. It was a great opportunity for me to lead the UX Design and learn Swift 2.
Case Study
Country section is the first thing the user sees when they open the App for the first time, shows the available countries, and allows users to change it.
Mexico is the one selected by default, as they have the highest Hispanic population in the US. Users can tap on any other country to find the Faces, Sayings, Culture and Food emojis for that country.

In version 1.0 some users were not able to find the way to change the country. Apparently they thought country pins were emojis (not buttons). To solve that, we changed the title of the section to “CHOOSE A COUNTRY TO SEE ITS EMOJIS”, and voilà. In version 1.1 this issue was solved. Version 1.2 included Holiday emojis for each country. Version 1.3 included emojis for 3 more countries.
We built a support website displaying simulated chats using the emojis. What could be more persuasive for people to download the App than seeing them used in real context?
If you are from Mexico, Argentina, Puerto Rico, Cuba, Colombia, Peru, Dominican Republic, El Salvador or Venezuela, you will realize how clever the emoji designers are.
Type: Mobile App
Tasks: iOS Developer + UX Designer + Front-end Developer
Technologies: Swift 2, HTML5, Javascript, CSS, jQuery
Year: 2015
Roca Gallery Barcelona
Roca, the world leader in bathroom spaces, opens in 2009 a high-tech emblematic building in Barcelona as a brand experiential concept: a flagship building. The interior is equipped with interactive audiovisuals and lighting technology that immerse the visitor into a water-related atmosphere.
The building is designed by the prestigious studio of Carlos Ferrater and represents the past, present and future of the company. LED light is the protagonist of the façade, which is composed of just one material: glass. The inside, the use of light, audiovisuals, interactive resources and expositive elements entice the visitor to a personal, unique and sensory building experience.

Cuatic actively contributed with the ideation, user experience, coding, animation and construction of the Interactive Tables, Rituals, and the Interactive Catalogue.
Case Study
Interactive Tables
We converted 10 single-paged PPTs into 10 big scale interactive tables, each one composed by 3 joined tactile screens. Each table had its subject and specific gamma of colors within the sea range. All the tables had similar navigation: circular menus and submenus behaving like waves when touched. The content itself was displayed in several templates designed for huge amounts of dynamic information related to the brand: History, Leadership, Designers, Innovation, Sustainability, Compromise, Water, Sensations, Cultures, and Visionary Concepts. Meanwhile, aquatic forms appeared on the corners of the screen as decorative elements.
It explores the conduct of the human being in the bathroom, in front of the mirror.We brush our teeth. We blow-dry our hair. We polish our outfit. We wear make-up. We take care of our body. We share moments with our partner. We look at our face and realize it reflects how we feel. Rituals are actions that help us to go through an emotional mode to a different one. Rituals make us feel good.

This interactive audiovisual reminds us the importance of those moments of intimacy in an 11m x 2m real life-size projection. The imaginary mirror that separates visitors from the protagonists on the screen is steamed up with a mist that flows naturally. Visitors can remove that mist just with their body movements.
Interactive Catalogue is a 3-axis system controlled by movement of the hand on the air, to navigate a catalogue of bathroom products.
This was the most difficult project I have ever faced. After it was approved we went through months of blood, toil, tears, and sweat. Under extreme weather conditions and uncomfortable still in construction building, day and night, fighting for delivering our commitment, on time.

We organized a grid of 6 by 9 proximity sensors pointing upwards to deduce where the hand was in the 3D area.
The logic worked out but the information received from the sensors created a very noisy spot instead of an accurate point. That roadblock appeared in a very early stage of the production process and it took us a while to reduce that noise to its>
Thanks to a talented team, we succeeded.
From the theory...
to the reality.
Type: Physical Interaction Installation
Client: Roca
Agency: Tiempo BBDO + Boolab
Project Director: Paul Freeth
Tasks: Creative Director + Developer + Co-producer
Technologies: Action Script, openFrameworks, OpenCV, mySQL, PHP
With: Cuatic
Year: 2009
Online platform to showcase and discover creative portfolios.
Heylos is a family startup based in Mumbai, India. They invited me to join them when the idea was just that, an idea. We first created the brand and then the website.
The word Heylos is the result of merging two words: Hello + Halo. A halo is a ring of light that surrounds a person as a visual definition of personality, character and mood. The logo is a merge between a ring + IM bubble.

Heylos is a brand devoted to energizing people’s creative Halo. A halo that always surrounds the artist and represents the creative level achieved according to a spectrum of colors where white represents the purity and perfect balance, and violet is the most amateur one. This level is calculated with an algorithm that ponders “likes”, “dislikes”, “views”, “favorites”, “comments” and “followers”.
The content is framed within a fractal-like container that adopts the device’s size and orientation. The visual aim was to not interfere with the pieces of art.
There are ways to make responsive websites escaping to the table-like layout.
Type: Online
Client: Heylos
Tasks: Creative Director + UX Designer + Producer
Technologies: HTML5, Javascript, CSS, jQuery, Backbone, MySQL, PHP
Year: 2014.
Volvo X-RAY
App to see through the car’s skin and discover its features. Volvos are designed to be intuitive. Uncluttered. Simple. As a result, a lot of the technology escapes the naked eye. This App turns iPhones and iPads into X-Ray scanners so users can see beneath its skin.
Users can walk around a Volvo and see a full 360° X-Ray view, with callouts to the patented World’s first Volvo innovations inside. It was launched at the Geneva Auto Show with huge success, and will be used in other Auto Shows around the world, as well as Volvo dealers.
Case Study
The App’s engine is an Augmented Reality software capable to recognize not only 1 (the usual) but 3 different AR markers at the same time and triangulates them.
The markers are strategically placed on the floor to position the X-Ray 3D model of the car in the exact position, angle and size of the real car. By diminishing the image of the real car and highlighting the X-Ray model, the magic happens.
The App also worked at the interior of the car when accommodated at the pilot’s seat.
Using the device’s compass to synchronize the model with the real car, users can point the device to any area of the car and will see it in X-Ray mode.
In both exterior and interior views, the 3D model had attached where the key features of the car are located. When tapped, they open catching short videos explaining that particular feature.
Park Assist
City Safety
We developed this project in a crazy time zone difference schedule with the collaboration of 7 different vendors all around the world: App (Munich and San Francisco), 3D model (Munich), 3D animations (Barcelona), Videos (Los Angeles), HTML content (Miami), Music and Sounds (Miami), UX (New York), and on top of the that, the client is in Gothenburg.
Type: Physical Interaction Installation & iPad + iPhone App
Client: Volvo
With: La Comunidad
Tasks: Creative Technologist + Co-producer
Technologies: Objective C
Year: 2012
Physical Interaction Gallery
Mobile Apps & Online Gallery
Creative Code Gallery
Conferences & Talks & Press
The end is always a new beginning.
I bet you want to check out some other content.
So, unless you scroll up and get out of the end, this website is automatically going to the beginning in: