My role
UX/UI Designer
18 weeks (November 2020 - February 2021)
Team size
5 members: 1 project manager, 1 UX/UI designer (me), 1 front end developer, 1 back end developer, 1 machine learning and data science expert.
This project was initiated by the Chronic Coder’s founders (Joey Wong and Christopher Kok).
Important note: The full case study/project brief can be made available for interviews, this page presents a summary and an overview of the project. Specific details are excluded to protect my work from potential theft.
The Product
GameRec is a video game recommendation app that aims to provide users with accurate and personalized game recommendations based on their preferences and gaming level. The app addresses two main issues with existing recommendation tools: inaccuracies in recommendations and lack of support for different types of gamers.
The Problem
- There’s little existing game recommendation engines, especially ones that consider multiple platforms.
- For regular and experienced gamers recommendations are mostly popular games that they already know, there is a lack of niche recommendations (for more “casual” gamers, however, these mainstream recommendations can be useful, as they are less likely to know about current popular games).
The Solution
The backend

Provide an API that takes user input (like previously enjoyed games, etc.) and delivers recommendations using machine learning. The first couple of weeks will be based on scraping data, accepting user input and developing recommendations that can be sent back out through the API. Examples of data sources:

- database with games for multiple platforms with genres and a lot of other useful information, seems to have everything we need as far as games list databases go

The frontend

Provide an interface where users can input information that helps drive the recommendations (previously enjoyed game titles, genres, etc.). The interface will also be the place we present recommendations in an easily consumable manner for any user type.
My Responsibilities
- Research cycle. Ideate & planning, finalize discovery test plan, recruit, MVP feature speccing (work with frontend dev), finish up discovery, analyze preliminary data, MVP prototype/low-fidelity, preparing for usability test, consult, finalize usability test plan, recruitment, usability test, presenting findings.

- Design UI. Ideate on final design, create interactive high-fidelity prototype.

- Development cycle. Feature speccing, ideate on this iteration, UX prototype, preparing for usability test, consult, recruit participants, finalize usability test plan, usability test, presenting findings.
Prior to user recruitment, I ensured a balanced representation across all experience levels and genders, with a particular emphasis on amateur experience. This deliberate approach proves valuable in addressing the main problem we uncovered.

After completing the recruitment process, I successfully categorized all users, resulting in the identification of 5 significant personas.
Sketches & Low Fidelity Wireframes
Following a competitive audit to identify common patterns, I developed these sketches and low-fidelity wireframes, and I observed that:

- The most prevalent pattern was the importance placed on the search button across similar apps and tools.
- These platforms typically generate recommendations based on a curated selection of games that align with the user's preferences.
- Most tools didn’t address the main value of their recommendation tool.
User Flow
My goal was to keep the user journey as short as possible. After comparing other apps and noting certain detours that might discourage the user, I created this improved user flow, avoiding those unfavorable patterns.
User Testing: Round 1
To start the first round of user testing, I created a low-fidelity prototype using Figma. Our developer quickly launched the webapp, ensuring a focus on evaluating the API’s performance and the accuracy of the recommendations.

Below you can see our MVP for the first round of user testing.
- Some users were disappointed with the recommendations and questioned their accuracy and criteria.
- Users were confused by titles on the list that didn't match their desired game type.
- Users wanted thumbnails or pictures for quick understanding and to enhance trustworthiness.
- Users suggested incorporating community reviews for user assistance and building trust.
- Users recommended adding information about game creators or studios to aid in decision-making.
- One user complained about unrelated games being listed together.
- Some experienced users desired transparency regarding the criteria used for recommendations, although they acknowledged some value in the tool. Doubts about accuracy persisted due to undisclosed criteria.
Style Guide
My idea was to provide an inviting and comforting experience. The yellow and orange shades represent happiness and fun for the inviting part, while the blue and green shades represent calmness and peacefulness for the comforting part. These colors aim to provide a sense of familiarity and ease.
I selected Teko and Poppins as the fonts. Teko features angular designs, reminiscent of classic games predating the 128 bits console gaming systems era. Based on my audit this was crucial to build trust between us and the users. To maintain the desired calmness effect, I paired it with Poppins. These fonts are particularly advantageous, as they are open source and curated by Google, ensuring optimal performance, high quality, and great accessibility.
To make the logo, I took inspiration from the pixel art style and the atmosphere of arcade game venues. The goal was to bring a sense of nostalgia and to reinforce the feeling of familiarity and comfort.
- AAA contrast for all buttons is achieved across the web app. Even in case it doesn’t meet the requirement, (especially due to the main gradient background) AA contrast is still achieved.
- Keyboard only and voice navigation should be possible. More tests using the fully deployed web app are required to confirm.
- Alt text for pictures was one of my goals and it was discussed with the team for implementation.
- Buttons clickability should pose no issue, the low fidelity prototype, MVP and high fidelity prototype all seem to pass in this regard.
High Fidelity Mockup
User Testing: Round 2
Due to unforeseen personal circumstances affecting one of our team members, they were unable to continue supporting the team. Despite our best efforts to find a suitable replacement during the development cycle, we were unable to secure a new team member to complete the remaining part of the project. This meant that we were unable to proceed with the second round of user testing as originally planned.

As the UX and UI designer of this project, I took the responsibility of informing all participants recruited for the second round of user testing about the situation. I shared with them the new screens of the high fidelity prototype to gather their valuable feedback on the elements that were already developed. Fortunately, we received positive feedback on the overall design and improvements made. However, it is important to note that due to the circumstances, we were unable to conduct testing on the main core functionality of the app, specifically the optimization of our recommendation tool.
This project was my first time taking full responsibility for the UX and UI role - from research and preparation to design. Outside of what our team “could have done better” (available in the full report), there are a few areas I personally wish I could have improved as the UX/UI designer:

- Competitive audit: at the time I did not know which type of data would be crucial and which information would be less relevant. I now recognize how I should have spent more time researching this critical aspect.
- Communication: Although I am used to the Agile work environment from my previous role as a computational linguist, the level of back-and-forth feedback and overall communication dynamics required in the UX/UI design realm is different. I now understand the importance of involving all stakeholders quickly so as to avoid miscommunication (which can unnecessary prolong the time needed to finalize the project).