Modderize

An online platform for facilitating video game mod requests

Modderize

An online platform for facilitating video game mod requests
Abstract background image

Modderize

Modderize is a web application for video game modders to track and fulfill mod requests from their communities; gamers can also use it to make mod requests and discover new creators.

Context

In many ways, the game modding landscape (especially for certain games, like The Sims 4) has transformed from a hobbyist pursuit into a professional, monetizable endeavor. Platforms like Patreon and others have introduced complex monetization methods, from monthly donations to content paywalls. Modders now depend on their fanbases for financial support, seeking to optimize their efforts and audience growth. Understanding user expectations is key, and better tools for this purpose are crucial. While some platforms offer basic feedback features, managing comments and requests across multiple platforms becomes challenging as creators' audiences expand.

Having a single place online where a mod creator can field mod requests and see what mod ideas are most popular within their community would resolve this problem. The goal of my project was to fill that niche.

My Role

UI/UX Designer, Full Stack Developer

Associated Course

DGMD E-599: Capstone Design Studio

Advisors

Dr. Hongming Wang, Karina Lin-Murphy

Industry Collaborator

Alexander Balashov, Sr. Front End Engineer @ CarGurus

Alexander Balashov,

Sr. Front End Engineer @ CarGurus

Technology Used

Figma, TypeScript, Google Firebase, NextJS, TailwindCSS, Storybook

Figma, TypeScript, Google Firebase,

NextJS, TailwindCSS

Timeframe

Fall 2022 (market research + design), Spring 2023 (implementation)

Fall 2022 (market research + design),

Spring 2023 (implementation)

Target Audience

There doesn’t seem to be a solid estimate for the total number of PC gamers that use and/or create video game mods. So, I’ve had to generate some of my own insights based on what little information is publicly available, usually from pre-existing mod sharing platforms.

Total Americans

329.5 million (The World Bank, 2021)

66% Play Video

Games (weekly)*

~217.47 million

43% Play on

Desktop Computer*

~93.5 million

*Estimated with statistics from Entertainment Software Association, 2022

This is the largest possible audience I can reasonably state for my product. From here it becomes difficult to estimate because there simply isn’t a lot of data available on this demographic. Realistically, though, the target audience is probably significantly smaller than this because it’s hard to say what percent of PC gamers play with mods. I was able to come up with a very rough estimate of how many PC gamers play with mods based on publicly available user data from popular mod sharing platforms like ModDB and NexusMods:

43% Play on

Desktop Computer

~93.5 million

38% of Desktop Gamers

Use Mods**

~35.5 million players using mods

**A very, very rough estimate. I can provide more information about how I got to this number on request; it is detailed extensively in my Capstone Proposal.

Competitive Review

Throughout the process of my competitive review, I looked at a variety of modding websites, and eventually settled on the most popular and well-known three for deeper analysis: Nexus Mods, Mod.io, and ModDB.

None of these platforms actually had a dedicated, tailored interface for exchanging mod requests. NexusMods and ModDB both had forums with sections that mod requests could be submitted on, but they were very far away from the main content of the site, and did not appear well-frequented by the majority of users, based on the post dates and number of comments. Mod.io did not have any dedicated interface for requests, instead allowing users to DM each other (which was not allowed on NexusMods, for instance).

Similarly, the mod websites I looked at had very few resources available for modders who wanted to collect donations from their followers or fellow gamers. NexusMods had the most robust solution, with a creator donation pool built into the site. However, it is well-known for its low payouts, since donated funds were shared amongst modders with the highest metrics, etc.

So to position Modderize comfortably in the market, my goal was to develop design solutions that could close these gaps.

Personas

There are two main user types that would be interacting with my app: modders and gamers. Modders being the people who create UGC (unofficial game content) and share it. Gamers being the people who download that content and install it into their games. In order to have a representative for different types of users and their unique motivations, I created a series of personas:

Man with Coffee by Vinicius Amano on Unsplash
Greg Hanover - "GregGameMods"
(the Audience Builder)

Coder

Married

Fallout 4

24

Man with Coffee by Vinicius Amano on Unsplash
Harriet Lyndon - "HarrieStylus"
(the Established Modder)

Animator

Single

The Sims 4

28

Man with Coffee by Vinicius Amano on Unsplash
Miles Booker
(the Classic PC Gamer)

Student

Dating

Skyrim

16

One note about these personas: the first two were adapted heavily from a set of personas I did for my CSCI E-34 User Experience Engineering class (see Staker). The app I designed for that class had a very similar audience, so I retained those archetypes (with mild adjustments), and then added the Miles archetype to represent a general gaming audience with no modding experience.

Empathy Maps

With these personas in mind, I went ahead and created some empathy maps to think more deeply about the things that mattered most to these users:

Greg Hanover
Harriet Lyndon
Miles Booker

Wireframes

With all of this in mind, I generated a series of greyscale wireframes for pages composed of features that I believed would solve various problems for my user base. Here are some of the initial mocks shared in my capstone proposal document:

User Testing

I was not able to do a formal user testing process for this project, as that would have required additional IRB clearances and paperwork for testing on human subjects. I did, however receive some informal feedback from my peers, professors, and industry collaborator as I worked through the project.

Implementation Plan

Throughout the planning phase, I developed a series of artefacts for keeping track of technical design decisions as well as my aesthetic design choices. An example of this is the infrastructure diagram I created to help explain to others how the app would work:

There's not a lot of detail in the infrastructure diagram relating to the front-end, since I had already known at that point I would be using React, but had not yet decided on a specific React framework nor styling library. In the end, I decided on NextJS because it would optimize SEO, and enhance performance for purely static pages, while seamlessly integrating data from Google Firebase. I also decided to use TailwindCSS, mostly because it was a technology that I had briefly tried in my design systems class (ISMT S-165: Creating and Maintaining Scalable Design Systems), but hadn't delved deeply into.

In addition to the overall architecture plan, I developed a detailed work plan with milestones and deadlines to help me complete the various tasks in time for the final submission date of April 30th:

January 28th

High fidelity prototype completed in Framer and/or Figma

February 11th

Create Firebase project and complete data model implementation

February 19th

Pt. 1 of static React app with dummy data (custom components, pages)

March 5th

Add authentication with Google/Email/Password

April 9th

Pt. 2 of static React app with code to interact w/cloud database

April 16th - 22nd

First testing and cleanup phase (find and patch bugs, etc.)

April 22nd

Site goes live (grab domain name, apply to site, handle hosting)

April 22nd - 29th

Final testing and cleanup phase (write documentation, storybook stories)

April 30th

Final Submission

Final Product

In the end, I was able to complete the project with a high degree of fidelity to the original concepts outlined in my proposal. Many things changed, including basically the entirety of the branding and visual design (that's why I didn't bother adding a section for that here), However, the final product is functional, looks decent, and I think is a good showcase of what I can do with unfamiliar technology (Google Firebase, Tailwind CSS, NextJS) in a relatively short amount of time.

In the end, I was able to complete the project with a high degree of fidelity to the original concepts outlined in my proposal. Many things changed, including basically the entirety of the branding and visual design (that's why I didn't bother adding a section for that here), However, the final product is functional, looks decent, and I think is a good showcase of what I can do by myself with unfamiliar technology (Google Firebase, Tailwind CSS, NextJS) in a relatively short amount of time.