Posted by Rachel Ginsberg on

This article is part of a series of Design Retrospectives on the prototypes commissioned by Cooper Hewitt’s Interaction Lab as part of Activating Smithsonian Open Access. It was written by Zander Brimijoin, Creative Director and Partner at Red Paper Heart. Experience the Art Clock through your web browser, and help source times of your own!

The Concept

We were particularly excited about the challenge to create a compelling experience using the vast Smithsonian Open Access catalog because of the combination of quality and depth of imagery and information. As we considered how to make use of it, we started by coming up with unusual ways to experience a catalog—to feel it on an emotional level. We talked about ideas like having users journey through pure color, make mashups combining two items together, wear the items or be the items somehow, or even make shadow puppets that would match to objects in the database.  

A shifting image of red, black, blue, yellow and white patterns in an amorphous multi-layered star shape that appears to be deepest at the center.

Early concept prototype combining multiple open access objects in shifting kaleidoscopic color fields

A variety of floral and geometric patterns in shades of beige, blue, pink, and black that are shifting symmetrically, while a black information panel appears to the right to show the different objects that make up the patterns.

Early concept prototype combining fragments of open access images with object details off to the side

Then, after spending time with the collection, something about it brought up a memory I had from college.

In an art history course, a friend of mine taught me a memory mnemonic where you stare at an artwork until you can imagine the date in the forms. For example, if you are trying to memorize that a painting of dancers is from 1942, you might imagine that their body positions look almost like a four and a two. Then, when you are asked to write the date on the exam, these numbers just seem to pop out at you from the image, and if you are like me, your grade goes way up. More than just improving my grades, I found that the process of imagining something within these artworks unlocked a special connection to them, so that later when I’d see them in museums, it felt like reconnecting with an old friend.

Finding letters and numbers in the dancers’ body shapes

When our designer Jiwon Ham shared the idea of a clock that would show an object or piece of art every second, I thought of those numbers in the paintings in my head. I realized we could use the same idea to create the clock. Instead of showing an arbitrary collection image every second, we could show a specific piece of art or object whose visual forms looked like the current time. 

A rectangular gif that shows circular pieces of shifting images on a black background. White text to the right of the image reads as follows from top to bottom:

Prototype concept that rotated through images every second

The Design

After we identified our concept, the first thing we did was develop models for different kinds of clocks: an analog clock where you would see the clock hands within each collection image, a digital clock that would form the numbers from a collage of multiple images at once, and an analog clock that would match angles within the images to the clock hands. We presented all of them to the ASOA challenge as our overall concept, and we very happily received the funding to develop one of them into a working prototype.

This image depicts an abstracted version of a digital clock with a red metal lamp on the left side that loosely resembles an

Digital clock prototype that finds number shapes in images

Gif that shows four somewhat abstract numbers shifting from 02:57 to 02:58, the shapes of which are constructed from a collage of multiple images.

Digital clock prototype that creates number shapes with image collages

This image contains six circular images in two rows of three on a beige background, each picturing an object or fragment of a piece of art. Superimposed on each circular image is an abstracted clock hand connecting two dots, one at the center of the image and the other corresponding to a point in the image that highlights a natural angle.

Analog clock prototype that identifies clock hands in shape

Animated gif of a circular prototype of the Art Clock inside a square black frame. There is one stationary clock hand pointing to 12, while the second hand rotates around the clock face. As the second hand moves, the background image of the clock shifts to a new image that contains an angle aligning with the moving second hand.

Animated analog clock prototype showing relationship between clock hands and open access images

We then had to decide which of our ideas to pursue. Both the digital and analog clock concepts were quite lovely, but when forced to choose between them, we liked how expressive the analog clocks were in concert with the images. Rather than using the images to make up the shapes of numbers, as the digital displays did, the analog clock hands could integrate themselves into body positions, or angles, or objects, lending you another way to see the clock forms and the images alike.

With that decided, we set out to design our prototype. Much of the process was about getting out of the way of the art and objects. We had to keep scaling back the clock part of the design in order to let the images themselves be the clock. In that spirit, we decided to place the minute hand on the edge of the design, letting the minute hand in the art take center stage. That way, the design actually succeeds or fails as a clock based on how well the images match the clock forms.

