This is an excerpt from a larger design exercise I did for Google in 2014 entitled "Find a Garment". The name I gave to my imaginary app is StreetFind. Full design exercise here.

In these wireframes, I'm telling the story of a user who sees an item of clothing on the street, snaps a picture, and uses the proposed garment-finding app to buy this item.

The assumptions are as follows:

• User has reasonably easy access to a picture of the garment;
• There is an image search engine (such as Google Image Search) that can talk to this app (API);
• Garments are indexed and it's possible to match an image to a retailer's SKU.

Assuming all of the above statements are true, our ideal experience would go something like this:

1) User sees the product in the real world;
2) User snaps a picture with their phone;
3) User searches using their picture as query;
4) User gets relevant results;
5) User is redirected to the retailer's website to make purchase.

While the side-by-side wireframes alone can tell a story, people unfamiliar with taking and editing pictures on a mobile device may not know which gestures to use to proceed. In addition to wireframes I also included numbered annotations with more details on which gestures are needed.

Wireframes plus annotations are more accurately called a specification document. This document should convey clear user interactions in a language that engineers can understand. This will be the blueprint from which the app is written/coded.

These are simple wireframes drawn from scratch describing the top navigation structure of the current HBO website (July 2015). I used Illustrator to draw the basic containers, shapes and UI elements. I took also some screenshots of the site to illustrate how the navigation is structured.

This project is an exercise and is in no way part of any official HBO design.

I recreated parts of the Instagram from scratch as a wire framing exercise. This is an example of the specification documents handed off to visual designers and engineers in which you describe the desired interactions of the product, step by step.

Some icons are simple illustrator shapes, some are from freely available icon libraries. Images came directly from Instagram.

This a design exercise in which I suggest improvements to the current ZocDoc iOS app. Screenshots are from November 10, 2014.

ZocDoc is a popular app that helps you manage health-related appointments. In this exercise, I picked a few screens from their Settings section and suggested small UX/UI improvements. Little things, such as eliminating web-like interactions or updating the visual style (this app uses pre-iOS7 styling) makes an app look more professional and less dated. People tend to place more trust in well-designed apps, which is important for an app like ZocDoc whose business depends on trust and reliability.

Something amazing happened last week. Foursquare separated into two apps, Foursquare and Swarm. This is super interesting because Swarm is not a spinoff; actually, it more closely resembles the very first iteration of Foursquare, Dodgeball.

The idea behind Dodgeball (and 4sq 1.0) was to create a space for you to hang out with your friends. This is kinda what Swarm is trying to do, to get you to organize around geographic locations with people who might be nearby.

The new standalone Foursquare app is now the aggregate data from all its users. Kind of like a Yelp that sucks a little less and has a layer of social curation because your friend's comments will always be highlighted when you tap on a venue.

