top of page
.png){kind=small}
Team Liquid
website redesign
client
Liquid Hacks was a was a 300-person, 36-hour hackthon hosted by Team Liquid, a leading worldwide professional esports organization.
project purpose
╰ Redesign Team Liquid's official e-sports website while retaining consistency with client branding.
╰ Implement new features and improvements to the site.
╰ Establish a more clean, modernized, and branded look for the site.
role
Designer on a team with 3 web developers
╰ UI/UX Visual Design, Mockups, Prototyping, Interaction Design, Wireframing, User Flow/Research
I designed and developed the web-flow and prototype of a redesigned version of their website. With a team of 3 other coders, we built a website prototype showcasing a possible reimagining of Team Liquid's main website.
tools
╰ Figma
timeline
╰ 36 hours, Nov 2020
problem.
Despite being one of the largest and biggest e-sports company in NA, there shows to be a lack of effort that was put in the development of this site making it seem very outdated, untouched, and not appealing to navigate or explore. With no clear focus, whether that be to promote the company's various e-sports activities, achievements, or merchandise, the site can be seen as quite meaningless if it promotes higher bounce rates.
problem
product.
╰ critique
In the process of finding a team, I pitched my idea to a team of 3 other coders who would be in charge of the actual build of the website entirely from scratch for the next 36 hours.
As the sole designer on the team, I was then able to relay to my team the 3 main issues I identified with the current Team Liquid website:
-
Little to no hierarchy: The hierarchy of the page is quite confusing, with a menu bar that is almost the mid-bottom of the page amongst other details, making it difficult for users to pinpoint where to direct their attention to first, second, and so forth since everything is thrown together side by side and little alignment planned. Information hierarchy is lost and there is lots of random blank spaces.
-
Outdated/not updated look: Just from a brief look through at the site, you can't help but get the vibe that the site was built ages ago and never updated to a more modernized look. While the main focus is on providing updates in blog/news fashion, the calendar schedule is hardly implemented with the most current games and competitions their teams are entering in which shows a lack of active updates to this site. The way things are displayed also look very 2000s and not with the times, especially for a large company specialized in computer gaming, you would expect more.
-
Lacking brand consistency: There are very few elements of Team Liquid's branding on the blog, and where they do exist, it's almost like you have to search for and scout them out. The detachment in branding can be stemmed from the lack of branding color palette usage down to the fact that their company logo isn't even placed in a visible location upon loading in, rather it's in a small corner of the mid-bottom menu bar with a huge Alienware sponsorship banner at the top (you would think this was maybe Alienware's site; again, lack of hierarchy).
Overall we concluded there were many various ways to improve their UX/UI.
product
user research.
╰ target demographics
On a time crunch, user research was brief. As a team, we figured that the purpose of this site is highly geared towards hardcore fans that are super into Team Liquid and more importantly, potential/existing sponsors.
The current site already harbors a huge focus on honoring and showcasing their current big name sponsorships, but they do it in a way that the site no longer looks like Team Liquid's site as it is just plastered with company logos all sized larger than the TL one itself.
With the key users identified as hardcore fans, sponsors, and the general public, I made note to design the new website with these audience members in mind and thought about how best to cater to each of their needs and how to benefit Team Liquid at the same time.
user research
process.
╰ exploring
Limited on time, I was able to rapid prototype some wireframes and user flow sketches to give to the developers to work on backend while I designed after taking inspiration from related industry sites.
Of all of the sites I looked at, I found great inspiration from Riot Games' League of Legends site (created on React) and their competitor NA team Cloud9's official site.
Both big teams, it was particularly interesting to look at a direct competitor of TL and just see how big of a difference there was in how they executed their website delivery. In comparison, Cloud9's site is incredibly modernized and up to date with the latest tournaments, partnerships, and news. The overall vibe from their site is very clean and easy to navigate, properly promoting their brand in different ways throughout the site.
I made sure to take note of all of the positives and negatives of these sites when I began to design.
process
╰ 36 hour plan
With only a limited amount of time to finish our project, our team had to carefully coordinate our tasks and deadlines within this 36 hours window. As such, to be both ambitious and slightly realistic, we decided on redesigning the following pages from TL's site:
-
homepage
-
news
-
partners
-
about us
-
players
homepage.
╰ critique
homepage
homepage.
╰ redesign
Click to enlargen.
news.
╰ critique
news
news.
╰ redesign
Click to enlargen.
partners.
╰ critique
partners
partners.
╰ redesign
Click to enlargen.
.png){kind=small}
about us
about us.
╰ critique
about us.
╰ redesign
Click to enlargen.
.png)
players
players.
╰ critique
players.
╰ redesign
Click to enlargen.
.png)
reflection
reflection.
╰ key takeaways
I have had previous experience working on a company website at my previous marketing & sales internship, but this was my first time I've worked on such short time constraint to provide results and actually got to work on the entire design of a site by myself with full design control with a team of 3 web developers that would attempt to make everything I was designing to the T.
My personal top takeaways from this project were:
-
While design is art, UX/UI has to take into consideration much more than aesthetics and display. The experience of working with the actual web developers on this time crunch taught me a lot about the limitations there potentially are, and how as I design, I have to communicate with the developers in making active changes in accommodating for these limitations and also for the purpose of improving UX/UI, not just making visually appealing pieces. Every decision in my redesign I make has to have a purpose.
-
Understanding who you want the audience to be catered for is critical in the process of reconstructing this site so as to prioritize information and how to frame that information. Knowing this fact helps guide the design in terms of what should be highlighted more in their appropriate locations (ex. tournament scheduling, merchandise, sponsorship logos, accomplishments, news).
-
Despite being a sole designer, my team was a critical part of the design process as well. With so little time to design and build, all 4 of us were incredibly ambitious in what we wanted to achieve, but having a team makes all the difference in providing each other support, but also reality checks in between when it came to how much we could actually get down design/coding wise in these 36 hours and reframing our project as we went along.
╰ what's next?
Following the hacakthon, all 4 of us have still been in contact. The most basic model prototype has already been built, and we hoped that Team Liquid would want to take this design off our hands and implement it themselves or have us do it, however, this hasn't happened yet, but we definitely are considering to privately re-pitch our project to them at a later time after we make further improvements to our prototype design.
bottom of page