// 01 - PROJECT OVERVIEW
GRIMFORTRESS KICK OFF MEETING

This project involved quite a bit of research about Valve Software's game, Team Fortress 2. Grim Fortress hosts 24 player slot community servers out of Dallas, Texas. They had an non responsive website that did not allow for a great user experience when players wanted to visit their website from in game or on their mobile phones. They needed a responsive framework to build upon if they ever wished to add more content in the near future.

MY ROLE

Visual Design, Research, Web Development

TARGET AUDIENCE

Grim Fortress future and current community members who wish to keep up to date with their favorite server owners.

PURPOSE

To give community members and staff a better user experience on the web allowing more server donations. The owners will have a responsive framework for future additions to their website.

PROJECT DURATION

February 2014 - May 2014

FEATURES

  • Responsive Website

  • Landing Page

  • Halloween Themed Design

TOOLS USED

  • Adobe Photoshop CC

  • Balsamiq Mockups

  • Webflow

// 02PROJECT RESEARCH

// 02 - PROJECT RESEARCH
UNDERSTANDING THE GRIMFORTRESS ROOTS

ABOUT GRIMFORTRESS

It was very important for me to understand that GrimFortress was not an actual game, but a community that ran game servers for a game called Team Fortress. Grimfortress is a Halloween Themed Team Fortress 2 Community run by a team of 25. They run 24 player slot servers out of Dallas, Texas through a prestigious company called NFOServers. They offer in game cosmetics for players who choose to support their game servers for as little as $1.00/month.

VALVE SOFTWARE

Valve is the creator of Steam, the pioneering game platform that distributes and manages thousands of games directly to a community of more than 65 million players around the world. Valve is also the creator of games like Counter-Strike, Half Life, Left 4 Dead 1 & 2 and Team Fortress 2.

DESIGN CHALLENGE

Create a responsive website that will allow users to view Grim Fortress's Website from any device. Make the users feel that every time they come to their website they feel like they are getting a Team Fortress 2 Halloween themed experience.

TEAM FORTRESS 2 GAME

A First Person shooter that consists of nine distinct classes providing a broad range of tactical abilities and personalities. Constantly updated with new game modes, maps, equipment and, most importantly, hats!

PLAYABLE CHARACTERS

  • Sniper

  • Pyro

  • Scout

  • Soldier

  • Engineer

  • Medic

  • Heavy

  • Demoman

  • Spy

SOCIAL LINKS

// 02 - PROJECT RESEARCH
FIELD INTERVIEWS - GRIMFORTRESS PLAYER BASE

Making assumptions about what users want is definitely not the best route to take. The people playing Team Fortress 2 on a daily, weekly or bi-weekly basis are what drives the community. In this section of my research, I get to know 3 of Team Fortress 2's player base to help further my product. All users have the Grim Fortress Servers added to their favorites and expressed their concerns about the current state of their community's website.

Tim Cannon

AGE: 25
OCCUPATION:  Executive Assistant
STATUS: Single
LOCATION: Grand Prairie, TX
FAVORITE CLASS: Pyro

"True hacks, come from within."
- LMAOBOX Hacker

TROUBLES:

Grimfortress website contains outdated information and occasional broken links to embedded webpages. The current logo is an eyesore.

GOALS:

To some day be able to view the website on my mobile phone without as much effort as it takes now.

// 02 - PROJECT RESEARCH
FIELD INTERVIEWS - GRIMFORTRESS PLAYER BASE

Joseph Rios

AGE: 30
OCCUPATION:  Technical Support Rep
STATUS: Single
LOCATION: Portland, OR
FAVORITE CLASS: Heavy

"It costs 400 thousand dollars to fire this weapon for 20 seconds..."
- Heavy

TROUBLES:

The only trouble I have really is just viewing the page away from home. I understand that the game must be played on a desktop, but this is mildly infuriating.

GOALS:

I'd like to see better mobile support in the future. Since this is a big community, we all like to contribute to forum boards, etc.  It would be awesome if we could do so while on the go, breaks at work, etc.

// 02 - PROJECT RESEARCH
FIELD INTERVIEWS - GRIMFORTRESS PLAYERBASE

Erik Blazer

AGE: 23
OCCUPATION:  Professional Truck Driver
STATUS: Married
LOCATION: Oklahoma City, OK
FAVORITE CLASS: Demo Knight

"Oh, they're goin' ta have to glue you back together...IN HELL!"
- Angry Demo Man

TROUBLES:

None really, I just like to visit the website on my desktop, maybe just make it feel more like Halloween.

GOALS:

Honestly, I would like to be surprised with what you come up with for the new website.

// 02 - PROJECT RESEARCH
COMPETITIVE ANALYSIS - UNDERSTANDING COMPETITION

This part was very important for my learning process about online communities. I wanted to see what communities have been doing so that I can see what works and what doesn't. Currently, there are several gaming communities out there, but none that really have a Team Fortress 2 Halloween vibe to them.

SKIAL

A massive TF2 Community that has been around since 2011.

DEGREE-GAMING

We are a laid-back but highly active multi-gaming clan that is focused on multiple games.

PLAGUE FEST

Founded in June 2006 as the second Zombie Mod server in Counter-Strike: Source.

PROS

  • Served over 8 million Unique TF2 Players.

  • Automated donation system allowing players to have perks almost instantly.

  • Servers are very populated daily.

PROS

  • Automated donation system.

  • Servers are moderated quite well.

  • Website is steam login compatible making sign up process quick.

PROS

  • Community is Zombie Themed.

  • Popular Zombie Mod Servers.

  • Massive player base due to its long history in gaming.

CONS

  • Increased chance of running into trolls.

CONS

  • Low populated TF2 Servers.

CONS

  • Website has a bit too much information on the landing page.

// 03PROJECT INTERACTIONS

// 03 - PROJECT INTERACTIONS
GRIMFORTRESS LOW FIDELITY WIREFRAMES

Another important aspect of the design process is creating low fidelity wire-frames. This allows me to get the structure of a project in my design programs without having to worry much about colors, typography or the final touches quite yet... I have found wireframes to allow me to become very efficient throughout my process.

// 04PROJECT VISUAL DESIGN

// 04 - PROJECT VISUAL DESIGN
GRIMFORTRESS COMPLETED VISUAL DESIGN

This is the part of the design process where the visual design is completed. This is where I find out my visual design languages, solidify my desired color scheme, typography, iconography and the overall look and feel of the project. This is what the users will be seeing on a daily basis.

// 04 - PROJECT DEVELOPMENT
GRIMFORTRESS WEBFLOW PROJECT

When my designs are finalized, I begin the process of bringing the work to life in Webflow. Webflow allows me to design, develop and create complex interactions for all devices visually, providing pixel perfect code for the web. When I am finished, I simply export out the perfectly generated HTML/CSS/JS and upload it to the client's host. As if Webflow couldn't get any more overpowered, this tool also allows me to also keep clients up to date by generating a link for clients to follow my progress. 

OPEN PROJECT IN WEBFLOW

---- OR ----

VIEW WEBSITE