UX concept - Stray Pixel

Conceive a gaming app hosting games made by small developers to allow for organic and helpful exchange between gamers and devs

How the project was born

Aidan and I formed a two men team. We were both new at university and we immediately clicked.
When the topic of a UX class project came up, we quickly settled on the topic of video games, we are gaming enthusiasts.
We narrowed down the topic when we exchanged childhood stories about Newgrounds, a site hosting "everything, by everyone", from art to music to, of course, flash game.
Newgrounds is an old website, a cornerstone of 2000's internet culture.
We further narrowed down from video games in general to the flash games market. We wanted to create a better platform for gamers.

Challenges

This is a generative UX project, we start from an idea and refine it until we have clear graphical concepts of the interface.
This study was done in COVID context, all research were done remotely.
The steps of the project are: 1 - benchmark the market of online flashgames, 2 - clarify the hypotheses: where are the gaps on the market ? 3 - Conduct interviews, 4 - Hold workshops, and 5 - Conceive high fidelity wireframes of the concept on figma.

Benchmarking and pinpointing stakeholders

The market positioning map has 2 axes and 6 actors. First axis: playing on the same platform or device versus download and setup the game. Second axis: Free games versus paid games.
1st quadrant: free games hosted on the platform: Newgrounds, Y8.fr, Poki.
2nd quadrant: paid games on the same device: App store games.
3rd quadrant: free games requiring download and setup: Global game jam.
4th quadrant: paid games requiring download and setup: itch dot io.

6 different online flash games platforms were benchmarked, including Newgrounds. Sample websites can be split in 2 broad groups:

1) Websites that host and allows users to play the game online: Newgrounds, Poki, fr.y8
2) Website that host data repositories and/or allows you to purchase games: Global Game Jam, itch.io, App Store.

In both categories, one group of stakeholders stands out to lose the most: new game developers who are new to the market.

Aside from Newgrounds which hosts content while giving credit to the creators and allowing for feedback, most flash games sites do not credit individual creators and do not allow for qualitative player feedback in the form of comments.

As for the second category, there is an extra step needed to cross to access the game: technical, here the user needs to know how to download then start the game, or monetary, with the case of paid games.

The app concept seeks to satisfy the following:

1. Breakthrough in a hyper-competitive environment.
2. Communication between devs and gamers to facilitate incremental improvements.
3. More flexible ways for developers to generate revenues.

Methodology

To get a better understanding of several groups of stakeholders, we have conducted interviews and workshops on 2 groups of users:

Developers - 4 participants, they are 4th year game design students from the Rey Juan Carlos University, Spain.

End users (potential players) - 3 participants.

We decided to base the tests on Newgrounds and Itch.io, the latter being the platform of choice for novice game devs to upload their works and get feedback.
Each group interacted with different research tools.

Workshops

Game developers:
1. Interview
2. UX cards - In this workshop, users match 7 different psychological needs with 12 UX element cards. I usually stick to only 4 UX elements when testing with participants: functionalities, visual design, content and interactions.
3. I like, I wish, I wonder - In this workshop users add stickers under three groups: what they like about an interface, features they wish they had, and questions about the topic or the interface.

4.
Six-to-one End users
Gamers (end users):
End user workshops were done after the game dev workshops. Due to how diverse this group is, we have decided to have them evaluate Newgrounds and Itch.io, and the developers' 6-to-1 to point out elements they liked.
1. Cultural Probe
2. Open card sorting
3. 5 second test
4. Adapted usability scale
(for both sites)
5. Review of the 6-to-1

Screenshot of remote workshop: user-led 6-to-1, developer group. In this workshop, participants draw 6 screens of the potential application.
Screenshot of remote workshop: I like, I wish, I wonder. In this user-led workshop, participants add sitcky notes in 3 different columns for features they liked in existing platforms, features they want to have in their ideal app, and questions they have about the project.
Screenshot of remote workshop: 5 seconds test. This workshop tests how memorable a user interface is by having participants look at a screen for 5 seconds, then draw it from memory. If the interface was designed to be easy to understand, the recall should be similar to the interface.
Screenshot of remote workshop: Open card sorting. In an open card sorting,  researchers write the categories of a website on moveable notes. Participants organize them in groups they think make up categories, they also name the categories.

Findings

Developers

- The game developers are new to the industry, at this point in their career they have trouble identifying all the factors in their professional environment.
- They do not know how to communicate with their playerbase yet and are preoccupied by doubts about their legitimacy as developers.
- They believe that gamers' feedback will help them improve their product, they do not know how.
- To them, their vision of a gaming platform application is one that brings recognition for both developers and gamers, they were surprised by the lack of an accomplishment/reward system on itch.io.
- Finally, they like itch.io but question the visibility of this platform, they feel that players there are almost "invisible".

