T1 Website Redesign by Yoann SavignyT1 Website Redesign by Yoann Savigny

T1 Website Redesign

Yoann Savigny

Completed work

UI Designer

UX Engineer

Web Designer

Figma

Webflow

Events

T1 Website Redesign

Bringing a dynasty's digital presence to life

📋 Project Overview

Client: T1 (Hero Concept Redesign) Role: UI/UX Designer + Developer Duration: 6HRS Tools: Figma, Photoshop, Webflow

🎯 The Challenge

T1 is a 6-time world champion League of Legends organization with one of the most legendary rosters in esports history. Yet their website felt... safe. Static. Forgettable.

The problem? Their digital presence didn't match the energy of their legacy.

The site felt like it was doing the bare minimum and not making you FEEL the sheer weight of their aura.

🔍 Research & Discovery

What I Found

Current Site Issues:

Minimal interactivity and engagement

Hero Section fell flat; just a video playing in the background.

Player profiles lacked personality

No motion or energy

Didn't leverage T1's iconic brand typography effectively

User Goals

Fans want to:

Feel the hype and legacy of the organization

Connect with their favorite players

Relive championship moments

Access news quickly

T1 needs to:

Build brand loyalty and emotional connection

Attract sponsors and partners

Showcase their competitive dominance

Convert casual viewers into dedicated fans and showcase what their subscription offer

💡 The Solution

Design Principles

1. Legacy in Motion Every element should reinforce T1's championship pedigree through dynamic animations and bold visual hierarchy.

2. Dark & Dominant Embrace a dark UI that feels premium, gaming-native, and allows the iconic red to pop.

3. Interactive Storytelling Transform static content into experiences—hover states, scroll animations, and micro-interactions throughout.

As all I had time for was a quick hero section redesign; that's what I did.

🎨 Key Features

1. Hero Section: "Legends Aren't Born. They're Forged."

[ADD SCREENSHOT/MOCKUP HERE]

What I Did:

Full-screen cinematic hero with particle effects

Animated trophy silhouettes in the background

Bold typography that commands attention

Smooth scroll indicator with T1 branding

🎨 Visual Design

Color Palette

Typography

Motion Design

Micro-interactions: Subtle hover states with 0.3s ease transitions

Scroll animations: smooth scrolling + unique hero section transition

Loading states: Loading screen is trophies slowly being filled up

Page transitions: Smooth fade with directional slide

💭 Design Decisions & Rationale

Why Dark Mode Only?

Target demographic spend hours in front of screens, often at night. A dark interface reduces eye strain and creates an immersive, arena-like atmosphere that matches the competitive gaming aesthetic.

Why Focus on Legacy?

T1's greatest asset is their unmatched history. Every new fan discovering T1 should immediately understand they're witnessing the greatest dynasty in esports.

🎓 What I Learned

Technical Skills:

Learned more about GSAP

Challenged myself by making it a time challenge from conception to finished hero section.

Design Thinking:

[What surprised you during the process?]

[What would you do differently?]

Personal Growth:

This project taught me how to think on my feet, sometimes designers don't have the luxury to spend time creating and making it perfect, but just because it's not perfect doesn't mean it can't be great.

As they say "quick, cheap, or good, pick two" :)

🔮 Future Enhancements

If I had more time, I would add:

Player streaming integration showing live Twitch feeds, let the fans connect.

Trophy lift highlights and key plays, get the fans hyped.

Fan wall with community highlights and cosplay.

📸 Process Showcase

Above is the hero section we're working with; just a video background playing of them winning their latest trophy. Cool, but not 6 time world champion cool.

First, I prototyped with different stylescapes and ended on this iteration.

Added in the translated hangul of their hero section text, but it didn't hit right and felt off-key.

After finalizing the design, all that was left to do is code and add in the micro-interactions. Easier said than dome but totally possible within 2 hours.