Build Your Own Virtual Magic 8 Ball

When the Out Of Office email doesn’t cut it

Published
July 20, 2017
Reading Time
2 minutes

As the notorious Nicole S. Kahn—a strong figure in IDEO San Francisco’s Design for Change (D4C) studio—was departing for maternity leave, we were scrambling to figure out what to do during her absence. How would we live without her advice and counsel for four months? To compensate, we decided to build a virtual surrogate to keep her voice in our heads while she was away. The solution: a magic 8-ball-esque webpage to answer the eternal query: “What would NSK say?” Nicole is a maternal figure in the Design For Change studio, so there was no question what the URL should be: www.d4c.mom.

There were time constraints on the build, so we had to move fast. After Nicole sent her official maternity notification email to the studio, my colleague Mat Chow promptly followed up to source notable quotes, words of wisdom, and NSKisms from the studio. The results were overwhelming. We began aggregating the responses and coding a quick interactive webpage to host all the knowledge bombs.

The webpage itself is a simple build of a few files: one HTML for content and clickable interaction, a CSS file for styling, and an image file as the background. The aggregated quotes are placed into a string and a jQuery script that calls a new quote from the string at random with each click of the button. Conceptually, we wanted the user experience to be seamless, the button prominent, and the quote loud. The webpage is built with a few “media queries” in CSS to respond to different screen sizes and browser types. It’s 2017, so if it ain’t responsive it ain’t a website.

Many thanks to Mat Chow for aggregating all the quotes and acquiring the domain, as well as the Design For Change studio for showing love per the usual and offering critical design feedback along the way.

Want to build your own quote generator? All the files are downloadable here.