Overwatch is a team-based multiplayer first-person shooter video game developed and published by Blizzard Entertainment. As a small pet project, I re-imagined their character select screen as if it were a fighting game.
KEY MOMENTS, CHALLENGES, AND SOLUTIONS
1. Early on, I had to let go of my initial concept. I wanted to mimic other fighting games by having the characters face each other in a fighting pose. But, in Overwatch's case, It would have been too busy, and would've hindered players more than creating a positive experience.
2. Through doing this, I learned how well-thought out game UI has to be in order to accommodate all of the functions that are possible. I also saw how and why the current UI is so effective, especially for first-time users.
KEY DELIVERABLES
and now in a little more detail...
1. How I wanted things to go...
Overwatch is currently my favorite game. So much so that it's the first game I think I've actually purchased in years. After playing it for a while, I wanted challenge myself to re-design the character select screen as if it were a fighting game.
Currently, Overwatch's character select screen looks like this:
When I imagined re-designing this, I looked at fighting games and their character select screens:
Marvel Vs. Capcom 2's character select screen.
A re-imagining of Marvel Vs. Capcom 2's character select screen by FreakinAwesomeCrap
Ultra Street Fighter IV's character select screen.
Fighting games usually pit one character against another character at a time. Or, if there are more, they tag in and out of combat. In the above screens, the characters you select face each other in fighting pose. I wanted to imitate this and re-create it for Overwatch.
Some quick initial sketches.
What I quickly found out, however, was that this wouldn't work for Overwatch. At least not the way that I planned it. Overwatch pits teams of six against each other. Having two teams of six characters stand facing each other takes up a lot of room. More than I expected.
Draft 1. Sort-of.
Before I even finished this draft, I realized that there would be almost no space for other UI elements such as player names, rankings, and levels. Even if I did put them in, I felt that they would be way too crowded, and hinder the player from getting a clear view of his teammates, and the opposing team.
I ended up giving up my original concept, and opting for a middle ground where both teams' characters could be seen, as well as giving space for important UI elements.
2. How things actually turned out...
I still wanted to show each team's members at once. I looked back at Marvel vs. Capcom's character select screen, and instead attempted to imitate how they placed their characters into small frames. I also created a character select UI for the middle that mirrored fighting games more closely.
Draft 2.
I was on the right track, but there were a few more elements that I felt were important when it came to creating a character select screen. I still needed a countdown timer, as well as the ranking icons for players. In addition to that, I wanted to create a state where the player hasn't locked-in their character just yet.
With a little more work, I created my final drafts:
Before you lock-in your character, if you select a character, their silhouette would appear in your character's box.
Locking-in your character would display them in full color, ready for battle.
Ultimately, I think I was successful in re-imagining how Overwatch's character select screen could look like. This re-design would, however, change how the player interacts with the game. Currently, players cannot see which characters the other team is choosing. With my re-design, all the cards are on the table, and would create a different atmosphere when preparing to fight. In addition to that, my re-design, in order to stay more true to fighting games, cuts out UI elements such as the chatbox, hero info, and teamtips. For the sake of this re-imagining, I was okay with this decision. 
However, it helped me appreciate Blizzard's design choices in their UI. All of those UI elements that I left out cater to a first-time player, or newer players. When I shared my drafts with friends who played, they actually remarked that this could be used for higher-level players, who already know their characters and don't need tips on how to build their team.
Blizzard is known for being very new-player friendly, and my re-design helped me see how thought-out and well designed their UI is.
3. In conclusion...
I had a blast working on this. It was so much fun to re-imagine how the UI for one of my favorite games could look like. This took about 2 days to make, and I sped through it. When I get wrapped up in work I like I can sit for hours (sometimes skipping meals) to get it done.
I had to make certain sacrifices to my original vision to design something more cohesive. In addition to this, I see just how deliberate Blizzard was when developing their original UI. As I grow as a designer I aim to be more deliberate with my decisions. I also hope to work on projects like this in the future.
Blizzard, if you see this and you need a UI designer, feel free to contact me!
Thank you for taking the time to read about my pet project. Although these are just some of the key moments from the project, I would love to share more about my work, so please don't hesitate to contact me.
Back to Top