Design Documentation - DNA Dynamite

Design Documentation

Design Timeline

Phase 1: Research

Initial brainstorming, used the illumina template to learn more about the company and what the project was intended. We deepdived into the goals of illumina to correctly create a game that reflected these values.

Phase 2: Prototyping

Wireframing UI components, planning interactivity, and defining backend endpoints. We started off by drawing individual parts of the game on the whiteboard and then connecting them together to create one big final whiteboard design. As we progress on making the code for the game we chaged the desing and made a more professional prototype of the game on canva. As we wrapped up making the game there were a few changed but our intial ideas were still leading and present.

Phase 3: Development

Implementing the game loop, animation logic, and backend API integration. Each person in the team worked together but on indiviual parts, broken up, to create various features and aspects of the game. When each part was created, like the trivia quiz, hearts, DNA strands, and leaderbaords were working on their own; they were then connected and merged. After sucessfully making sure the game worked together we added each part to create one big "featutre" that a user could play as the DNA dynamite game.

Phase 4: Testing & Launch

QA testing, fixing visual bugs, final documentation, and public release. The team spent around 2 weeks + working out kinks and bugs that they ran into. After a few weeks of fixing up errors and small design changes the game was much more polished and ready to be deployed and presented.

Research Document

Original UI Design:

Updated UI Design (Post Stand-Up Meeting):

Overall Design Changes:

Over time, our design evolved to become more practical and space-efficient. Key changes included:

  • Relocating the hearts (lives) indicator to the side of the screen to maximize gameplay area.

    • Enlarging the game display to fill most of the screen.

    • Adding Instructions, Start, Stop, and Pause buttons to improve user accessibility and gameplay experience.

Current Design:

  • Hearts were moved and enlarged as well as an implemented breaking glass sound with each life lost

  • Leaderboard was added with stored logins and scores, changing each time a high score is reached

  • Typing functionality instead of a drag and drop

  • More sound effects and popups added for highscore, quiz, and instructions