End users

Open card Sorting
In both open card sortings, participants have classified the games by their supporting system (MacOs, Linux, ...), their genres, have a "boutique" section for non-game items (comics, music tracks, ...). They also added a category with game developers in mind, containing "assets", "jobs".
When they faced the landing page, they found the information architecture to be unintuitive. Itch.io's IA shows sign of an organically growing website, which makes navigation harder for newcomers.

5 seconds test
Participants found that the lack of a strong graphical identity, colors and icons made the site's structure unmemorable.
They suggest using colors to highlight interactive parts of the UI, less categories, more icons and a more unique graphical chart: "Going for something more original to make it nice to look at, to make people want to come back and, most importantly, talk about it"

Usability scales
- Content: both sites host a wide variety of content, though non-game contents are less visible on itch.io
- Navigation: participants graded Newgrounds' navigation as more intuitive. Itch.io lacks a breadcrumb, and the search bar disappears once users go on a page of level 2 depth.
- Functionalities: participants found Newgrounds' features easier to grasp, while some of itch.io's were targeted towards game devs, creating confusion amongst non-dev users. One participant wants to be able to play the game natively, joining the devs on that remark.
- Design: while Newgrounds' design is "a bit busy and very colorful", they prefer it to itch.io's, which they felt as "empty".
- Community: participants found interactions to be warmer, more human on Newgrounds than on itch.io.

Final concept

Taking research results into account as well as the gamer group's evaluation of the 6-to-1, we designed high fidelity wireframes of the potential application. Being able to upload games that can be played on the platform will remove the obstacle of setup.
We want this platform to be a jumping board for developers and an enjoyable experience for gamers.
We think that many games in the catalogs will be demos, which will help devs refine their system.
Note: these wireframes are up to date re-do of the ones in the original project.

First impression
1. First screen
2. Homepage

We chose a palette that is retro and inspired by brightly painted consoles.
Dark grey is the background color, dark mode is easier on the eyes and associated with gaming culture (see Discord).
Bright green for interactive elements and yellow for active elements.

Users can select a game they want to check out on the Home screen.
Wireframe 1 - the opening screen of the app. Users can log in, change account and create account.
Wireframe 2 - Home screen. Users choose the game they want to play from a selection of newest games, top games, by genre, and a random selection if they want to be surprised.
When a game is selected:
3. Game overview
4. Comment section

Getting organic insights on what gamers think of a product is one of the main advantages we wanted to provide smaller game developers.

To play a game, users double tap the game thumbnail, the first tap activates the "PLAY" overlay, the second tap starts up the game proper.
Wireframe 3 - A game is selected. On the game selected screen, users can toggle between the overview, which is the description given by developers, Gameplay, which is a small gallery of pictures, Comments, and reviews.
Wireframe 4 - A game is selected, the comment section is shown. Users can write comments and others can answer it in a collapsible thread.
Playing games
5. Portrait mode: the game is paused
6. Landscape morde: the game is unpaused / played

We wanted to integrate the pause function into the orientation of the device itself.

A lock feature prevents the game from getting paused by accident. This feature is present natively on most devices, however we want it integrated so that users' immersion is not broken.
Wireframe 5 - A game is being played, portrait mode, the game is paused.
Wireframe 6 - A game is being played in landscape mode. Tilting it to portrait mode pauses it.
Account features
7. My Favorites
8. Friends

The "My Favorites" section lets users follow their favorite developers, projects, and pin comments.
Users can also see who fav'ed their comments, and if they are a developer, their projects and teams.

The "Friends" section was added to promote a sense of community.
The application would have chats options and "Game invites" for multiplayer games.
We want invitations to serve as both ways to make new friends and to play games together. Users can turn off invites.
Wireframe 7 - The "my favorites" section. This is where users can see the games, developers and comments they've added to favorite. It also lets them see any update to these elements.
Wireframe 8 - The "Friends" section. Users can chat with others, invite others to play multiplayer games and manage their friend list.
Developer account
9. View of developer account, Analytics

Developers can toggle between Gamer view and Dev account.
Devs accounts allows developers to keep track of their games' analytics and development, all the while keeping touch with their teams.

Each project has its workspace that serve as task management tool.
Wireframe 9 - It shows the Developer account. A Developper accounts serves as the organizing tool in a team, a kanban board, and lets developers check their games' performance through analytics.
ContextBenchmarkMethodology
FindingsSolution