FizzBuzz
A 48-hr Design* Sprint
*and Programming
While looking for a personal project to challenge myself and learn new skills, I decided on a two-day design (and programming) sprint to create a game for iOS. At the time, the games I found myself playing on the phone most often were quick games that didn’t require much investment in time or effort. Working professionally at the time on D2C or B2B apps that were centered around productivity, I enjoyed the idea of working on a game as a delightful pursuit.
Although I would have loved to work on the project on a team or as part of a hackathon, none presented themselves to me and I decided to go it alone.
Role
Lead UI/UX & Product Designer
Tools
• Sketch • Adobe After Effects • Adobe Illustrator • SwiftUI
Client
Personal Project
Date
2018
The Challenge — Constraints Breed Creativity
I had recently completed KCRW’s Radio Race and was excited about the idea of creative sprints. There’s something equally fun, challenging, and frustrating about trying to complete something of quality in a limited amount of time with limited resources.
After some thinking, I decided to make the game Fizzbuzz. I loved playing it in school when the stars seemed to align and the math teacher needed something to fill our time. I also couldn't find a version of it on the app store, making it a perfect candidate. Fizzbuzz is a math game in which you say "fizz" if a number is divisible by 3 and "buzz" if a number is divisible by 5. There are different variations, but that's the general idea.
Brainstorming
I was captivated by the painting Ambassadeurs: Aristide Bruant by Henri de Toulouse-Lautrec and used it as the jumping off point for the visuals in the app.
This established the color palette in tandem with the look and feel of the app. There wasn’t much that connected a math counting game with the painting other than the fact that I liked the aesthetic and felt it would lend itself well to the game.
Implementation
After the initial mockup, it was clear I had to get going because there wasn’t time to do the usual flow charts, testing, or research.
*insert furious smashing of the computer*
The first iteration included buttons with lettering inside them. After creating the vectors in Illustrator and placing them as buttons on the phone, it was clear that it was way too busy and the limited screen real estate wouldn’t account for the space needed.
I decided instead to create thinner versions that would trace themselves when the buttons were pushed, giving the user visual feedback and providing a bit of visual delight.
Lost and Found in the Details
One of my favorite parts of design is creating little details that delight and inspire. They are often pushed aside as major features take precedence, but they can do a lot to enhance the overall user experience. While the best design might be unnoticed design, the design that sticks with you surprises and sparks something extra.
I aimed to add as many small details to the app as I could. One of the most exciting parts was developing a start button that would create a random blob on every change.
I continued to add small motion elements that would help enhance the overall design, such as an animated mute button and a slow gradient background that would fade to indicate your time left to answer.
Learning Time Management
As the person responsible for both programming and designing the game, development took up a huge amount of the challenge time. I learned a lot about design and working at speed, but most of all, I learned about managing expectations and time. I entered into the challenge expecting to be able to complete untold numbers of details. In the end, I was lucky just to have a finished app. I realized how important it was to find time to finish the small details that made the app something special as those were the elements most recognized in the end by the players. I’m glad to have completed the challenge and would do it again in a heartbeat.
Finishing Up
Although the time was up, I did spend a couple more days completing the programming of the app. I also created an animated commercial before finally putting it on the app store.*
*It is sadly no longer available.