A color blocked image of an analog clock face inside of a black rectangle. The face is divided into segments by red lines indicating increments of time. There are two literal clock hands and an abstracted third hand emanating from the center. The third hand corresponds to a white dot on the periphery of the clock face.

Exploring designs for the clock face

A small segment of a design exploration for an analog clock face showing red lines to segment the time, a white dot, and a yellow arch shape to indicate the distance between two segments spaced across the image.

Detail of clock face design exploration

We also needed a design that was going to be quite flexible, so the clock could live on a phone, a monitor, or even a watch. So, we took our original circular design and expanded it to fill wider canvases, where circles would push outward. We designed the face to have a liquid look, with a fluid notch that changes curves as it moves around the clock. 

The finished Art Clock displayed on a horizontal tablet sitting on a light wood shelf with books to the right and a Christmas cactus to the left. The Art Clock shows a close cropped etching of a medieval figure with the minute hand pointed to their chin (at 30 past the hour) and the hour hand a 1pm, corresponding to the angle of the figure's eyes.

The finished Art Clock displayed on a tablet

Close up shot of the finished Art Clock depicting an etching of two cherubs embracing that shows the time 2:30, with hour and minute hands aligned with angles in the etching.

Detail of the finished Art Clock

As we refined the design, we kept removing lines and shapes that covered the art. In our final design, the black shell falls away and becomes a frame for the image that it presents.

The Prototype

The single biggest piece of this project was figuring out a process for gathering the images for the clock. We decided the best approach would be to have users go through the catalog themselves and identify matches with clock angles, then submit them to our database. We therefore needed a method for identifying clock hands within the piece or art or object, submitting the matches, and establishing guidelines to distinguish between good and bad matches. We knew that we would have to explain this process either to a computer or to a user, so it couldn’t be too complicated or restrictive. 

Animated gif showing a photo of a stylized metal teapot being positioned and repositioned inside an abstracted analog clock face to align the center and minute hand with the spout.

Prototype concept for crowd sourcing time selection

The first method of image tagging we came up with was to invite the user to draw the minute hand on an image, which would then automatically scale the clock. But in practice we found that this was not user-friendly, because once you drew your line on the image it was quite confusing to go back and change anything if the results didn’t turn out right.

Square gif depicting round analog clock face with a black frame. The background image of the clock is a boot lying on its side, while the boot image and hour and minute hands superimposed on top are being reoriented to reflect the angles found in the image.

Prototype concept for crowd sourcing time selection

So, we arrived at a more familiar Playskool-clock-meets-Instagram interface, where you drag the clock hands around the clock face to match the angles to the image, and then shift the placement of the image for proper cropping inside the clock face.

This image shows the process of turning a single image into a time. At the center is an oval shaped photo of a brown boot lying on its side surrounded by a black background. Superimposed on top of the boot are clock hands and orange arrows meant to indicate how the user can manipulate the image to identify the time that the image's angles correspond to. On the upper left hand side, text reads

Iterating on crowd sourcing tool

We were happy with that method, but of course it’s one thing to design a tool for internal use, and another thing to make it understandable and usable to others. It takes a number of iterations, adding guides and removing steps.

We were really fortunate that Cooper Hewitt was invested in making these prototypes accessible to everyone, including users of assistive technology. We worked through a number of scenarios, such as allowing mouseless interactions and setting up the right tags for screen readers. The changes we made to accommodate these specific groups ultimately made the design and code clearer for all. Another major benefit of Cooper Hewitt’s support was the opportunity to do user testing, which we rarely get access to, and which showed us that we needed to be less cute and way more plain and direct in our design.

A black rectangular gif that shows an animated analog clock shifting through abstract colors and shapes as the hands spin. Then the image shifts again into depicting an image of a cut crystal bottle on its side. In the upper left hand corner text reads,

An image of the Art Clock at 4:04 depicting an etching of multiple figures in front of what appears to be a church altar. In the top third of the image is text in white that reads

