An 8-bit introduction to UX design

This is how 10 years ago I created my first software application, a video game, and launched my career in tech as a UX designer.

Background

In 2008, as a high-school freshman, I devoted my waking hours to playing video games and coming up with game ideas of my own. It was difficult to focus on grades, and I’d often prioritize working on my own projects over class assignments. Having access to the Internet allowed me to learn skills that felt more relevant than what my teachers at school had to offer.

Online game design forums, with their cultures of critique and mentorship, were the rigorous workshops in which I first developed my craft as a Technical Artist. Before long, I was designing graphics that integrated into computer games without exceeding the limits of less capable devices.

Technical Artists act as a bridge between the Artists and Programmers working on a game. They ensure assets can be easily integrated into a game without sacrificing either the overall artistic vision or exceeding the technical limits of the chosen platform. The picture above is a sample of my pixel art.

I wanted to test my skills and make a game of my own, but at the time I didn’t know how to write code. I sought out communities of developers and posted my work where I thought I could find a collaborator. An Illinois-based computer science student, going by the nickname Vermolius, reached out to me after seeing my portfolio. We had fun coming up with big game ideas but struggled to complete any one project.

Challenge

We needed to face the reality of just how long it takes to develop software and approach our process differently. We wanted to create something unique but agreed to throw out ideas that would take too long to prototype. We decided to try time-boxing, setting out to develop the first version of a player-versus-player tower-defense game in just one week. We hoped this constraint would let us launch quickly and iterate based on feedback we got from players.

We knew it was imperative to get feedback from players, so the user interface included a chat along with game statistics and notifications. I used the same idea behind tilesets to make the interface stretch and shrink dynamically so the game could be played at various resolutions.

Efencea tells the story of robots and aliens battling over territory in space. It was unique at the time in that it allowed players to compete against each other in a tower-defense format. Games of this type were usually played solo. Each player would alternate between building defenses and dispatching waves of attackers. Players could earn points to upgrade their character units or save up to unleash a deadly boss monster on their opponents.

Developing an art style that didn’t take long to produce and that could capture this vision was an essential first step. Every character required a sprite sheet that included each of the frames we needed to animate it. We opted for a silhouette style to reduce the time it took to make the individual frames. In the tradition of Pixel Art, I hand-placed each pixel to optimize the legibility on smaller screens, and I kept to just 16 unique colors to minimize rendering.

Following the same principles of keeping the assets small and easy to make, l generated a system of repeatable tiles that could be programmatically configured to represent different territories in space.

These pictures compare assets for the first version of Efencea with the re-designed graphics for the re-release. I added more detail, increasing the number of transition tiles and animations in the game while keeping to just 16 colors throughout the files.

The first version of Efencea was completed in 8 days, at which point we blogged about our work to attract new players. We tested the game with our users and learned just how smart and unpredictable they could be. It didn’t take long for them to find bugs and balance issues. We used our research to improve the game’s balance, build a leaderboard, and even redesign the graphics and UI.

Outcome

Launching Efencea allowed me to secure more freelance gigs working with teams on commercial products. This made balancing my time with school even harder. My mother, in her infinite wisdom and support of my art, agreed to let me finish high school online. I earned my high school diploma in less than a year. I was 16 and finally free to focus on my craft.

Elven Chronicles, a mobile RPG game, needed to re-launch their game on iOS, which had a larger resolution than they had planned for. Their team hired me to double the size of each character. I sought to re-create each one while maintaining the look and feel of the originals.

Iron Grip: Marauders was a free-to-play online war game with 3D turn-based battles. I created texture maps and user interface elements for the game. Working with their team required that I learned the basics of UNITY so that I could test graphics considering lighting and atmosphere.

Some teams had me design sprite sheets or tilesets for their games. Others had me create user interfaces that were easy-to-use and supported a game’s story and theme. Once, I was called on to make lightweight texture maps for 3D environments. The web made it possible for a teenager in North Philly to collaborate creatively with people around the world.

Stormweavers helped game developers quickly construct 2D game worlds from a set of pre-existing sprite sheets and tilesets. I worked with them to develop the original set of assets that came included.

A mockup of a castle using my sprite sheet and tileset. A sprite sheet is an image that consists of several smaller images (sprites) and/or animations. A tileset is a collection of raster or vector data broken up into a uniform grid of square tiles. Sprite sheets and tilesets are highly cacheable and load quickly.

I felt inspired to follow a career in web development, but at 18, I felt ambivalent about going to college. The financial burden would have been on me to carry, which made me apprehensive. I wanted to further my education, but the UX programs I researched seemed out-of-touch and filled with irrelevant courses. Since I already had experience working for professional software teams and felt comfortable pushing myself to learn all that I could, I decided against going to a traditional college. I opted to teach myself the skills I needed to land a full-time job.

Once again I found myself turning to communities on the web to teach me the skills I needed to advance my career. After gaining some mastery over HTML, CSS, and Javascript, I scored a position on the front-end/UX team at WebLinc in Philadelphia. There, I was finally able to apply what I had learned about software design to the web.

WebLinc maintains its reputation as a top workplace by celebrating the local tech community year after year. During my time there, I helped WebLinc host a special event at National Mechanics during Philly Tech Week. I led the design of a participatory Hollywood Squares spin-off called N3RD St. Squares. Attendees could compete in real-time with other players for free drinks at the bar with their phones. Our show host and a brass band led the night and a panel of beloved members of the community acted as our celebrities.

N3RD St. Squares allows players at a bar to compete with a room full of people for drinks by guessing if local tech celebs answered questions correctly. The 2014 panel included Green Ant, Johnny Bilotta, Val Head, Darren Hill, Jenn Lukas, Alex Hillman, Patrick Rodgers, Eric Smith, and Joey Sweeney.