︎
︎








A Wonderful Workday


web

Collaborators: Yuanyuan Gong, Jingwei Gu
Technology: social media, zapier, google drive api, p5.js, web development
code on github

A wonderful visualization of a chain of cross-platform work
messages collected after another day of WFH.

Keywords: api, data visualization, chain of events, work from home


---imaginary (or not) background story---

Jensen loves to use Discord, he is the imaginery team leader for an imaginery team project.
He would like every team member to use Discord, too!
For every team meeting, he would have his google calendar
to send a message to our team channel on Discord to hover everyone here.

Iris agrees to use Discord for work.
But secretly, she likes Gmail more! The feeling of having an exploding inbox......

Shiny involuntarily uses Discord because of Jensen's request.
She prefers using Slack and having everything organized there.

how could this work out happily for everyone???
(to be continued below...)


Prompt: Rude Goldberg Machine

The concept of a Rude Goldberg machine is of a chain of events creating a result
from complicated yet accurate chains of connections and interactions.
In the creative-tech class at MFA Media Design Practices at ArtCenter, we were introduced to
ways of creating chains of events with technologies including but not limited to IoT, ifttt, and APIs.

It started with this picture in my head of a cocktail piano...

the triggering of events that involves something artistic

Our initial idea was to make a computer-piano, but at the same time we wanted to make more than just music.
Iris had another very beautiful imagination of this piano drawing paintings.

The Keypaint idea was to turn any key strokes into digital drawings that come along with sounds,
and after drawings are generated, users could then download that image for their own usages.
And I thought it would be great for a morning routine, like the first thing you do on your working computer in the morning!
Or a daily inspiration that you take in with a cup of nice hot coffee!
We all liked this idea of

making a ritual from work
that makes a day more beautiful


A feedback was that everything here could really be done in p5.js alone.
To really imagine a chain of events triggered on the user’s end, we started to picture what it would be like if this was for a group of people instead of an individual. How could we take this chance to produce something that connects people considering the current global pandemic?

Continuing the scene of a (possibly) beautiful day, we came up with a new project idea called A Wonderful Workday.

scenario: Another day of work-from-home has started, but everyone could instantly feel connected with the chains between different message platform. Never miss a meeting! The work messages of the day would be transformed into beautiful web paintings for the work team as a daily ritual, and an incentive to work hard and happy everyday. This is

a new bonding activity for people during WFH

and also a response to the explosion of numbers of platforms and messages we receive in a day.

We found Zapier a more versatile and convenient service to use than ifttt considering that the platforms we connected. We also found new tools and APIs to use. During the researching and testing process, we tweaked the idea of having web paintings to more general web collages. In that case, originally for paintings to be shown on the webpage, the data of messages collected would be transformed to visuals following certain logics; for collages, the data would be something that pre-sorted but directly shown on the webpage in collage with visuals that are interactive. The latter feels like users are having more control over the final visual, and it is always cool to see a playback of messages in a day.

This is the updated diagram of the chain of events.


(...story continued)
Each of us three has to respectively connect our own preferred platforms with Discord through Zapier and/or Google api.
In that way, we could be notified of and not miss any message on Discord, and get onto Discord only when necessary, for example, when having a team meeting.

Am I happy? Well, yes! I can minimize the softwares/apps open at the same time. I can stay on Slack and only have to hop onto Discord at designated times.

During team meetings on Discord, all the messages generated on Discord would be sent to my Slack as well for future references. (In that case, each of us could customize what types of messages to send, whether they're texts, links, or files.)

and because we are all creative souls, we would like to

put our work messages to creative use

something that makes our day even more wonderful!
wonderful way to end a work day, and connect all remote pals!

(view documentation video at the very top of the page)

The project overall is also perhaps of an ironic tone and approach. Usually people would prefer nothing from work after hitting a day, but because of COVID-19 situations, any form of human connections become more precious, and complicated as well. Much love and hate.

Distribution of Work:
Shiny: bone structures for production diagrams, data manipulation for fetched responses from google drive api, combine data with visualization, build website, debugging
Iris: google drive api (from discord to google drive, then test it on local website), debugging
Jensen: research visual references, revise visualization code, production for documentation video
all: brainstorm, diagram, software integrations, experiments, help each other <3

word sphere visual code revised from and courtesy to Che Yu Wu

You’re welcome to direct to my creative tech site for more detailed documentation.