A visual pun for 4:04pm

We also enjoyed lavishing time on designing loading screens, tool tips, and extra details with care. For instance, even though almost no one will see this visual pun, the “404: file not found” page displays the time 4:04 p.m. 

The Result

The result of this project will ultimately depend a lot on what imagery users find and tag. It will take some time to see it develop, but I’ve been pleasantly surprised so far.

A black and grey illustration from what looks like a book or newspaper page of a man with his sleeves rolled up, holding a scythe, cutting grass. He's wearing a dark hat and dark trousers. There is another figure doing similar work in the background.

I have strong opinions about what makes a good image choice for this clock and what makes a bad one. My favorite images are ones that work equally well as art and as clock hands, such as a painting or object with rich detail, with a composition that flows entirely along two strong angles. If it’s too spare, it’s boring to look at. If it’s too complicated, it doesn’t tell the time. I also like a minute hand that is long but ends right before the edge of the clock and an hour hand that is short. My least favorite image results are ones made by someone mindlessly or dutifully just aligning the hands to any angle they can find in a picture, instead of finding the main angle and working from there. 

But my opinions are not the only ones that matter. We have designed the user experience of the clock not only to encourage the results we want, but to allow users to challenge our assumptions of what “good” means. 

Two images of the Art Clock face in a horizontal line. On the left, at 10:30 is a painting of five brown birds on a green background. One of the birds is standing on a wooden surface leaning over three smaller birds with foliage and flowers off to the right. The image on the right shows a drawing of a stylized antique projector with the clock hands aligned to the top and bottom of the light beam emanating from the projector. It shows the time as 9:40.

How people find angles in images is subjective

This crowdsourcing aspect is important, because it reduces the personal biases of our team and allows the results to be more about how the general public sees the angles in art, instead of how we see angles in art. This more robust angle information might even be valuable for other projects in the future. The most interesting results come when we aren’t in control. We get to see what people perceive as an angle. Is it a look, is it the middle of an object or the edge?  Why are particular angles less common and others more?  

And of course, we are already seeing patterns emerge in the images people have chosen.  

Three horizontal Art Clock images, each depicting a person or people gesturing with their hands towards the time indicated. On the far left is an etching of a male figure with his hand uplifted to the top right. The center is an etching of a baby on a man's back, with the baby's hand uplifted to the top right. The third is a painting of a torso in a waistcoat from shoulders to thighs, with the right hand pointing to the lower left.

We noticed right away that people tag a lot of, well, people. Clock hands are just an abstraction of arms and hands anyway, so it seems natural for people to choose and tag images portraying arms and hands more than any others. These images also read really well as times, because body positions demand your attention more than the position of a tree limb or the slope of a mountain.

A horizontal block of two images, each containing multiple versions of the same image. To the left, five versions of a bronze sculpture of a human figure, with clock hands and times aligned in each image in more or less the same way. To the right, four versions of a painting of two birds, with many different angles and times identified among them.

People seem to agree on angles found in human bodies more than other kinds of images

People tend to agree more about human body positions and are more likely to disagree about other imagery. 

Where these patterns get really interesting is when you see certain moods, objects, or subjects cluster around certain times. Different times are different angles, and thus they have different compositional and emotional feelings to them. And you start to see how these feelings emerge around particular times of day.

Three images in a horizontal row depicting times close to the top of their respective hours. From left, a black and white photograph of a white man holding a rifle in the crook of his arm leaning against a pillar, an etching of a muscular white horse against a medieval backdrop with a weapon jutting out to the top right, and a painting of a man leaning over and playing a violin.

At the beginnings of hours, you get a lot of items being proudly held up—weapons, flags, musical instruments—giving them a high-energy feeling.

Three horizontal Art Clock images with background images of figures supported by canes, each showing the time 7:25. The first is a watercolor image of a male figure on a cream background. He has fair skin, blond hair and beard and blue trim on his cape. The middle image is a brush pen painting of a figure from behind wearing a black robe, stooped over and supported by a cane. The image on the right is a painting of a man in an orange waistcoat, hand on hip, on an emerald green background.

