Game Awards

Annual event where fans around the world vote on their favorite games of the year. I explored the problem and opportunities to create my own responsive website to vote on games and learned how to use Adobe XD.

Jun - Aug 2023

My Role

Mockups for the Game Awards site

UX designer redesigning my own Game Awards site for the Google UX Certificate program.

Goal

Design a website that focuses on the user journey of voting on a game while providing nostalgic opportunities to review the games and affiliate links for the purchase of games.

Audience

App targets US teens and adults ages 16 - 40 that play or watch video games from every so often to every single day.

Persona for the Game Awards site
User Journey map for the Game Awards site
Sketches for the Game Awards site

Challenges

A key challenge was to make the voting flow more exciting and nostalgic to keep users engaged before the event. Existing sites require several navigations to find the voting process and often lack content to motivate users to vote.

Research

I created a Persona and a User Journey map to understand how the existing sites could be considered tedious. Many of these sites miss opportunities to appeal to gamers looking for their next purchase.

Ideas

I sketched a few ideas before selecting the layout because I felt the voting process needed to include images to catch users’ attention to vote.

Home screen wireframe for the Game Awards site
Mockups for the Game Awards site

Wireframes

My first wireframes focused on navigation. Users need to easily finding categories to start voting either from browsing or searching. By searching, users can find award categories, games, and articles. Sign-in needs to include social media options to make it easier for users to vote.

Desktop | Mobile

Usability Studies

I conducted a moderated usability study of 5 friends and family to learn that navigation was still frustrating to find categories and vote on games. Users needed highlighted actions and grouping of pages to make it easier to navigate. They also need to know the status of a game that has been voted on to know the task is complete.

Prototypes

I took the feedback into my Adobe XD mockups and prototypes by creating common regions on the page with color and spacing to make it easier to find sections like “Game of the Year".” I also included instructions on how to vote and a label that shows which game you voted on or won the category after the event.

Desktop | Mobile

High-fidelity prototype for the Game Awards site

Takeaways

My design helps users navigate when voting on the game awards through engaging images, more sign-in options, and informing users of their votes. I learned how to use Adobe XD to design a responsive website through multiple iterations of usability studies.

High-fidelity mockups for the Game Awards site

Next Steps

I focused a lot on navigation improvements but I missed opportunities for accessibility. For instance, screen reader support and design annotations for heading order could be iterated on in a future usability study. By making the design more accessible, I can include more people in the target audience and allow them to vote on their favorite games too.