TacPro

DESIGNED FOR ESports FPS player

The Background of our team
Our team was made of three people who not only were designers but also players enjoyed playing video games a lot. As a result, they wanted to figure out some problems encountered by video game players and solve them with their own hands.

My Role: UI/UX designer & Web Developer

Team members: Ming Xie, Sizhao Li, Yifei Xie

Tools: Illustrator, Photoshop, HTML/CSS/JS

Website: https://jasonxieyf.github.io/tacpro/

Account & password for testing:

  • tacpro

  • 1234

 
logo.png

Theme

The topic our group wants to pick is the one about recreation so we decide to observe people’s behavior when they playing video games to summarize their needs during the playing progress. The samples we choose are our friends as we are able to have a direct communication with them and retrieve feedback immediately through close observation. Because video game is a very common way of recreation and players may or may not have similar needs according to the type of game they prefer, so we think this topic is very interesting and worth to be further explored.  

PROBLEM

According to the observation of gameplay of several college students, we found out that the most popular games among them were first personal shooting game and Pokemon. Therefore, we summarized their needs through reviewing the video we recorded when they were playing.

Bruce is going to use his phone to calculate the data he just got from the game, which interrupts the whole progress. We can also notice that the interface of the game is relatively complex for players to extract key informations and mouse control in this circumstance is extremely difficult.

Bruce is going to use his phone to calculate the data he just got from the game, which interrupts the whole progress. We can also notice that the interface of the game is relatively complex for players to extract key informations and mouse control in this circumstance is extremely difficult.

Alpa is scouting the area at the beginning of the game. His teammate is trying to figure out where he is even though he has already called out the name of the location. This confusion is due to them giving the same location different names.

Alpa is scouting the area at the beginning of the game. His teammate is trying to figure out where he is even though he has already called out the name of the location. This confusion is due to them giving the same location different names.

Nicky is using touch screen to control her role to move. When she is controlling the role, she can do barely do nothing else. This really affect user experience when playing the game.

Nicky is using touch screen to control her role to move. When she is controlling the role, she can do barely do nothing else. This really affect user experience when playing the game.

  1. Players need a more straightforward interface/database which can systematically display information and precompute some basic information for players.

  2. Players need some complementary well designed tools rather than some general ones to relieve their stresses.  

  3. Players need intuitive ways of interaction to diminish unnecessary time wasting on thinking and increase the precision of their control.

  4. Players need a social system to communicate with people of the same type of hobbies.

  5. Players need a portable platform that allow them to not only backup their data but also study the potential possibilities of the game whenever and wherever possible.

…….

PEOPLE SHOULD HAVE A WAY OF ACQUIRING INFORMATION MORE EFFICIENTLY AND ACCURATELY.

STORYBOARD & PAPER PROTOTYPING

We then drew several storyboard to illustrate troubles they met during the game, which also explained why such solution was required for them.

微信图片_20181018215257.jpg
111.jpg
222.jpg

PROTOTYPE 1

批注 2019-06-02 230128.png

PROTOTYPE 2

批注 2019-06-02 230152.png
批注 2019-06-02 230210.png
批注 2019-06-02 230718.png
批注 2019-06-02 230739.png
批注 2019-06-02 230815.png
批注 2019-06-02 230829.png

The main problems I identify in their prototypes are that though the main functions are relatively clear for users, there is no navigation system for them to switch between functions. The flow of these prototypes may not be very ideally smooth due to lacking such functions. Some of the functions are really great ideas, but may need a better design of the flows and layouts. Also, there is no error prevention, diagozation, help or documentation for now. These parts are essential for users to get started and maintain an enjoyable experience. ——— Feedbacks from other students

According to the feedbacks we receive from the other group and our preference, we decide to focus on our first prototype because its flow is relatively more clear to be understood by beginners and we do not find any similar products on the market right now.  Therefore, we are going to remake the App based on the other group’s opinions to create a fantastic product.

  • Clear indication/icons on map tagging

            The tags we first decided to let users use were their avatars so that they could distinguish the messages easily during the game. However, the feedback suggests that they are not intuitive enough when people are playing intense games and we should use some simpler symbols instead. As a result, we plan to use icons with solid colors to represent different team members so that   they can quickly understand the meaning when those icons show up on their screens. Furthermore, we will add more icons even DIY functions for user to customize their own icons for convenience.

  • A front page for beginner guidance and troubleshooting function

The members from other group point out that our Apps are lack of tutorial and error prevention mechanism which may lead to some unexpected issues such as misuse of set of icons. What’s more, even though the target users may already know what is the App for, we still need some basic guidance to help users to get started as soon as possible. Correspondly, we are going to add some texts and arrows at the menu page when the App is opened for the first time to tell users the flow of the App.

  • Add navigation bar for quick access

