U.GG for League of Legends
Considering the increasing use of digital games in normal life, it is necessary to look closely at the content of digital games. There is a considerable lack of professional analytics platforms in the market with complex datasets. We designed the U.GG APP based on web version to present the game stats while providing insights through a simpler, more interactive interface. An ideal game data analysis application should have features like assessing the content of each digital game and providing players with clear guidance or standards for choosing games that fit their needs and game experiences.
Design Objectives
-
The functions of the website are ported to the mobile client, including search, social, community, statistics, data visualization and other functions. The integrated system, which is more professional than competing products, can help high-level game users view multiple information and statistics on the same page, and the use of icons and visual charts ensures intuitiveness and aesthetics.
-
Based on our research and understanding of U.GG, we decided to follow the current PC structure and the layer of the common functions, and add the chatting, independently browsing the patch notes, edit user profile, etc., features as a different mode for the existing interface.
Color Scheme
Sketches
Low-fi Wireframes
Mock-up
Prototype
Functions Introduction
1. Discover
-
Tier List:
-
Always up-to-date, U.GG APP provides an all-rounded champion ranking with a data science approach for players to view real-time data of each champion. In the tier list, users can easily find the champions' win rate, ban rate, runes, summoner skills, skill priorities, and counter picks in the drop-down menu.
-
-
Champion searching:
-
Sorted 162 champions in the game by their initials, and supported search by name and title. The filter of our U.GG APP also supports users to filter and search by labels such as role order, rank, counter picks, etc.
-
-
Champion Information:
-
Besides the champion's name, location and tags, users can also view SP (skill points), EXP (experience points), descriptions, and growth attribute values on the page Info.
-
In the Build page, users can use the drop-down menu to restrict the position and segment and check the recommended runes, core items, skill priorities, and other information for the champion with the highest win rate in the specific place and segment.
-
The Data page shows the statistics related to the champion. In addition to the current version's league points (LP), pick, and ban rates, a line graph of the champion's win rate over the iterations of the patch is also provided for players to see how changes to the game have affected the champion's ranking. In addition, players will be able to check the win rate of what are the most formidable champions countering this champion to know the restraint relationship between champions in the same lane under the current version.
-
​
2. Data
-
Summoner Search:
-
Users can search different players in different regions by username by switching tabs and names. This function supports users to save players and view specific players' profiles till the next time they open the APP. The homepage shows the percentage of players in different ranks of the whole game and includes bar charts to represent the ranking of the users and their friends ranks.
-
-
Sommorner Information:
-
Profile: Display player's avatar, gender, rank, region, last active time, single and group rank, total win rate, most frequently played position percentage and commonly used champions.
-
​Match History: Displays information about the player's most recent matches, including game mode, win/loss results, champions used, kills, deaths, assists, and equipment on a brief page. Users expand and collapse the drop-down page with a simple click, which includes the champions, runes, and summoner skills used by the players in the match, as well as the exact number of kills, deaths, assists, and replenishments of each player; the total number of kills and deaths, money earned, and strategic resource points earned by the team also represent in the Match History page. In particular, the user can also see the player's individual KDA, troop count, money acquisition, team participation rate, and vision score for the match. This feature allows players to quickly find games and perform a preliminary analysis of their recent game history.​
-
Game Details: Users can access the game details page by clicking the "Show More" button. This page contains the win and loss results of red and blue teams. Also including each player's champion selection, rune and summoner skill, champion level, money gained, troop replenishment, number of kills, deaths, assists, KDA, and total damage dealt and taken data. The team with the highest economy, KDA, damage, and damage taken will be highlighted.
-
Player statistics: In the "Position" feature, the proportion of players playing different positions will be displayed in a pie chart so that users can quickly understand which positions the player played. The "Rank" feature shows the change of rank in single and double ranking and flexible group ranking modes in the line graph to analyse the up and down of rank. The "Most Used" feature lists the most commonly used champions, the player's win rate and the number of won and lost, kills, deaths, assists, KDA,CS (Creep Score), damage, and total damage sustained.
-
​Most Played With: List names and avatars of the summoners that players play with most often, the number of games played together, the number of wins and losses, and the win rate so that users can more easily understand the social situation of players.
-
​
3. Community​
-
Community:
-
includes articles in three categories: up-to-date patch notes, news, and walkthrough. The home page displays the article's title, summary, and illustration, including the author and release date. It provides a Save function that allows users to save the article anytime. On the details page of the article, users can scroll down to view the full article and share it on social media.
-
4. Chat
-
Chat:
-
The chat section allows users to start private conversations with friends and supports sending voice, emojis, and pictures. In the friend list, users can see the last active time of their friends. Users can open their friend's profile to view their information and game history by clicking on the friend's avatar.
-