Blizzard Battle.Net App Banner

Project info

  • Software:Adobe XD
  • Class:Senior Project

Blizzard Battle.Net Application

This project is a redesign for the phone application version of Blizzards Battle.net client. My goal was to improve the user interface and add features from the computer client version. I wanted to make this application more appealing to the users who were annoyed by the current app.

I chose this app for my Senior project and Portfolio class. This project is meant to expand on my UI/UX and User Testing knowledge. I also wanted to do better on detailing my though process.



Research

The Battle.Net Client is used mainly to access Blizzard Games such as Overwatch, World of Warcraft, Diablo 3, Hearthstone, and other titles. Users can also do several other things in the client such as contact friends, shop for official merchandise, and keep up with the latest news surrounding your favorite games.

I chose this app for my Senior project and Portfolio class. This project is meant to expand on my UI/UX and User Testing knowledge. I also wanted to do better on detailing my though process. This project lasted an entire semester and I had 3 checkpoints to update my class and instructor on my project.

Original Blizzard Battle.Net Client and phone application Blizzard Battle.Net client and phone application layout

I started my research by talking to people who use the Battle.Net Client on their computers. I spoke to other students and gathered a few opinions. I tried to consult Blizzards Forums online, but I did not receive much feedback.

What I learned from the six people I talked to in person much of the disinterest for the phone application stemmed from a lack of a solid reason actually use it. As for searching for feedback online, I didn’t receive much feedback from the queries I posted to Blizzard’s forums and Reddit’s Battle.net page. So instead I read through post others had made complaining about the application.

From there I gathered a list of the most mentioned features people wanted to use on the mobile application. I skimmed through about 150 post over the past year. I only took the suggestions that were echoed in 3 to 5 other posts. I also removed any features that seemed unfeasible. Some of the features are available in the computer client. While others are in neither version, but I read convincing arguments why they should be.

List of Proposed Features

  • View game Highlights
  • Notify when friends come online
  • Access Group Chat
  • See pending Friend Requests
  • Access Store section
  • Access Group chat
  • Clear chat history
  • Sort Friends List
  • See friends online and offline duration
  • Send phots through chat
  • Access Forums and receive notifications
  • Ability to receive and send Gifts
  • Access News section
  • Merge Battle.net authenticator app
  • Manage Blocked List
  • Spectate friends matches
  • Phone widget
  • Profile stats
  • View games patch notes


Scrapped Progress

After compiling a list of features, I started thinking about personas. I made a primary and secondary persona whose goals reflected the two most important features.

Primary and Secondary Personas

Now that I had an idea of what this app needed, I started sketching out how the app would look and flow.

I took the list of features I gathered from the forums and sorted them into sections. These sections would become my main tabs. I made two separate layouts because I was unsure how many features to put into this app. I wanted to get feedback on both before going ahead with the design.

Layout Sketches

The first wireframe (left) I drafted up contains all the features I gathered. The five tabs are: Forums, Social, Games, News, and Shop respectively and a page for user profiles. The Games tab would be the Home Tab.

The second wireframe (right) is slimmed down considerably and has only three tabs. I removed the Social and Games tabs. The News tab became the home page and I felt it made the app simpler for users.

More pages would be needed for items found in the Store tabs if I had continued with these designs.

Two Wireframes

Getting feedback from my peers, I decided to scrap some of this work. The number of features and pages was a big concern during one of the checkpoints. I also saw these concerns reflected in the users I had tested before. The concern centered around the app being too overwhelming. I cut down on the content but kept my personas almost the same moving forward.



Meet the Users

My target audience is the same as Blizzard Entertainment. They make their games for a wide audience range. Specifically, my target audience are people from twenties to thirties. I used Blizzards game forums to ask gamers broad questions about the app and their complaints. Gauging their experience and motivations I drafted up these personas.

I spoke to seven people and took note of their motivations to use the current app. The general complaint among all the users about the current app was its lack of features.



Scenarios & Flows

This information architecture functions as a quick wireframe. Using this I can understand how users will flow through my app. Compared to my previous wireframes, this layout has brought only one new feature from the list. The Forums is the most desired function that users want to bring to the app.



Using the information architecture and the personas, I began to think about scenarios both personas would go through and mapped a desired flow. These are the two most common ways users would use this app.



Wireframe & Framework

After my User Flows, I began fleshing out my information architecture and made a wireframe. From there using Adobe XD I shaped the look and feel of the app sticking close to Blizzards style. Unfortunately, Blizzard doesn’t have an official style guide posted so I had to mimic the visuals as best I could. Below is a link to the working version of the app. https://xd.adobe.com/view/a51b4dbf-09e7-4746-400f-88461fcb7411-d32a/



Reflection

This project was a redesign for the phone application version of Blizzards Battle.net client. My goal was to improve the user interface and add features from the computer client version. Though I believe I achieved my main goal, I wish I had more time to work on it. I still believe that there is a better way to integrate more features without it feeling cumbersome to new users.

This project helped me practice my UX and User Testing skills. I was upset that I couldn’t get much feedback from the Blizzard forums like I had hoped but I made dew in the end. If I were to revisit this project in the future, I would expand the pool of testers so I could get more in touch with the desires of the community. Overall, I am pleased with what I was able to get done in the allotted time.