01/03

Autofill

Next

02/03

Battleships

03/03

Connect:MI

I promise attention to detail and quality.

Passionate Front-End developer,
that loves creating intuitive interfaces.

Autofill

Case Study

Story.

There is a high chance you have heard about the game - League of Legends - the most famous MOBA (Massive Online Battle Arena). Riot Games- the makers of League of Legends - started as a small company in 2007 and have advanced to being the biggest and most impactful gaming company. In the beginning of 2017, the community had to go through some major changes of the game, which impacted many players negatively.

Change it - for the worse.

Riot Games is well-known for forcing updates that cause inconvenience, which bothered a big part of the community, my friend and me included. Both of us are passionate about webdevelopment, although we were quite inexperienced back then. The community had many discussions about the update, many of them on the social media platform "Reddit", which we actively used. Reading through many complains, we got an idea. To make it easier for you to follow - I will describe the update for you. The team consists of five members, normally - four of them split and move to three different lanes, whereas the fifth member focuses on helping every individual member. There are several different roles, one more efficient than the other in a specific lane. You always had the freedom to choose two roles, in which you felt the most confident with, until they decided to remove this well appreciated feature. The term we are using here is "autofilled". Now, whenever you get into the selection of your role and champion, there is a noticable chance you get autofilled. You get assigned a role you are not used to play and have much less experience with. If you are experienced and wiling to learn, you are able to play ten to fifteen champions at a higher level. If you are autofilled, it is very likely those champion are not available to play without having a big disadvantage. It's a lose-lose for the player, either way he will perform worse, so only the enemy has an advantage. People hate having their freedom hurt. The average quality of the games has decreased since this feature went live and now, they are desperately trying to make up for that mistake, by focusing more on community feedback, more quality of life updates and less major changes.

Don't forget the good things

Enough about all the bad things happening in the updates. People tend to notice negatives first, especially when it affects them in some way. That is the reason the community was so loud - it impacted everyone of them, but what was the reason behind Riot's decision for the update? Ten players are needed for the most played game mode - Summoners Rift. It is a map, where you play against five enemies. What this mean is - queueing up for a game takes time. This is not essentially long or awful for the players waiting. In a good day, you will find a match in 30 to 40 seconds, but sometimes it can be up to three minutes. This update brought something positive with it - players could join games faster, resulting in an estimate more games played. The best League of Legends players in the world had it much worse. The game matching algorithm is complex and is calculated using several different factors. The two biggest factors are your rank and the time you have been waiting already. That means that the best players are more likely to have higher queue times, as the task of finding a fair match is much harder for the algorithm to solve, this leads to high level players having to wait ten minutes or more to find a match. This was the reasoning behind Riot's activities, the matter that they changed the rules for every player in the game, just to improve the quality in high level games, is unfair for every other player.

Community means together.

My friend and I like finding problems to solutions, that is why we are passionate about webdevelopment, although I am more interested in different aspects of design. The community needed help. They were not familiar with the consequences of the update and had trouble keeping the fun the game provides. Our idea is summed up nicely this way We provide an overview of all champions, that focuses on helping the community find out more about specific champions, it also suggests trying them out based on their likings. We also offer a fast way to search for guides and statistics of the specific champion they chose using our web application. As we were brainstorming and finding creative ideas, we started discussing the needs for the project.

Efficient Dynamic

We are (still) college students, so what does that mean? When we started working on the project, we knew what we wanted. To give a feeling of interaction, we had to work with images. Images are very handy to visualize your content and keep the amount of information low. There is also one major drawback - images take up much space. Hosting a web server is cheap, that is for sure, but when does it start to get expensive? To find out the solution to our problem, we started researching. After reading through many articles, we were sure that we could not host the images of our web application - autofill.lol - on a server, as we were sure the traffic, when the product is finished, would surely shut down everything and be a fail from the start. Several days later, without a solution to our problem, we decided to take a look at how eagueoflegends.com handles their champion specific images. Efficient and dynamic are the two main terms to describe it. They used small images with very similiar URLs in their champion overview, which are linked to the big images, when the user clicks on the specific champion image, which is a really clever solution. So what we did - we asked Riot Games to give us permission to use these images in our small application, which they agreed to. In summary this means - Riot Games is hosting the images we need in their servers and have given us the permission to load them when necessary. The way Riot handled images in their website, made us realize what potential we can have with a database, that is used to store champion-specific data. Two of our biggest problems were solved.

Front to Backend

What we wanted and needed for the project was obvious, after gathering ideas, doing some sketches and discussing about tools to use, we decided on the main overlay of the site, which we would then write with HTML, CSS and Javascript as our Frontend and solely PHP as our backend. We would also need a database to store champion attributes, so we decided to use XML, as we have very few data and it's working well together with Javascript and PHP.