Firefrog
Team Size: 4
Web App, HTML/CSS, UI&UX, JavaScript
Firefrog is a web application that helps parents choose proper video games for their children. We used IGDB api to acquire game ratings and used Google Firebase to store the users' data online. When a game is recommended, users have four options - add to wishlist, don't like it, already owned, and buy from certain websites like Amazon or BestBuy.
Parents of a child might play video games themselves, but it is likely that they have no idea on what games, or genres are suitable for a child of a certain age and gender or what their child likes to play, not to mention that they may not have all popular gaming consoles to choose from. In this scenario, all they have to do is to use our app, enter their child info, game preference and console preference, and a list of games with detailed summary and screenshots will automatically be recommended to them. They can dislike games their child does not like to exclude them from the list, add games to wishlists to buy later, or mark games as already owned for reference. After that, they can either purchase the game from various online shopping platforms ditrectly from the recommendation page or go to their wishlist and check out wishlisted games there.
Prototype 1 (Sketches a Wireframes）
Prototype 2 (Technical Prototype）
n this milestone, we went along with our idea of creating an app for parents who want to buy video games for their kids. We implemented our UI skeleton based on the workflow of the previous wireframe design, with minor changes on the functionalities of the recommendation page and game info page, displaying one game at a time.
Prototype 3 (Hi-Fi Prototype and Responsiveness）
In this milestone, we updated the UIs for various pages. A navigation bar is added on the top of every page except for the index page and login page. Minor changes have been made in all content pages' title section for aesthetics. The UI for the game recommendation is reworked to display the game name and summary on same row of the game cover page, and the buttons for wishlist, already have it, don't like it and purchase has been moved to the bottom of the game info section. A title was added for the screenshots section, and screenshot pictures were resized and re-aligned. Functionality wise, users are now able to buy a recommended game directly from the option "Buy From". More functions were added including wishlist and blocked games(already owned and disliked). Games added to these pages will be stored for logged in users. Users will be able to purchase wishlisted games, and have the option to remove games from these pages.,
Prototype 4
We used google statistics to visualize the game genre percentage of the entire wishlist, disliked and owned games libraries of the user. We grabbed the data on these categories from our database through Ajax triggered by clicking a button, and graphed it using the function given by google statistics.
Reflections
Besides what we have right now, we would like to display game ratings from game reviews sites such as IGN and Metacritic as part of the game recommendation page, and allow our users to rate the games they have already owned. so that ultimately our app users' rating of the game can be displayed when other users are browsing through our game recommendations.
As far as visualization, we currently have a pie chart that displays the user's preferences. It is comprehensive, but sometimes too overwhelming at a glance. A news feed-styled statistics that randomly displays facts such as one of the favorite game, the user's all-time favorite genre can be more entertaining and straightforward for users, and can be integrated to the homepage or login page. Furthermore, we currently only display the first genre of a game in our statistics page, while most games have multiple genres. We would like to visualize the user's favorite game genre combinations, and possibly recommend new games with the same combination based on that.