Check out this interactive website graphic I designed and developed.
About The Project
This project was for Nonprofit New York, and I found it through Catchafire.org, a skill-based volunteer matching site. The posting said it was for Branded Digital Assets, but during my phone interview, they explained that they wanted an interactive graphic that was clickable. I had never done something like this before, but I volunteered for the challenge!
The Prompt
The team sent a rough sketch to use as a framework while designing the image. The guidance was to design the inside of a house with at least 5 rooms that could represent each topic.
First Iteration
My first design was a more traditional layout. When I shared this initial design with the team, they felt it may seem to represent a certain standard of living that may not resonate with their community. They asked for a more "Frankenstein" style graphic, where the rooms didn't necessarily look like they belonged in the same house. A basement was also requested to be representative of discovery.
Second Iteration
In my second iteration, I added some more culturally diverse rooms and the requested basement with boxes and a boiler. They also wanted to somehow represent continued growth, so I added some ladders to resemble this. The team liked the feel of these rooms much more, especially the ladders in a couple of rooms. They requested I add some structures that could resemble going back down, like a "Chutes and Ladders" feel.
Third Iteration
I let my creativity run a bit more wild in this iteration by adding some slides to the outside of the house. At this point the team started getting more excited. The last bit of feedback was to make the structure of the rooms less boxy and more creative architecturally.
Final Design
Once I fully understood what feelings the team wanted to evoke with the image as well as how they envisioned the structure, I got to an end product that the whole team loved. It took many iterations and clarity on my part, but in the end I was happy to have been able to work on a visual graphic where I could let my creativity explode and create an end product the team was excited about. Now that the design was finalized, the next step was the technical part, making the graphic clickable on their site.
Development in WordPress
When it came to making the images clickable in WordPress, I had to do some research to find the best solution. I came upon the Draw Attention tool which seemed to be exactly what the team was looking for. I showed the team a demo of the tool and they loved it. I made each room clickable according to their specifications and finalized the interactive graphic on their website.
