Game Development Process

Planning & Wireframing

As the first project in the Web Development Immersive with General Assembly, we were tasked to create a game using JavaScript, HTML, and CSS.

Initial Concept: My first idea was to make a trivia game for aspiring entrepreneurs to learn business strategy.

I defined user personas (Aspiring Entrepreneur, Random Bored Person, and The Mom Test) and considered what features each of those would like.

This left me with a core set of functionality for my Minimum Viable Product:

  • Asks users a question
  • Presents users with 4 possible answers
  • Notify user when right answer is clicked
  • Keep track of score
  • No matter what the user clicks, display the right answer

From there, I wrote 3 plans: Bronze, Silver, and Gold, in order to focus on getting the game mechanics to work first, and then begin adding features and styling if I had time.

devimg1 devimg1 devimg1

Design & Development

I used a Trello Board to track my development process, including moving each element from initial design through assigning event listeners to quality testing each piece and ultimately launching the site on GitHub Pages.

I launched and tested the original game, but I was not loving the boring business spin on the project, and my styling was seriously lacking.

prototype

After some reflection, I decided to pivot and change the content to be about one of my favorite animals, Otters, and change to a fun, whimsical theme filled with puns.

I leveraged the sushi background image from the Zendesk Website, found my Otter logo image on Dribble, and used Coolors to generate a complimentary color set. With just a couple hours of CSS editing, the game arrived in it's current state, where I am testing users on Otterly Awesome Facts.

Lessons Learned

I learned several lessons along the way of completing this project including:

Commit Early and Often - there were a couple times where I broke game mechanics by experimenting, and fortunately I was able to roll back to previous working versions that I had already pushed to my GitHub repo.

Don't Fall In Love With Your First Idea - as much as I enjoy business strategy, I did not spend enough time making the content fun and in plain English, so I ended up displeased with the outcome. By letting go of my attachment to this idea, I ultimately freed my mind up to be more creative in other ways.

Media Queries Are Tricky - as an avid mobile user, I was adamant on making my game mobile-first. However, my skills in this area are not very strong, and ultimately I am still experiencing some formatting issues when the game is viewed on a screen smaller than 500px wide. I will continue to work on this as I learn more throughout the WDI Program!