Design for Esports Lover


Individual Project | 4 weeks | 2018 Summer


Desktop Research
User Observation
Case Study


Invision Studio

As a new trend of sport, esports market is growing rapidly every year and attracting more audience from different age groups. There are esport events everywhere and everyday. Mentis is an integrated app based on ipad for esports lovers to keep in pace and follow latest news. Users can discuss in the forum as well as looking for their ideal gaming support in the mall. The goal of this project is to create an “esports culture” and to eliminate the current stereotype of gaming.

Marketing Research

In 2016, esports market has risen to $463m. The winner of Dota2 TI won $1,600,000 in July. In 2017, the global eSports market was valued at nearly 493 million U.S. dollars. According to the source’s estimates, global eSports market revenue will reach 1.65 billion U.S. dollars in 2020. The eSports industry is expected to grow rapidly in the coming years. In 2015, worldwide revenues generated in the eSports market amounted to 325 million U.S. dollars. At the pace of 40 percent year-on-year growth, the market is expected to generate close to 1.5 billion U.S. dollars in revenue by 2020. It was calculated that nearly 80 percent of these revenues came from sponsorships and advertising in 2016, and the rest from eSports betting, prize pools, tournaments, merchandise and ticket sales. In terms of revenues, Asia and North America represent the two largest eSports markets. While Asia contributed almost a quarter of global eSports market revenue, generating 328 million U.S. dollars in 2016, the North American market brought in 275 million U.S. dollars in revenue, followed by the European market at 270 million U.S. dollars.

There’s no doubt esport market is developing fast in its pace. What’s supporting it expanding every year? Answer is esport fans. Compared to sports fans, Esports fans are reported have much higher loyalty to the game. It has to be admitted that games provide a faster and easier way to gain self-confidence and self-satisfaction. Fans also feel more involved as they have the same access as those game stars they are craving for.

More desktop research reveals that there does exist a typical type of esports fans. Surprisingly the diversity among esport fans is not significant. Male fans occupy about 70% of esport marketing. In average , each esport fan would follow more than 5 games at the same time. Compared to other sports,more than 60% esport fans are game players. In game consumption is prevail. In most cases they would pay for tools and privileges in the game to pursue higher level of satisfaction. A fan of certain player or a team would purchase  associated products such as costumes. Team/Player are always considered as a brand when it come to marketing.

Competitive Analysis

  • Good Interface Design
  • Easy Navigation
  • Full Resources
  • Update Ontime
  • Micro Interaction Missing
  • Lack of Match Information
  • Snapping and Swiping effect are not sensitive
  • Time Zone settings are missing
  • Latest Match Information
  • Visual Design elements are attracting
  • Notification for game update is great
  • Prediction and voting system while watching the game
  • Almost no feedback while using
  • Article layout and loading is not ideal
  • Single function – No news feed is included
  • Score detail is missing
  • Real time Game Suggestion
  • Visual Design
  • Provide game news and team news
  • Single function – No news feed is included
  • Single Game
  • Famous Stream living app!
  • Micro interaction is very well done such as – double tap for chat
  • Easy to navigate
  • Switch from different stream living roos is hard
  • Connection unstable
  • Didn’t build a good bridge between gamers and fans

Brainstorm & Sketch

Font & Color Language

Leaving most of gamer a sense of “hi-technology” “cool” “fancy” impression, esports always comes with combo of bright, high-saturation and brightness color and a dark calm color , which is also generating high contrast.

Considering most of targeted users are young male, dark navy blue is chose as background color for the default theme.  In order to create clear vision, white is chose as text and title colors.  Another high contrast is generated by bright blue and bright pink.  Bright azure is always linked with the sense of cool and high-tech while bright pink is always the representation of mysterious.

User Interface Element

Basic icons are designed with the color palette including esport related elements.


Based on the observation of esport fans, their daily activities could be divided into three categories – following news, discussion and consumption.

Mainly news in esports field include game updates released by company, latest events host either officially by game or unofficially by players or by forum and  Team and player news. We hope the operating team would be organizer of events and activities to maintain user loyalty. Inside news section, one of main function of the app is broadcast living games and online discussion, which creates a feeling of being present at the match.

Game and Team pages inside news section to provide quick search and introduction if the user is fan of a team or a player. Users can follow them to get latest updates, event and activities.

Forum has the basic function of reading, viewing, discussion and social.

One interesting finding about the mall is that after establishing a stable fame for the app, users in the app would identify themselves as loyalty user group. By that time, Mantis itself could become a brand. The existing of the mall promises stable income outside of advertisement incoming. Fans can also purchase products from multiple games at the same time as well.

The primary control tab is placed on top right corner . It allows users tos witch from those three sections – news, forum and mall. Horizontal switching effect would happen when user taps the tab.

There’s always a search button on top left corner which allows users to search in entire site. Filters are applied before searching.

Each player would has his own page including brief introduction and performance. Ranking is always the primary instruction for game performance so it will appear at front as well. A sliding bar is placed on the left and provide switching function between pages. Recent section contains latest news, activities and awards of the player. Highlights is operated by player’s fans uploading great performance video record of the player.

While the streamlining video would took most of the page, there would be real time discussion underneath the video as well as real time data analysis of this game. More details about the game would jump out on clicking. Different types of game has different information to show such as how many towers have been taken, kills and death, etc.

Most frequently visited game would have its logo placed on frontpage for those loyal game fans. It serves as a filter so that users could only see related news to the certain game.

Each Team has its own page as well. Team page will include team members, news, matches and performance analysis for recent games.

On the frontpage for forum, there would be fast access to most frequently visited game  forums. Based on user’s view history and post, the topics and recommendation on front page would be sorted by specific algorithm.

Posting and replying process is designed to be easy for tablet users to express their thoughts.

Merchants always have various methods to promote their product and so should be Mentis’ mall. Best selling and New arrival are always the easiest way to promote products. We allow users to create their recommended products list as user’s collection so that people following same game, same team or same player could share what they get. Based on browsing history and sales, editor will launch editors’ collection each week as well.

Product Page contains a sub tab that users could wipe left and right to review its detailed description, other user’s review and photo taken by buyers.

Check out process is made very easy once users have saved their payment and shipping information.

Reflection and Take Away

  • After the topic and direction was determined, it’s nice to conducting observation if your object is quite prevail.  However, too many qualified objects made me confused at first. There’s no doubt that each user has different pattern. The most interesting experience is to balance the pattern detail you get from multiple potential users.
  • As for Prototype, I chose to use Invision Studio mainly because it’s a really powerful and decent rapid prototype tool (as well as it’s new released :)). The experience is quite different from prototype with code – By naming the sketch file tidy and clean, most of the animation is generated automatically. However, there’s a lagging despite the sketch file is very light. Hopefully the lagging issue would be resolved as Invision Studio launches new version.  Even for now, it’s a great tool for non-programming-knowledge designers to create innovative interactions.
  • Due to the project time and budget, what I really feel it’s missing is user test part. If time permitted, I would like to introduce it to users and get some feedback.
  • At last I would like to shout it out : Designing something in the field where you are interested is great!!

Updated – 2018/9/20

Shopping Cart