Background Image

MOBA Champion Website Redesign is Now Live

Published: December 10, 2020
Website Javascript Code Showing Redesign in Progress

This week we re-launched our MOBA Champion website! This update completely changed all of our code and hardware. Now, we can bring you much more functionality and an improved user experience! Furthermore, it will be easier to bring UI/UX improvements in the future.

Why Redesign our Site?

Our original codebase was becoming too large and difficult to maintain. Further, as a static site, we were limited with what we could do. We really wanted to bring more interactivity and complex functionality to our users to allow them to really make use of the wealth of LoL data we have. Unfortunately, we found ourselves limited in what we could build by that initial design decision.

So, we decided to redesign the entire application from the ground up with a focus on building a strong user experience.

The Website Redesign

We have moved from a static website to a much more functional and dynamic website using the Vue.js framework. You can see an example of the improved functionality on our LoL Champions page. We’ve added filtering and searching capabilities. As you can see, nearly every page has been improved!

Furthermore, this redesign has allowed us to provide more detailed statistics to our users. For instance, you can now filter build suggestions by position instead of grouping all champion builds together. This didn’t work well for champions like Ekko, who are played in multiple positions. As a result, the build suggestions wouldn’t be applicable to everyone. Now, they are dedicated to the position you select!

Further, each page should load much faster for our users. We’ve moved from shared Heroku hosting to dedicated AWS hosting. This change alone saw a 2x improvement in performance for our site! We didn’t expect such an improvement. After all, Heroku is hosted on AWS, but Heroku’s shared hosting was really holding us back. Expect a much snappier experience now. Additionally, as a Vue.js application, your browser should seamlessly prefetch pages to make sure page loadings happen almost instantly!

MOBA Champion Champions Page

What's Next for MOBA Champion?

We have lots of ideas for future improvements and will be releasing them over the next few months. If you have any feedback on the redesign, please feel free to leave us a comment below. We’re always looking for ways to improve our experience and bring more utility to our users!

Images Courtesy of Riot Games.