Studio Claude — Side Project: Creating Animation for Hatching Chicks

Daily UI Challenge #031 File Upload

Cadence and Amelia, proprietors of Studio Claude, a flower and art shop located in Astoria and Finger Lakes, NY, are two friends who grew up together in Nashville, Tennessee. Cadence initially moved to New York to pursue songwriting before transitioning her career into digital design. Amelia has been painting every day since she was five, with flowers in the season being her favorite subject. Both are passionate about design, and seek out inspirations in nature and in urban areas alike.

Studio Claude doubles as a gathering point for artists who live in the area. It has a large presence in the up-and-coming community of those who have migrated from Brooklyn to Queens in pursuit of better space for lower rent.

In the recent years, urban farming has become a trend with Astoria residents, many of whom have backyard space to spare. Daniel, an urban farmer who recently completed an agricultural Ph.D program at UC- Santa Cruz, is one of these residents.

Daniel frequents Studio Claude for the communal atmosphere, and to meet others who are excited about the art of farming and all its possibilities. With his humorous attitude and eagerness to educate friends on the delights of urban farming, he was befriended quickly by the outgoing Cadence. Often times he invites her and other Studio Claude clients to visit his backyard, where he keeps a coop of 5 laying hens.

It is approaching autumn in New York and the last eggs of the year will soon hatch. To connect with other urban farmers in the area, Daniel has created a simple webpage where fellow chicken keepers are able to upload and share photos of their chickens. As he was building this webpage, he approached Cadence to help create the file upload animation.

Cadence’s creation: file upload screen.

In the background is a lo-fi representation of Daniel’s existing website. The blue indicates the main navigation bar; the red, images that users have uploaded; the grey, captions of the images. The top left red square with a + (upload) button is what users will use to add new images to the collection.

The animated overlay is Cadence’s creation. She wanted to incorporate Daniel’s playful personality and the overarching theme of hatching chicks into the file upload screen that would appear once users clicked on the + button and chose the image that they wanted to upload.

Because Daniel is the direct client, Cadence wanted to show him a quick med-fi animation of the file upload screen before refine her artwork. Principle was used to create this animation. In the next prototype, this screen would be presented as an infinite loop until file upload was completed.

Thanks for reading!