VAPR Games
A cloud-based gaming platform
Role
UX/UI Designer
Timeline
6 weeks
Tools
Figma, Miro, Canva
Overview
The Challenge
The Goal
VAPR Games was a group, student project. My team consisted of 4 other student designers.
Cloud gaming is an emerging technology in the gaming industry, which allows a user to stream high-end games on devices, such as laptops, tablets, and mobiles, with a good internet connection.
Due to the technological limitations facing cloud-based gaming, gamers need a low-latency gaming experience because graphically intensive games tend to perform sub-optimally through the cloud.
Low-latency, less graphically intensive games should be provided to gamers who want to play through the cloud. Our goal was to provide gamers with a catalogue of classic, retro games that are better suited for the technological limitations facing cloud-based gaming.
My Process
Research
-
User Interviews
Synthesize
Ideate
-
Affinity Mapping
-
User Personas
-
HMW
-
Site Map
-
Lo-Fi Sketches
Design
Test
-
Hi-Fi Prototype
-
Usability Testing
-
Redesign
Research
I interviewed 5 gamers with various amounts of gaming experience, to find out what the peaks and pits in the experience of cloud based-gaming are. The interviews were also used to find out behavioral patterns around gaming, in general, such as motivation and barriers.
Asking the right questions
"Gaming is a way to socialize with my friends."
.png){kind=small}
"Some of my favorite games are low resolution."
"Frames per second is important to me. Resolution, not so much."
"I lose frames when I play on the cloud."
01.
7/7 gamers agreed that frames per second is important when gaming
02.
6/7 gamers don't care about resolution quality
03.
7/7 gamers use gaming as a way of socializing with friends
Using all the information I gathered during the research phase, I decided to create two user personas that summarize the needs, goals, and behaviors of our target users.
Who are our users?
Click to enlarge
Key insights from research
Users enjoy gaming as a way to socialize
Users enjoy gaming as a way to hang out with friends after a hard day at work, especially with games from their childhood.
FPS (frames per second) is important
All users agreed that the most important factor when playing modern games is their frames per second. Low frames equals a bad gaming experience.
Resolution isn't that important
Almost all users agree that high resolution isn't necessary to have a great gaming experience. They would rather have an optimal gaming experience with high FPS.
Cloud gaming isn't playable yet
Almost all users refused to play on the cloud due to the fact that modern games, that are graphically intensive, experience latency issues.
I gathered the qualitative data and grouped them into similar themes. The affinity map below shows the 3 most common pain points and trends observed by gamers.
Understanding the problem
Synthesize
Ideate
Our group thought of a solution that would provide the most optimal gaming experience despite the latency issues of cloud based gaming.
How might we provide a low- latency gaming experience through the cloud?
Solution
Provide gamers with a catalogue of classic, retro games that are better suited for the technological limitations facing cloud-based gaming.
Before designing what the website would like look, I wanted to establish the layout of the website so I created a site map. Our group decided on four main navigation categories: Home page, Games, Friends, and Account.
Laying out the foundation
I started brainstorming the layout of the meditation app. For the wireframes, we focused on three of the main pages on our website: Home page, Game page, and Game Library.
Brainstorming, sketching lo-fi
Home Page
Hero image of games
or news
Recently played games from library
Game Page
Description of game and how to play
Video preview of game
Game Library
Filters to search for games
Game library of retro games
I looked at other cloud-based gaming websites for inspiration and created a mood board to help brainstorm what VAPR Games would look and feel like. Sticking with our retro themed content, we decided to go with a neon yellow and green. We also included retro game graphics that would invoke a feeling of nostalgia.
Design inspiration
Color Palette
Mood Board
Similar Websites
Test
Improvement 1
Original
Join party icon on the friends list had no clear indication of its purpose.
Improved
Added ‘Join Party’ and ‘Message’ to the friend’s list to clarify meaning of icons.
Improvement 2
Original
Users had trouble distinguishing the difference between payment info and subscription.
Improved
Changed 'Payment Information' to 'Billing Information' for further distinguish between subscription management and billing management.
Improvement 2
Added preview of next game’s thumbnail to indicate more content and horizontal scrolling function.
After creating a hi-fi prototype, I usability tested 5 gamers with various experience with cloud-based gaming to test the functionality and ease of navigation of my designs. After testing, a few improvements were made.
Design inspiration
Final Design
Home Page
1.) Easy access to recently played games
2.) News articles relevant to gaming
3.) Mobile controller set-up instructions
Game Library
1.) Library full of retro games from NES, N64, Nintendo Gamecube, Gameboy.
2.) Ability to filter games by genre, gaming system, year, etc.
3.) Game page with description, ability to join friends' lobbies, and video preview.
Conclusion
By creating a gaming platform with retro, low-latency games, VAPR Games optimizes the cloud-based gaming experience while users nostalgically connect to their childhood.
What's next?
The next steps would be to create a Discord feature that allows your Discord profile to be linked to your account, and, also, the addition of other consoles and more retro games, based on user feedback.
What I learned
I learned that the UI really impacts how the user navigates your website. For example, users did not know whether to invite friends or launch the game first. By providing the user clear and intuitive visual indications as to what to do next, the flow isn't interrupted with hesitation and confusion.