MMORPG Preservation Online Yearbook​

MMORPG Online Yearbook​

A collaborative online yearbook to aid in MMORPG preservation

Grade Received: A


Adobe Illustrator, Adobe Photoshop, Adobe XD, Balsamiq, Clip Studio Paint, Google Forms, Google Sheets


visual research, mood boards, surveys, user testing, ideation, GANTT charts, personas, sequential storyboards, affinity diagrams, low-fidelity sketches, wireframes, high-fidelity mockups

Chapter I: Initialization


A lot of people spend – or have spent copious amounts of time on Massively Multiplayer Roleplaying Games (MMORPGs), essentially living parts of their lives in these “virtual worlds.”

Massively Multiplayer Online Role-Playing Games (MMORPGs) are responsible for forging online communities and relationships that have become core parts of human culture and memory. Given the continuous rise of MMORPGs in popularity, preserving these online memories is crucial.

The Problem

Since there is currently minimal effort in documenting MMORPGs’ players, as well as the communities and cultures formed within and through these MMORPGs, an important part of modern human culture, history, and memory is lost.

Project Idea

This project hopes to highlight and address the aforementioned problem by producing a design prototype, which can hopefully act as a starting point for a real technological solution that will preserve MMORPG artifacts and memories, which current and future generations can access.


This capstone project will employ at least three Bachelor of Information (BI) projects to produce a design prototype from 5 January to 12 March 2021. The roles I will take on for this project will be: UX researcher, UI designer, writer, and presenter.


Gaming Gary is a not-so-artistic 37-year-old historian who researches during the day and plays Warcraft late at night, right after he spends time with his kids. He needs a way to archive his Warcraft experience with other players, connect with other players, and show his kids when they’re older what Wacraft really was so they could stop asking their dad why he was
always on his computer at night.

As-Is Scenario



Chapter II: Wireframes

Based on the findings from my previous methods,I have determined that my product will be an online platform that allows people to communicate with one another, create and edit virtual yearbooks, and browse yearbooks other users on the website have created. Based on the responses to the features survey, my own feasibility and usability testing, and Gaming Gary’s pain points, the most important features to add to the product I am creating are those concerning community, project collaboration, and organization. I have brainstormed four features that I will highlight in my prototype’s “happy path,” which are:

  •  A group chat box that is visible while editing a project 
  • An editor that allows users to work on the project simultaneously
  • A list of group members who are working on the project
  • A filtering or sorting system that will allow users to efficiently search the yearbook database

Some other features that are in the prototype but are not thoroughly explored are:

  • A forum page to find collaborators and discuss anything from the yearbooks themselves to general topics
  • An inbox and instant messaging system
  • A yearbook exporter that will allow users to save yearbooks as PDFs

Sequential Storyboard

Using an image editor, I sketched a rough sequential storyboard that highlights the following tasks:

  • Login
  • Edit Yearbook
  • Publish Yearbook
  • Browse Yearbooks

Low-Fidelity Prototype

I created a low fidelity prototype using Balsamiq that highlights typical happy path when creating and looking at one’s yearbook. The screens created are:

  • Welcome screen (for guests or non-users)
  • Login screen
  • Home screen (for users)
  • Dashboard screen
  • Editor screen
  • Browse yearbook screen

Usability Testing

Due to the COVID-19 pandemic, I had to conduct my usability evaluations online. Before contacting people online, I first listed the happy path tasks that I will ask the participant to perform. The tasks are:

  • Login
  • Edit your yearbook called “Memories of Ragnarok Online”
  • Look at your asset folder and add an image of a bird to the canvas
  • Find the shapes folder and add a triangle onto the bird’s head
  • Type in the chat to report what you have accomplished 6.
  • Publish your yearbook Browse and sort the browsing page
  • Find your project by project name
  • View your yearbook
  • Find details/additional information about your yearbook

To conduct this evaluation, I sent participants my interactive PDF file and guided them through the usability testing process using
Zoom. I utilized the think-aloud protocol, in which participants voiced their thoughts out loud while they interacted with my design.
After the evaluations, I arranged my findings in an affinity diagram.

Some of my main takeaways here are the importance of a page selector in the editor view, as well as the project name search bar in the browsing page.

Chapter III: High-Fidelity Design

Design Research & Analysis

I performed my design research or design analysis by looking at 12 design programs in total (web-based and desktop applications), as well as 3 general websites.

Using Google Sheets, I created a table to organize my findings. For this table, I chose to focus on 7 web-based design programs and 3 desktop applications. They are: Adobe Spark, Aseprite, BeFunky, Canva, Clip Studio Paint, Crello, Google Slides, Adobe Illustrator, Piskel, and Pixilart.

Based on this design analysis, I created a design guide. I chose to go with a dark theme to help the eyes. I also chose to use a sans serif font that has a large counter size so that it appears more modern and readable. As for the colour scheme, I decided to use a deep black colour as user interface’s main background, so that it appears stark yet also pleasing to the eye. My second colour is what I like to call “off-white,” but it does appear slightly “cool gray” at times as well. It will serve as the main contrasting colour for the black main colour, and will mostly be used for texts, icons, and boxes that are placed against a dark background. My final colour is a medium blue. It is the accent colour that will be used to highlight selected elements and texts. Its goal is to not be too distracting yet also be eye-catching.

Application & Conclusion

Based on the initial low-fidelity prototype and the feedback I received form that, my design guide, and my design analysis, I made this high-fidelity screen that illustrates how those things come together.

I want this design to serve as a starting point for a real technological solution that will preserve MMORPG artifacts and memories. MMORPGs are responsible for forging online communities and relationships that have become core parts of human culture and memory.

If people fail to properly preserve MMORPGs, this part of our history can easily become warped. When this happens, all the memories and communities formed in the MMORPG will simply either crumble into nothing or become heavily distorted. What happens to the years of community-building and maintenance that the MMORPG’s players and developers worked so hard for? Some people may suggest an archive to preserve all these game memories, but if only one person curates the digital artifacts, that person is still prone to cognitive biases. What this paper proposes is a community-made online yearbook that involves everyone who has a connection to the game, from the players to the gamemasters.

Some people may argue that there are already digital artifacts of different games online. While that is true, there is no centralized location for all MMORPGs. They are either scattered all over cluttered forums or on websites that have been last updated in the year 2006. The worst scenario is, when someone who is not motivated to store their screenshots and videos online simply saves their digital artifacts on their computer, does not properly back it up, later loses those memories forever, and regretfully tries to remember every speck of memory he has about that game he used to love so much back then. An online yearbook tries to motivate these types of people to collaborate online with their MMORPG friends in creating a space to store their collective memories. In a sense, the point of the online yearbook is not only to minimize cognitive bias when chronicling memories, but also to strengthen the relationships that were formed in these virtual worlds through the creation of something that they will cherish later on.