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:
- https://www.igdb.com/discover: 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
- https://www.kaggle.com/tags/video-games - https://github.com/leomaurodesenv/game-datasets
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.
Personas
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.
Feedback
- 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.
Colors
Typography
Logo
Iconography
Buttons
Grid
Accessibility
- 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
Desktop
Mobile
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.
Hindsight
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).
