top of page

Gamely

Find your next favorite game

HomepageHome Page.png

Role:
UX/UI Designer
Deliverables:

  • Quantitative/Qualitative Research

  • Sketches/Low-High Fidelity Prototypes

  • Outcomes/Validation

Team:
1 UX Designer
2 Software Engineers
Timeline:
2 Weeks
Tools:
Figma
MUI + Rawg.io

Brief 📖

Video games have become a necessary tether for people during isolation. According to Verizon, video game usage (during peak time hours) has gone up 75% due to COVID in the United States*. This means that individuals that operate at home (from work or school) have also picked up some gaming hobbies as well.

This Holiday Season, General Assembly has challenged us with a Holiday Sprint to

Solve a "Pandemic Problem" in a cross functional team.

Introduction

Design Methodology

NicePng_thinker-png_7759743.png

The team followed through the ‘Double Diamond Design System’; using divergent and convergent methodology to identify our target audience and build our product.

This system consists of the 4D’s:

Discover - Brainstorm and find the nature of the problem.

Define - Converge on collected data (user and market research)

Develop - Finding the core solution

Deliver - Create a working product

Discover

Discover

What is the nature of the problem?

The Problem 🧐

From casual gamers to veteran hardcore gamers, there's one thing for certain; finding the perfect game can be quite the hunt. There are hundreds of games for each platform, so finding the right one can be difficult.

Define

The Solution 💻

Gamely is an MVP (Minimum Viable Product) game recommendation website for novice and veteran gamers alike. Users can find games tailored to their preferences by filling out a quick questionnaire.

We’ve also implemented a gamification element where users can “reroll” game recommendations, and create a list of games that they may be interested in.

Define

Which problem can we impact the most?

Design Ideation

Discovery

This ideation began with understanding our users who are in isolation and some activities that can help reduce the dread of being indoors all day long. Gaming was indubitably a huge factor, so with that being said, the team worked to create a solution for gamers during the pandemic.

Quantitative & Qualitative Data

What are their frustrations? How do they navigate towards their solution? 

These pondering questions were transitioned into a form of a survey then followed through with an interview, where gamers were questioned on;

 

- Resources used to find games (for themselves or someone else)

- Important underlying factors (Price, Genre, etc.)

- Methods that they use to solve their game-shopping frustrations

We took these findings into an affinity map where I brainstormed some major frustrations, experiences, and goals that users are seeking in a tool like Gamely. Doing this allowed me to highlight some core elements in a creation of a Persona.

Factors important to you.png
What resources quizz.png

Affinity Mapping

Affinity Mapping.PNG

"I want to start gaming... but where do I begin?"

Building a Persona

Utilizing some of our user data, the team created a persona that leaned more towards a user that was a “novice video gamer”. This unconventional perspective allowed us to create a user experience for even the unlikeliest of audiences.

 

We wanted to create a website that was easy, simple and fast.

Persona Light.png

Hover to magnify

Highlighting UX Opportunities

Creating this user journey allowed us to dig deeper into the life of a novice gamer.

Why would they use Gamely? Would this solve their frustration?

Some quotes used for this map were taken from some of the interviews I conducted. Creating this not only visualizes the user's "WHY" to using Gamely, but also some possible UX opportunities post-action.

Frame 7User Journey.png

Research Findings (Spoiler: HUGE SUCCESS!)

This phase was a success. This phase brought me closer to Gamely's Goals; here are some conclusions:

Users need:

  • Personalized experiences

  • Clarity

  • Smooth Navigation

  • Fast Information

Develop

What wows? What works?

Develop

Sketches

Once the team agreed on some main functionalities, we dove right into some sketches.

A benefit of creating a visual design (even if it’s quite sloppy) gave the team some wiggle room to negotiate on some elements that may (or may not) work.

 

The team’s engineers decided to use Rawg’s API as data for Gamely’s website.

An API is an acronym for “application programming interface”, where engineers can organize specific data into a usable, searchable product.

Home Page

This page features a hero image, a CTA button, followed with a questionnaire.

The user can begin the questionnaire by:

 

  1. Clicking on the CTA button (which will automatically scroll to a specific anchor point)

  2. Manually scrolling down

Home Page Sketch.JPG
Game site Sketch.JPG

Game Page 

This gamification feature brings a fun element to this page.

Users can also save certain games onto their list for future references.

(Starting over will erase all data.)

Wireframe

Once the team agreed on certain features, we moved onto the wireframes.

Click image to enlarge.

Wireframe FULL.png

Information Architecture

I took some time to map out an information architecture on the user's navigation from start to finish. This allowed the team to better visualize the main focus of Gamely's core purpose.

Information Architecture.PNG

Atomic Designing

This Design System was inspired by MUI, a robust component library. We used a dark mode color theme and 2 accent colors.

Design System FULL.png

Each interactive component has 3 states;

Inactive, hover, and active state.

Game CardGame Card.png

This game card component will be utilized on the Game Page. Its content was heavily inspired by the results of our user research.

Deliver

Select and make concrete from abstract

Deliver

High Fidelity Prototype

The high-fidelity prototype on Figma is the closest representation of what the team had envisioned as the final product. Click on Github to try it live!

Prototype

Usability Testing

10 users were asked to complete 2 tasks - To successfully fill out a questionnaire and add a game to their list.

To our surprise, users had experienced some friction completing task 2, as they were "couldn't see the list on the page."

This was a perfect opportunity to update the interface with a list that's more visible.

100%
Successfully filled out the questionnaire

60%
Added and viewed their desired game on their list

Iteration + Validation

before n after.PNG

 

Upon retesting our updated changes, users were successfully able to access the game list without any friction. Doing this, without a doubt, improved the design's usability.

Conclusion: Reflections and Moving Forward

Working in a cross-functional team was a positive learning experience for me, as I was able to understand how to effectively communicate with my teammates, and allow myself to be more flexible with new opportunities.

Some next steps:
- User Testing

- Follow-up Iterations

- Tweaking of some game card content to better fit our user's need

Hey, you made it!

Thanks for viewing! Have questions? Let's connect!

bottom of page