An empathetic button
Blog
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.