An empathetic button

2021-01-26 / 3 min read
Last updated: 2024-06-07


Click here to open the live project in a new tab

Click here to open the source code in a new tab

Video demo

The beginning

Our professor made us do a bunch of activities in pairs. The goal was to get us to know each other but, we had no idea what we were in for.

The activities themselves seemed to be related to course content. "Come up with a design goal based on what you learned about your partner". So I was just following the instructions.

And right when class was about to end our first project was announced.

"Make a button using JavaScript"

I was lost, what button? What does that have to do with anything? I could hear the questions in our Zoom call going, "so… it's a button right?"

I thought it was dumb, how hard could it be to make a button, just do <button>?

My initial thoughts were to just have a button that when clicked would display my colleague's info. Until it struck me one day, the guy likes street photography right?

So let's personify his hobby as a webpage.

Initial idea

Let's have a button at the center, tempt the user to click on it (as there is nothing else to do).

A web browser frame with a button in the middle

Then let's transition the whole page to show a city intersection from top-down.

Top down view of a street intersection

Or just show a lively street video.

Children playing football in the streets

I was happy with my first iteration, but before I could start developing I had to make space to publish the project, configure my blog, and so developing this got postponed.

Luckily, sometime after I got a second inspiration for this. Instead of having a regular dumb button, let's make the camera the button!

This was a big eureka moment.

All of a sudden the button became exciting. Some of the ideas were to plaster the webcam shot into the background… Scratch that one

So now that all the pieces fell together I found something concrete to settle on.

The power of iteration

Through having empathy for my partner and the power of iteration, I was able to get to a point where a button was not just merely a simple click-action thingy, but hopefully, it conveyed a certain truth about my partner.

Final design looks different but you can view the live project here.

P.S. Unfeasible ideas

Some more advanced versions I came up with but had neither the time or technical expertise for it:

A list of predetermined cities are on the left. When you click on it, the content will update based on the city selected

Search a place and Google Maps API will fetch that place. The button on the right allows you to take a picture.