In contrast, in the middle of the hour you get elements of support—legs, canes, hunched figures—signifying low energy.

Four images of the Art Clock face depicting the time 3:45 or so. Clockwise from the top left, there is an image of a middle aged white man with a mustache, a drawing of a child with slightly droopy blue eyes, another white man with a mustache less groomed than the first, and a nude figure of a woman in repose.

My favorite time so far is 8:18, what I’ve been calling mustache time. Its droopy symmetrical shape tends to make for interesting results.    

Three images inside the black art clock frame showing the times 10:07 and 10:08. Inside the frame, the images depict the following clockwise from top left, a drawing of a Victorian era woman with her arms crossed in front of her torso, an machine in nickel and brass with two accordion like sections to the top left and right corners, and a section of a stitched patch with two flags crossing each other, and the word

I also like the crisscrossed and outstretched shapes that 10:07 brings.    

A black and white image of a ballerina in a full skirt and toe shoes, bordered by the black art clock frame. Towards the bottom of the image, white text reads

There is still so much left to find, of course. Since Art Clock launched, users have found over 600 of the images needed to fill in every minute of the day. However, that leaves about a hundred still undiscovered to date.  

A round chart in the shape of a clock face showing which minutes in the eight o'clock hour have had images found (in black) and how many, and which have not (in red). Most finds are at 8:18 and most minutes that have not been found range from 25 after the hour to 55 after the hour.

A chart that show missing and found times for the 8 o’clock hour.

So, try your hand at finding those pesky last ones. They mostly consist of slightly off angles, such as 1:33, which has two hands that are just off the 45 and 90 degree angle. My guess is that when a photographer or painter has an angle that is just a hair off kilter they can’t help but correct it, which means you see it less often in art. Anything pointing left, such as the minute hand between 4:41 to 4:45, is also less common, possibly a right-handed bias. Certain angles might just be very rare in art, and taggers also may not look for them, as they are not memorable clock positions.

Your participation in generating time matches is the most important part of the project. With a large body of users scouring the collection for these times, people discover artworks they wouldn’t normally and end up making a connection to them. In the process, I hope you think about why certain objects are always photographed at the same angles, why painters position figures in certain ways, and whether certain angles create emotion. You might even find a new piece of art you love.

And if you find the very last missing time, I’ll buy you a drink.

About the Author

Zander Brimijoin is Creative Director and Co Founder of Red Paper Heart, an award-winning interactive art studio in Brooklyn. For the last 10 years, he has overseen creative on 132 installations in 46 cities for HBO, Sonos, Ford, and Google, at venues like Madison Square Garden, MOMI, SXSW, the White House, an abandoned train station, and a bedroom closet. Zander likes to combine art, technology, and bears in order to make people run, swing, and find unexpected joy in life.
Red Paper Heart is an award winning art studio specializing in interactive experiences that inspire joy and wonder.  The team is composed of designers, creative coders, animators, producers, engineers and developers collaborating to create bold work that explores the possibilities of experiential art and design.

About Activating Smithsonian Open Access (ASOA)

Created by Cooper Hewitt’s Interaction Lab and made possible by Verizon 5G Labs, Activating Smithsonian Open Access fosters a new approach to activating museum collections by expanding access to deep engagement for people of many abilities and interests worldwide, and supporting creative technology teams in the process. Each team received $10,000 to build a functioning prototype of a new digital interaction that enables play and discovery with 2D and 3D digitized assets from the Smithsonian’s Open Access collections and will retain ownership of all intellectual property developed from the program.

About Cooper Hewitt’s Interaction Lab

The Interaction Lab is an embedded R&D program driving the reimagining of Cooper Hewitt’s audience experience, across digital, physical, and human interactions. Since its Fall 2019 launch, the Lab has injected new ideas into the museum’s work through internal workshopping and strategy, a highly participatory public program series merging interactive design and museum practice, and a commissioning program that engages the design community as creative collaborators in creating the next wave of the Cooper Hewitt experience.

Leave a reply

Your email address will not be published. Required fields are marked *