How I would design Team Liquid
How I would design Team Liquid
How I would design Team Liquid
Team Liquid are the most successful team in esports history with millions of fans across the globe. However, their current website does not reflect what the organisation has achieved. I redesigned the homepage and made a protoype.
Team Liquid are the most successful team in esports history with millions of fans across the globe. However, their current website does not reflect what the organisation has achieved. I redesigned the homepage and made a protoype.
Team Liquid are the most successful team in esports history with millions of fans across the globe. However, their current website does not reflect what the organisation has achieved. I redesigned the homepage and made a protoype.
View the prototype here →
There's no question the Team Liquid website needs a makeover. Most people will be able to see straight away that the design is not aesthetically pleasing. However, I want to go beyond the surface and explain why things are wrong.
Hero section before
❌ Too much information is being displayed at once and the eye is getting dragged around.
❌ No hierarchy within the layout or typography.
Hero section after
✅ While still effectively highlighting the brand, I simplified the layout and created a clear CTA.
✅ Created a clear order for how the page should be scanned using font weight, size and layout.
Schedule section before
❌ The calendar gets lost within the rest of the page design.
❌ The filters for the calendar are not obviously clickable.
Schedule section after
✅ Designed the calendar to be the centre of attention and give more space for content.
✅ Filters are clearly buttons which improves UX.
✅ The calendar section design is on-brand instead of boring and generic.
Footer section before
❌ There is limited navigation options for the site with only social icons being shown.
❌ The logo is shown twice in close proximity.
Footer section after
✅ Clear website navigation options with separate columns.
✅ An eye-catching trophy ticker effectively represents the brand.
Interactions
The current website lacks a lot of interactions and animations. It's very static. Modern web design should include these features. However, using them in moderation is key. The new prototype has several clean interactions that all have a reason behind them.
Button hover animations that make you want to click them. Perfect for CTAs.
Ticker animations to space out how much content is shown at once so the page isn't busy.
Logo animations to increase how premium the website feels to use.
Video
Here is an animated video showcasing the new design. Animations like this are great for announcements or reveals, as they engage the audience a lot more. This is even more important with the current trend of video content.
View the prototype here →
View the prototype here →
There's no question the Team Liquid website needs a makeover. Most people will be able to see straight away that the design is not aesthetically pleasing. However, I want to go beyond the surface and explain why things are wrong.
Hero section before
❌ Too much information is being displayed at once and the eye is getting dragged around.
❌ No hierarchy within the layout or typography.
Hero section after
✅ While still effectively highlighting the brand, I simplified the layout and created a clear CTA.
✅ Created a clear order for how the page should be scanned using font weight, size and layout.
Schedule section before
❌ The calendar gets lost within the rest of the page design.
❌ The filters for the calendar are not obviously clickable.
Schedule section after
✅ Designed the calendar to be the centre of attention and give more space for content.
✅ Filters are clearly buttons which improves UX.
✅ The calendar section design is on-brand instead of boring and generic.
Footer section before
❌ There is limited navigation options for the site with only social icons being shown.
❌ The logo is shown twice in close proximity.
Footer section after
✅ Clear website navigation options with separate columns.
✅ An eye-catching trophy ticker effectively represents the brand.
Interactions
The current website lacks a lot of interactions and animations. It's very static. Modern web design should include these features. However, using them in moderation is key. The new prototype has several clean interactions that all have a reason behind them.
Button hover animations that make you want to click them. Perfect for CTAs.
Ticker animations to space out how much content is shown at once so the page isn't busy.
Logo animations to increase how premium the website feels to use.
Video
Here is an animated video showcasing the new design. Animations like this are great for announcements or reveals, as they engage the audience a lot more. This is even more important with the current trend of video content.
View the prototype here →
View the prototype here →
There's no question the Team Liquid website needs a makeover. Most people will be able to see straight away that the design is not aesthetically pleasing. However, I want to go beyond the surface and explain why things are wrong.
Hero section before
❌ Too much information is being displayed at once and the eye is getting dragged around.
❌ No hierarchy within the layout or typography.
Hero section after
✅ While still effectively highlighting the brand, I simplified the layout and created a clear CTA.
✅ Created a clear order for how the page should be scanned using font weight, size and layout.
Schedule section before
❌ The calendar gets lost within the rest of the page design.
❌ The filters for the calendar are not obviously clickable.
Schedule section after
✅ Designed the calendar to be the centre of attention and give more space for content.
✅ Filters are clearly buttons which improves UX.
✅ The calendar section design is on-brand instead of boring and generic.
Footer section before
❌ There is limited navigation options for the site with only social icons being shown.
❌ The logo is shown twice in close proximity.
Footer section after
✅ Clear website navigation options with separate columns.
✅ An eye-catching trophy ticker effectively represents the brand.
Interactions
The current website lacks a lot of interactions and animations. It's very static. Modern web design should include these features. However, using them in moderation is key. The new prototype has several clean interactions that all have a reason behind them.
Button hover animations that make you want to click them. Perfect for CTAs.
Ticker animations to space out how much content is shown at once so the page isn't busy.
Logo animations to increase how premium the website feels to use.
Video
Here is an animated video showcasing the new design. Animations like this are great for announcements or reveals, as they engage the audience a lot more. This is even more important with the current trend of video content.
View the prototype here →
2022
Web Designer
Web Design
2022
Web Designer
Web Design
2022
Web Designer
Web Design