Firework Show Simulator
Project Background
Firework Show is a mock mobile application that I designed for fun in my spare time. It is intended to be used as a fun creative outlet for kids and adults to build and play their own firework shows.
In the app, users can select from many different types of fireworks and other pyrotechnics to build a show. They can then sync their show to music and play it against vivid and scenic backgrounds.
Objective: Practice building a horizontal mobile app that is both fun for kids and practical to use.
I. Ideation
I designed Firework Show as a mobile app that a 10-year-old could use and also find fun. My intent was for it to be a creative outlet, where a user could build their own firework show, sync it to music, and play it against the night sky in vivid detail.
These mockups are simply one way the app could be built. They are a general wireframe, intended to serve as a guide and show the functionality behind the app. For this purpose, I intentionally left some of the menus rather vague, as well as some of the finer details.
I also thought that it might be fun to gamify the concept so that users can unlock different and unusual fireworks for their shows. This opens a good possibility to monetize the app. But for now, these wireframes serve as a great minimum product.
To start, the splashscreen and main menu display Toby's iconic truck against the night sky (Toby is the person in the app who places the fireworks). I wanted the building of the firework show to be fun and thought the best way to do that would be to simulate the real experience in a cartoonish way.
II. Design
Canvas
When building a new show, the user is presented with a blank canvas of daytime, grass, and of course, Toby and his truck, which remain on the screen while the user scrolls horizontally to build their show. The music track will also scroll and sync with the fireworks placed on the screen.
​
I chose to go with the dark background and white text throughout the the app so that the vivid colors would stand out more, especially when it became time to preview the fireworks. This also helped with any eye strain that would occur from switching back and forth between playing and building a show.
Visualizing the firework building through a cartoon is hardly functional, but it makes it simple to understand and fun to use, perfect for my target audience. Still, it will make it hard to zoom in and out and that feature should be strictly controlled in the app, with the user only having 2 or 3 levels of zoom.
Tools and Options Menu
When designing the navigation I went through about 3 iterations before arriving at the one seen here. I originally didn't want a top bar and had the nav options taking up the left side of screen, but this covered up our friend Toby's truck. Instead, I put the navigation options within 3 small buttons on the top left of the screen.
​
When the settings icon is selected, a menu appears to the right where the user can access any general options for the show, such as changing the scene (that's the backdrop on the screen when the show is being played) or exiting to the main menu.
​
I considered letting users have lots of options for the scene, or even being able to customize it, but felt 6 would be sufficient to start with.
The music note icon opens the music menu. Here, the user can individually select a track to adjust the volume, trim, or add effects. The 'Apply to All' selection will be limited in options, but will be applied to all tracks in the show (for example, a master volume). Users will be able to add tracks and set their order outside of this menu on the bottom left of the screen.
Building the Show
I went through a few ideas for displaying the firework selection. I found myself limited for space as I didn't want to cover up too much of the canvas, nor Toby's truck. I ultimately decided to have the main menu show the different categories of fireworks and effects, with the selection icon being a small preview. Visually, it is much more fun to look at and it also conveys the most amount of information in the smallest space. From there, I then could display the details and actions in their own box on the left.
Isolating the firework stats provided some needed space so that they are easier to read and have room to expand if needed. During the first iteration, I displayed the stats as icons but felt their meaning was not intuitive enough and changed them to orange text.
​
Placing a firework is as simple as a tap on the screen, with the red lines indicating how long that firework will display. Once placed, the firework is marked by a wooden post. Although not shown in the wireframes, tapping the post will bring up the details of that particular spot so that the user may edit them and see a more detailed visualization.
Finally, the user can play and watch their show by tapping the play icon. I considered 2 options for the user to preview their show. The first, was a separate options menu where the user can view their show from a particular spot. The second, was an option to view a 'minishow' on the canvas as the user is building, which would be much more intensive to code and run. In the end, I decided that a preview option wasn't necessary for a minimum product.
III. What I Learned
-
While in other apps I focused on function over form, for this app I heavily considered the aesthetics of the design first, as I found it to be important to my target audience. This added a layer of difficulty and forced me to seriously consider and prioritize the most important elements, as not every feature could be easily included.
-
When building the firework selection menu, I found myself trapped for space and going through a number of iterations for displaying the components. In addition to playing around with different layouts, I also had to group and hierarch the information a few times. By utilizing more sub-menus, I found I was able to effectively solve the space problem.
​
-
I used the Chalkboard font and eventually became attached to it as I found I could go much smaller with the font size than I originally thought possible.
I was pleased with the way this project turned out, considering I originally wasn't intending to get past some basic wireframes. While there are still a few kinks to work through, such as building the firework menu and other details, I think this prototype works well enough to build a minimum viable product. Overall, this was an interesting project to build and it was fun to consider the different options and possibilities for further builds.