I like the new Swarm App! It's really clean and playful, and conserves most of the Foursquare aesthetic. Something that I don't like (or I'm still getting used to) is that the standalone new Foursquare will automatically launch you into the Swarm app without a one-tap option to return. Maybe they can fix that in 2.0!
Snapchat is a small and relatively easy to use app: you take a picture, edit it, and send it to friends. Nevertheless, the architecture is kinda tricky. There are three main screens (purple), and only from these can the user navigate to the secondary screens (aqua).

Some of the screen contents are very similar, such as Send To and Friends. They are differentiated only by the actions the user can take within each screen.

Pool It is the name of my ITP thesis. It's a service that makes advance group purchases among friends simple and fun. Pool it is my attempt to solve what I think is a very common but largely unaddressed ignored problem: buying something with friends and then not being paid back can be really, really awkward.

Let's say that you want to buy a special birthday cake for a friend. The cake is from a well-known bakery that your friend loves. You think this would be a nice birthday surprise but, sadly, the cake costs over a hundred dollars, which is a bit our of your reach. You really want to make this happen, so you ask your mutual friends to chip in.

In strict economic terms, the most difficult person to convince is also the first person to say yes. If you're going to make this cake happen, you need at least one other person willing to split the cake fifty-fifty; in the case of this particular cake, that amounts to about 50 dollars. Chances are you'll find that person easily, but chances also are that you might not. Once you do, finding the third person will be a lot easier because the cost per person has dropped drastically (from 100 dollars, to 50, to 33), and will continue to get easier as more friends jump on the bandwagon. When the cost of the thing you are trying to buy is fixed, the more people participate means a lower barrier to entry, which in turn motivates more people to participate, etc.

This may all sound really obvious, yet there are no good, real-life ways to kick these pools into motion. Think about it this: let's say you managed to enlist 9 friends to chip in equal parts for the bakery cake. After taxes, the cake comes out to $108. Each person is happy to dish out 12 bucks to help the cause, but when are you going to find the time to meet with 8 different people and collect 12 bucks from them? If both of you have to drive, or take the subway, or meet during your lunch hour, the idea of getting this cake all of a sudden starts becoming a little to difficult.

Yet some people, which I like to refer to as "power organizers", will go through tremendous effort to make events like these happen all around us, all the time. They like doing stuff like this and, as a power organizer myself, I think it's because we see the greater social benefit that comes from buying the cake. There is a sense of accomplishment, of social identity that is magnified greatly when people do things together.

So I asked myself, wouldn't it be nice if there was some tool out there that leveraged social media, the internet and online payments to make this happen just a little bit easier? And that's how Pool It was born.

The user experience is focused entirely on empowering the organizer and making the decision process as straightforward as possible. Organizers create a "pool", designate a price, and designate a minimum number of participants for the pool to kick in. Then they send an invitation to their friends, explaining the conditions of the pool and asking them to join. If, for example, we wanted to use Pool It to buy our friend's cake, I would send an email invitation explaining that I (we) want to buy a special $108 dollar cake and that, if 9 of us chip in, we can get it for $12 each.

People who accept must create a Pool It account and link a payment form for this account. When the minimum number of people accept, the pool kicks in and everyone gets charged the same amount automatically. If more people buy into the pool, the early adopters get some money back. The money is deposited directly into the organizers account, and now he or she can go buy the cake. Et voila!

Pool It is currently still under development. If you have more questions or want to collaborate, feel free to contact me.

A very common UX interview question involves re-designing an existing website. Earlier this year I was asked to re-imagine Craiglist with advertisements and minimal disruption to the existing experience. For the purposes of this exercise, I focused on the "for sale" section, for no other reason that I think it's the largest chunk of Craigslist traffic.

I thought about all the times I have used Craigslist and asked my friends about their experiences. Invariably, the number one reason why people use Craigslist is because it's popular, convenient, and free to use. Let's unpackage those three concepts a little bit. What do I mean by popular? Well, that there is only one Craigslist. When it comes to online classifieds, no immediate competitors come to mind easily. It's widespread popularity (ubiquity) also makes it convenient; since everyone is on it, you know that it'll be the first place anyone will be looking. Finally, the fact that it's completely free is what has gives Craigslist its absolute advantage. If you're someone looking into used stuff, I think it's fair to assume that you are also probably unwilling to pay a fee to buy or sell things. You choose to use Craigslist over eBay because you don't have to pay to post, nor do you have to worry about being harassed with upselling stategies because there is only one basic post type (text and images). This of course leads to other problems, such as overposting, spam, and hidden keywords to maximize results across similar posts, but ultimately Craigslist thrives because it's free.

A final, absolute advantage that Craigslist has over its competitors is geographic proximity of buyers and sellers. Craigslist is organized by cities and neighborhoods for a reason: buying and selling used stuff quickly requires being close to someone. The further away you are, the more complicated the logistics become. This is yet another reason why someone might choose Craigslist over Amazon or Ebay: to avoid shipping costs and delays.

So, if you're Craigslist, how do you create revenue and preserve your competitive advantage? Below are a few strategies for subtle advertisement strategies that are related to the content of the post. They include cross-posting of buyers, sellers and movers and a very unobtrusive advertising strategy that matches the existing text-heavy, no-CSS aesthetic.

Pixelated Mirror and Ocean: Interactive Video Installations at the Museum of Sex, New York City

Currently on display at the Museum of Sex are two pieces done in collaboration with interactive video artist Kevin Bleich. They are part of the exhibit Universe of Desire, an exploration of sex and anonymity inspired by neuroscientists Ogi Ogas and Sai Gaddam, authors of the best-selling book "A Billion Wicked Thoughts". They gathered and coded 400 million internet searches, 55 million of which (or roughly 13 percent) proved to be searches for some kind of erotic content. Their findings, which analyzed the internet habits of tens of millions of people worldwide, are a fascinating amalgamation of the personal and the anonymous.

The pieces, Pixelated Mirror and Ocean, are interactive video sculptures exploring the loss of inhibition and sense of anonymity allowed by pixelation. As daily content becomes increasingly high-resolution and pixelation becomes a thing of the past, people's right to privacy and anonymity are eroding. Pixelation is now a thing of nostalgia, a remnant of a dial-up connection past. Pixelated Mirror an Ocean are installations through which the audience member can see themselves reflected as low-res, blocky-as-hell, pixelated images, ironically rendered through state of the art video and projection technology.

Pixelated Mirror uses a Microsoft Kinect IR sensor to capture the audience members and projects their image onto a screen as rotating, 3D panels. The Kinect is hidden below the 6' by 4' projector screen, capturing the audiences' features at an angle, which gives the projected images greater depth. A very slight lag is built into the Processing code (the language used to transform the video feed) giving the pixelated reflection a the ghostly appearance reminiscent of a slow internet connection. This image is being projected simultaneously on a wall on the other side of the gallery in the video installation Ocean. In Ocean, the subject is also made up of pixels, but not as a flat, mirror-like rendering, but as a 3D figure emerging from an ocean of photographs. The line of sight is interrupted between both exhibits, so the participants of Pixelated Mirror are unaware that they are also the protagonists of Ocean, nicely tying into the liberating feeling of anonymity provided by pixelation.

Pixelated Mirror was inspired by artist Danny Rozin's Wooden Mirror, currently on display at the lobby of NYU's Interactive Telecommunications Program. This interactive installation is a mechanical mirror made up of hundreds of small wooden panels that rotate to and from a light. It was under restoration during the summer and fall of 2011, but the empty frame that usually held continued to haunt the lobby. Kevin and I made a rendition of his wooden mirror by projecting a digital copy of it's mechanical properties onto the empty frame itself. This piece was created for the 2011 ITP Winter Show, and looked so much like the wooden mirror that we managed to fool more than a few alumni. It was during the show that the curators of Universe of Desire, Emilie Baltz and Mark Snyder, asked us to recreate the piece exclusively for MoSex, and commissioned the accompanying piece, Ocean.

Universe of Desire is on display from February 8, 2012 to September 2013 at the Museum of Sex located at 233 Fifth Avenue in New York City. This exhibit was curated by Emilie Baltz and Mark Snyder.

Big Screens: Interactive Video Installation at IAC, Vimeo Headquarters

Piñatas was an interactive video installation done in collaboration with Nelson Ramón, created exclusively for the giant video screen in the lobby of Vimeo HQ. It was part of the ITP Big Screens show, which happened on Friday, December 4, 2011 at the IAC. The idea was simple: the audience could whack the piñata until it exploded and revealed its contents. There were 9 different piñatas, each with a different theme and inside were "goodies" corresponding to that team. Each piñata had its own personality, and the combination of the piñatas appearance plus the objects inside were meant to convey different messages. The piñata/goodie combination was different and purposefully contradictory every time. It was our intention to let the audience draw their own conclusions about the relationships between the piñatas and the objects.

The interactive component of piñatas was that the audience had to "whack" them in real life. We gave the audience glowsticks at the beginning of the presentation, and left the stage without giving them any further instructions. Instantaneously, people started using the glowsticks to whack at the air above them, as if they were hitting the piñata. Meanwhile, we were tracking the brightness of the glowsticks from the back of the lobby with a camera. The more vigorously people shook their glowsticks, the greater the brightness captured by our camera; this determined the force with which the piñata swung on the screen and the quantity of objects that flew out.

The 120 foot-long video installation ran on Processing in Eclipse. The glowstick feedback from the camera triggered a function in our program that flung the piñatas goodies away from the center of the screen and filled up the entire space. We used the box 2D physics library inside Processing to simulate objects with different properties flying, falling and bouncing on the floor. The result was a chaotic amalgamation of giant piñata goodies piling up over 120 feet of video screen.

In preparation for Maker Faire 2011, I decided to rebuild the circus project from scratch. I’d originally envisioned a round ring, a cleaner look, and more movement. I redesigned the mechanisms and decided to keep them as simple as possible: two rotating gears and two racks and pinions. I chose to do this because the beauty of these mechanisms is that they are very simple, and the opportunity for creativity is to make the simple back-and-forth motion interesting by adding characters and a storyline. This iteration of the project took about two weeks to build, from start to finish. For this project, my friend Luis Daniel (now also an ITP student!) collaborated in the entire fabrication process and some of the electronics. The vector files are open source SVGs minimally altered for the ITP laser cutter.

To illustrate this point, let’s talk about the tiger. In this circus reborn, which I am calling “Miniature Motorized Mechanical Circus”, the number of circus acts (mechanisms) has been reduced from five to four: an elephant, a tightrope walker, a group of dancers, and a tiger jumping through a hoop. The tiger mechanism is very, very simple: a rack and pinion pushes the tiger back and forth, but the addition of a hoop makes the movement a simple story. Suddenly the tiger isn’t just moving forward and backwards, but jumping through the hoop and then returning to its original place. The elephant mechanisms is just a rotating arm on a motor, but the addition of an elephant at the end of the arm creates the illusion that the elephant is “walking”.

I wrote all the Arduino code based on Tom Igoe’s examples and using his stepper library. Each circus animal is mounted on a stepper motor powered by Arduino. Since the Arduino can't move the motors and listen for input at the same time, I had to use one Arduino for each motor. Each circus animal is also connected to a roller switch that, when pressed, moves the motor back and forth 200 steps, thus animating the circus act.

Here is a video of the circus in action:

Miniature Motorized Mechanical Circus from Gabriela Gutierrez on Vimeo.

The circus won an Editor's Choice award Maker Faire 2011. It was on display at the Arduino Tent on Sept 17 and 18, 2011 at NYC Maker Faire hosted by the New York Hall of Science.

Mailboxes: they are everywhere, we pass them everyday. They are such a familiar part of the urban landscape that we rarely notice them. Perhaps it’s because our interactions with mailboxes are so passive and limited: open lid, drop package, close lid. They are especially designed so we can’t see or reach what people drop inside. They are mysterious boxes, full of secrets.

Departing from this idea that mailboxes are tragically underexplored physical spaces, Yonatan Ben-Simhon and I built a life-sized interactive mailbox for the ITP Winter Show. It’s two projects rolled into one: the first project is the giant mailbox itself, which we made for our class Materials and Building Strategies; the second project is the content of the mailbox, which Yoni has created for the class Designing Conversational Spaces.

The mailbox is intended to be a gallery space for Yoni’s content. Audience members could explore more than a hundred individual pieces of mail art including letters, puzzles, thermochromic ink postcards and strange packages.

The first picture in the slideshow above is a tiny foam core prototype of the mailbox. It's about 5 inches tall; the real one will be about 5 feet tall and made with wood and sheet metal.

Our building strategy is to use the same blueprint of the foam prototype and cut a life-sized version out of plywood using a CNC router. Using our laser-cutter blueprint, Yoni converted the Illustrator file into dxl format to use in Mastercam. This means that we can now cut our mailbox parts knowing that they match up perfectly.

Once the pieces were cut, we began putting together the mailbox with big clamps and lots of wood screws. We started by assembling the sides, clamping together a box, and then adding screws every three inches. The curved top of the mailbox is a metal sheet that was cut down to size with an electric metal shear tool, then nailed down to the curved wood. Finally, we painted the brightest USPS blue we could find. Et voila! A giant mailbox.

An interactive feature we added for the show was a mail station. People were encouraged to make a postcard and drop it in the mailbox. As part of the exhibit, we wanted to inspire people to use the mail system as a tool for art, not only a vehicle for content. We provided different tools for people to get creative, such as UV markers, thermochromic ink, scissors and glue and told people we would mail anything they wanted. It was a huge success; we had about 200 pieces of mail we sent out after the show.
I began with an idea for a mechanical diorama/musical instrument. I imagined an ocean scene, with four little stuffed animal rats rowing a boat under the moonlight. I originally wanted four traditionally mechanical motions to be my inputs: two cranks and two pedals. I imagined that these would control the rowing motion of each of the 4 main characters. In my mind, users would have to coordinate both theirs hands and feet to animate the scene.

My first challenge was, naturally, mechanical. Not being an engineer or even particularly good at physics, I focused on overcoming what to me was going to be the most challenging part of the project, the actual mechanism to move the ocean waves. I drew inspiration from turn of the century theater, where illusions and magic played an important part in the story. Before spending any time or energy laser-cutting a prototype, I used an Erector set and the shop tools to test a simple, hot-glued/rubberbanded-together plywood crankshaft. It worked! It was really clunky, and ugly, but as a proof of concept, it sufficed.

The next step was to create a circuit. I had to learn how to use stepper motors in less than a week. As it turns out, having four different inputs and outputs is difficult logic to write in Arduino because the supporting motor libraries can't read and write at the same time. Furthermore, while the crankshaft was a great solution for the waves, I hand't yet thought about the rowing mechanism for the rats. Only three weeks until the show! At this moment I had to make the difficult decision of foregoing my original one input per output plan and focus on the gestalt. Was it more important to know there were many different inputs and outputs, or to provide a pleasant and delightful experience for audience members? I chose the latter.

I went back to the drawing board with the mechanism, not focusing on any one part in particular, but on the whole diorama. The crankshaft suddenly became a logical point of interaction, to I added a big handle to one end and a tiny roller switch to the other. Voila! My mechanism was now my only input, and I could focus on the content of the scene.

I wanted to create the illusion that the entire thing was mechanical, even only the waves were actually mechanical and the rest of the scene would be controlled with Arduino. I used a lot of construction paper, glitter and glue to convey a low-tech look and feel. My circuit included 12 twinkling LED stars and two servo motors, one for the swaying moon and one for the rat. Yes, one rat; his other friends were too heavy for my little servo, so one rat had to do.

In the end, the cranking motion simultaneously moved the waves and triggered a roller switch connected to the Arduino, which activated the swaying moon, twinkling stars, and soft music. The scene was alive with light, music and color. It's still my favorite project from my time at ITP :)

Music Box 1 from Gabriela Gutierrez on Vimeo.

Rufus the Rat

The Late Show with David Letterman features a segment entitled “Stupid Pet Tricks” in which people bring their pets to show off a neat or odd trick that they’ve taught them, such as this dog playing dead. My own physical computing “stupid pet trick” is called Rufus the Rat. Using an Arduino and the tricks we’ve learned so far in Physical Computing, I’ve taught Rufus how to be friendly: if you press his paw, his nose will light up and he’ll wag his tail at you.

The main components inside Rufus are a force-sensing resistor, a breadboard, my Arduino, a small servo motor, and a 9V battery. Following this week’s analog output lab, I built a circuit that reads analog input from the resistor and gives digital output instructions to the servo motor and the LED (to rotate and light up, respectively). Here is a diagram of the circuit drawn with Fritzing:

Wiring Rufus was more complicated than I expected because I had to make the entire circuitry work inside his pre-existing IKEA anatomy. The force-sensing resistor is in his paw; the LED is right above his nose; and the servo motor is connected to his tail. I had to solder 4 and 6 inches of wire to the resistor and the LED, respectively, to reach his paw and his nose. As shown above, all the wires are connected to the breadboard, which in turn is connected to the Arduino; the whole thing is powered by a 9V battery.

In order to hide the circuit inside Rufus, I had to carefully cut the stitching on his belly, remove about half of the stuffing, and insert the board super carefully to prevent the wiring from coming undone. In order to make Rufus more reusable, I decided to close him up with velcro instead of sewing him back together. I’m inspired to keep using him, perhaps even getting more rodent friends, for future PComp projects.

Without further ado, meet Rufus! This movie is a documentation assignment for Comm Lab. It was edited in Premiere and the Music is “Knick Knack” by Bobby McFerrin.

Wiring Rufus from Gabriela Gutierrez on Vimeo.