Curing Kids Cancer holds an annual fire truck pull to raise awareness and fund research to cure pediatric cancers. However, with a global pandemic wreaking havoc, they needed a way to continue the tradition without putting people's lives in jeopardy.
Unfortunately, COVID-19 has cast a dark cloud over this year. Many families have lost loved ones, and the ordinary rhythm of life has vanished. One event on the cusp of cancellation this year was a fun and entertaining event hosted by Curing Kids Cancer. A fire truck pull engages the entire community and does so much good for children who have cancer and their families. It's so important to keep this tradition alive, so CKC came to us with an idea of hosting a virtual fire truck pull this year.
Our Creative Director led this project. Since I specialize in web design for our team, I was tasked to develop an engaging design that would depict teams competing against each other pulling fire trucks. Not a simple task because I had no idea what I was going to do.
There wasn't much time to really do much research on this project. It had to be done by the end of the month, and we were already several days within the month. The Creative Director and I had a concept that the fire truck pull would emulate an arcade type feel. So I spent time looking through the typography of old arcade games and video games of my childhood. We liked the pixelated feel of those old games and wanted to implement that feel.
My idea for the fire truck pull was to make sure it would be something that could be interactive on mobile and desktop. Coming up with a vertical layout for the pull gave the appropriate amount of space needed. On a desktop, all the information on who had donated, how much, the team, and who they were pulling for was all there at once, but on mobile, the focus would be on the fire truck pull. It would be too much and impossible to display all of that information at once on such a tiny screen, so button indicators were included where the user could view more information about each team.
In this step, we fulfilled the concept of an arcadey feel by finding appropriate typography and third party illustrations that we manipulated to fit the concept. The gradient typography was something I remembered from games like Street Fighter II.
We wanted donating on mobile to be a bit more obvious, so I added an actual donate button instead of just text that said the team's name.
We worked with our team of developers to make this thing a reality. A lot of questions came up that we had to answer:
What happens when a donation is added?
A "score" pops up next to the fire truck illustration.
How do we display who is in the lead?
Have one fire truck slightly ahead of the other and move to equal position in the middle of the screen when tied.
How do we show the background moving?
Incorporate a gif that loops.
What happens in the end?
A finish line is crossed and all animation stops.
How do we show who's leading in the leaderboard and matchup pages?
A fire symbol is displayed next to the team in the lead.
The event was a success. The client was thrilled and thankful for all of our work on this project. Our development team was ready the weekend of the event and responded to any issues right away. I couldn't be happier with the results and the hard work of our team.
Wireframing and Prototyping