The problem:
The users want to see what the gameplay looks like before taking a lot of time to download or purchase the games since some games take up too much space in the storage.
The Goal:
The users be able to watch the preview of a game by watching a short video of the gameplay before or after the game publishes.
Project Overview
The game preview for any console allows the users to see if the game is the one for them by watching the gameplay before and after the game is published officially, and the user can see which game is their favorite to play with.
12/2023 - 12/2023
My role:
UX Designer
Responsibilities:
User research, Personas, User journey maps, Wireframing, Low-Fidelity Prototype, High-Fidelity Prototype, Usability studies, Mock ups, Accessibility design
User research: summary
Persona: Mina
Goals
Watch the game previews in HD for every console
Watching the gameplay of the game before buying or downloading the game
Watching what processes took for a game or an update before publishing
Frustrations
Some games show only a trailer of the game, while others show some screenshots
She doesn't know if the gameplay is the one he is looking for
She doesn't want to face the situation that after looking at the screenshots and downloading a game for a couple of hours and, after running it, they will see that the game is not what it was showing in the screenshots.
Users like to watch a preview of a game before they download or purchase it. They can see how the gameplay of a game is and if it suits them. Some games show a trailer of the game and some other show some screenshots but it’s rare to find a game preview that shows the actual gameplay when someone wants to download or purchase a game on their device.
Sitemap
I thought it might be a good idea to include the genres, Pegi, A-Z, and most watched video for each console to allow the user to get better results and have a better experience. Also, I thought it would be best if the user could have all the filters they need to get the best result of finding the specific preview they are looking for.
Paper wireframes
At first, I wanted to make a simple fit-to-screen home page but then I wanted to be a little more creative and make a different desin and the result was something new.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing the location of the search button and visual element placement on the home page was a key part of my strategy.
Here, My thoughts were to design it simple but effective. I thought it would be more convenient to have everything at the sight to make it easier to do an action.
The goal of this idea was to create a space for users to watch the previews and comment at the same time. The “Comments” section shows the most recent comments.
Homepage is optimized for easy browsing through the carousel of images and nav menu options
Low-fidelity prototype
The user opens the app. Choose from the categories or carousel. Choose a preview, and finally, watch the preview.
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
United States, remote
Length:
20-30 minutes
Usability study: parameters
Usability study: findings
Findings
Most of the users were unable to comment on the preview or to share it with others
Most of the users want to upload their previews
Most of the users want to see more content on the home screen
These were the main findings uncovered by the usability study:
Mockups
Before Usability Study
After Usability Study
Based on the insights from the usability study, I made changes to improve the site’s navigation. One of the changes I made was the Upload Videos button. I made the text on the button red with a white background to separate it from the rest of the navigation menu and make it more visible.
I added the consoles' videos to the side of the page so that it would be easier to see and choose the top videos of each console without going to another page.
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Mockups: Screen size variations
Mockups: Original screen size
Before Usability Study
After Usability Study
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
Accessibility Considerations
I used headings with different sized text for clear visual hierarchy
I used landmarks to help users navigate the site, including users who rely on assistive technologies
I used annotations and labels to give the instructions to the production team.
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Let's Connect!
Thank you for reviewing my work on the GameView website!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email address: mojtabaeslami34@gmail.com