MDA

A forum for in depth gaming discussion.
Role
Lead Developer
Constraints
80 Hours
Devices
PC Desktop
Tools
Figma

Background

Gamers are always looking to play new games, but it can be difficult to assess how much they are going to enjoy playing a game before buying it. It is often the case that a game sells a huge amount, but that the majority of players regret purchasing the game due to the game not meeting their expectations. 

Currently existing mobile apps for discussion of gaming often have qualities that hinder the user from attempting to figure out if they would enjoy a game or not.

Many mobile apps feature discussions where users can express their personal opinions/reviews of a game. The issue is that it can be difficult to tell whether their opinion will match yours. It is often the case that users' standpoints come from how they have personally interacted with the game as well as their history of how they interact with games. These different perspectives can confuse users between something that would be a legitimate issue for them, as opposed to another person’s personal opinion that is not shared.


Goal

An end-to-end forum design which helps gamers who are looking for a new game to assess if their opinion match those of a other forum users.

Research Process

First I determined the questions that I wanted to answer via my research:

1. Understand how user evaluate the opinions of other users in regards to critique of games.
2. Understand users current pain points in attempting to assess these opinion on currently available platforms.


Research


User Interviews

After conducting interviews with three individuals, I was able to determine the following shared pain points and motivations.

Shared Pain Points
Difficulty in assessing enjoyment level of a game through currently available platforms

Shared Motivations
To experience novel games
To read well thought out discussions, and unique perspectives on games

Define


User Personas

Following preliminary research, I was able to create two user personas in order to have templates for my target users.

User Flows

I developed user flows for the most common actions that users would perform.

Feature Roadmap

After completing my user flows, I created a feature roadmap for my design.

Sitemap

After completing my feature roadmap, I created a sitemap for my design.

Ideate


Low Fidelity Wireframes

After creating my site map, I created low fidelity wireframes for my two flows.

Branding Guide

I then created a branding guide in order to plan my visual design.
This guide includes a rationale which explains my choices.


High Fidelity Wireframes

I then created high fidelity wireframes based on my low fidelity wireframes and my mood board.

Prototype and Test


Usability Testing

After completing my wireframes I conducted usability tests using five participants and reached the following conclusions:
Task One: Create a new account and set it up.
Task Two: View the forums page for a game you are interested in, and then view a single thread.

5/5 users were able to complete both tasks.
Users felt that the design informed them of the game mechanics and features.
Users enjoyed the visual style of the design.

What Worked
Users enjoyed the visual style of the design.
Users were easily able to navigate through the design to complete each task.
Users were intrigued by the profile feature, and felt that it would genuinely help lead the forum in a positive direction. 
Users liked the logo specifically.

What Didn’t Work
Some users thought that the color scheme was a bit jumbled.
Some users felt that the forum text (messages) didn’t look great.

Proposed Changes
Re-Evaluate the color scheme and use less white/gray
Re-Evaluate the text boxes for messages in a thread.

High Fidelity Wireframes Revisions

I then iterated on my wireframes and to incorporate user feedback.

Revisions (red) :
Top Bar’s color scheme adjusted to be more cohesive. Users felt that the color scheme was a bit jumbled. Reducing the number of colors creates cohesion.

Revisions (green): Blue dividing lines removed. Users felt that the thread screen looked a bit cluttered. I removed the dividing lines to make the design cleaner.

Next Steps

  • Conduct further usability testing for feedback and validation of changes.
  • Send design to developers