The members from other group points out that we don’t have navigation bar or similar functions. So when users want to go back to home page for example, they need to do that step by step, which is very inefficient. So we may need to add a navigation bar on the bottom to lead users to go the the pages they want to go. Then contents in the navigation bar should include “home”, “current game” ,”account”. More detail information should be discussed.

- Allow user made custom map for “other games”

One of the feedbacks is that there are not enough games supported. We don’t have the resource to make the map for every game. However we may be able to create a custom map editor to allow user to load their own map for whatever game they want to use. They may also use this function to navigate inside a known but complex environment. The use of this map can be extended to real life.

- Allow import of friend lists from other platforms

We received the feed that the friends system is not convenient enough. Most players already have a long friends list on their gaming platform, like steam, origin and uplay. We can connect our account to those platforms, therefore making easy for players to find the friend. We can also add a group function so a group of players can find each other inside their own community very conveniently.

The workflow of our first prototype

The develop plan of our App.

The develop plan of our App.

The point of view that we came up to is “people should have a way of acquiring game info more efficiently and accurately” What we want to achieve is to use an app to enhance the experiences of playing complex and intense games. For example, when people are playing intense shooting games, it is difficult to communicate with teammates and get accurate information without affect their controls. By using the app we develop, they can deal with these tricky problems. Our inspiration comes from our observation of different people playing games, and also the experiences of ourselves playing games. By carefully observing the gaming processes, we come up with many ideas of improving the experiences, like adding label function for users to communicate with each other with just several clicks. Also we get some inspiration from some games which deal with the problems we found in good ways, like PUBG. Adding mark on the map is the idea that we found on PUBG since we found it is very efficient for users to communicate. Overall, we are still in the process of developing our app by following our point of view.

Comparative Evaluation

A version of our home page

A version of our home page

B version of our home page

B version of our home page

During our comparative evaluation, we mainly tested three aspects related to our change in home page. We counted how long people would stay on the homepage for the first time because an obvious problem of our first prototype is its lack of guidance so this data could show us how well we did in improving the overall accessibility if testers were able to directly figure out the logic flow of the app. Secondly, we recorded the number of clicks for current game since the icon we had used in our first prototype was very inconspicuous so we would like to see the difference between our redesigned page and the original one. Besides, we also recorded the clicking frequency of account buttons in navigation bar in that we made it look more distinguishable from other elements and thus we expected more clicks on it. Previously we had to directly tell testers the ‘account’ button was actually clickable.

批注 2019-06-02 235954.png
批注 2019-06-03 000135.png

We have many meaningful findings on our comparative evaluation results. We focus on three major aspects of our changes, including time people stay on the homepage, number of clicks for current game and number of clicks for account. According to the results, we found out that there are obvious increase of click times for current game buttons and account buttons on navigation. For the original page, the click times for current game button range from 0 - 3, and click times for account button range from 0-2. Both these two data shows our designs for these two parts are not clear. And we found many users did not notice that there is a current game button on the bottom. What’s more, some users asked us what current button for. This shows that they are confused about these two buttons. For the redesign page, we found an increase of click times for these two buttons. Especially the current game button. We have a max number of 6 click times. This shows that our redesign make these two button more noticeable to users. However, there are also some changes we need to reconsider. For example, the background design for the homepage. We found out that users spend more time stare at our redesign homepage than our original homepage. This shows that users are more confused about our redesign page. And we also heard users complained about the redesign pages. They think this page is a little bit redundant. So we should definitely need to redesign this page. Furthermore, we should add more content on account page and reflect the change of different settings.

In conclusion, our redesign make significant improvement on user experiences. Especially for the current game button and account navigation. However, we still need to think about how to make our homepage clear and clean. So that users do not feel redundant.

P.S. The way we recorded the data of clicking frequencies was to let testers go back and forth between our core function page and home page about 6~7 rounds, which allowed us to observe how many times if they click a button or not.

Walkthrough of the final version

FUTURE IMPROVEMENT

  1. We should make the design for home page cleaner, since some users complained about the redundancy of this page.

  2. We can redesign the logic of create a room. Maybe delete the “using default name option”, or reorganized the create name processes.

  3. We should add more functions on the account page such as game customization and friend list so that users can see the reflection of changes.

  4. We should add a invitation function which allows the hosts to add their friends directly for time saving purpose.

  5. We should have a lightweight homepage that removes the options players usually don’t need at the moment. For example, if the player is already in a room, he may not need “create a new room” option and this can be hid until he finds a new room.

  6. Maybe we should have larger buttons for certain map functions, such as next floor and prev floor, since players need to quickly tap them during gaming.