Team Liquid is a leading global esports organization, consistently ranking top in competitive achievements, viewership metrics, and fan engagement. The organization employs 250+ professionals globally as well as other strategic partnerships across various industries.

Role: Visual Developer (February 2024 - Present)

Role & Responsibilities

As a Visual Developer in the "Fanhub" development team (10 remote members from all over the world), I lead the Webflow development and maintenance of teamliquid.com. Working closely with both product and marketing departments, my key responsibilities include:

1. Leading Webflow development and maintenance
2. Designing fan platform features and landing pages
3. Implementing UI/UX improvements
4. Contributing to application development
5. Managing Webflow CMS and supporting content team in it's usage
6. Overseeing smaller project lifecycles

Operating within a modified Scrum framework, I independently manage Webflow task prioritization and estimation in collaboration with the Product Owner.

Technical Skills & Tools

Core Technologies used

• Frontend Development: Webflow (Expert), Javascript, TypeScript
• Design Tools: Figma
• Development Environment: Neovim, GitLab, CI/CD
• Project Management: ClickUp, Agile/Scrum methodologies

Technical Achievements

• Contirbuted to a custom TypeScript utility library that powers dynamic content rendering and user authentication
• Implemented advanced Webflow integrations with external APIs and custom data sources

Day-to-day I mostly use Webflow, Figma, Neovim and Gitlab for my work. Our tech stack includes a custom TypeScript utility library integrated with Webflow for dynamic content rendering and user authentication. The library is version-controlled through GitLab and automatically deployed via CI/CD pipeline to our CDN.

We also leverage Webflow for prototyping more visually complex pages to test out the user experience and to give the development team some more context around the design implementation.

Technical Documentation

Created comprehensive Notion documentation covering:

1. Webflow project details, explaining all the components and other parts of the build, so that the team is able to make changes to the project easily when I'm away.
2. CMS guidelines for Webflow CMS collection for content & marketing team. Including best practises, text (min/max characters) and image (format/resolution) requirements.
3. Detailed design implementation guides, explaining for the development the Figma designs in great detail, so the developers have clear instructions how the design should work in different scenarios and edge cases.

For project management, the company uses ClickUp. We as a team use ClickUp as follows:

1. Anyone in the company can create a ticket to a global ClickUp Inbox, and the Fanhub team goes through the inbox
2. When necessary, our development team creates tickets to our teams private Inbox. The team grooms, refines and point the tickets, and plans them to a sprint once they need to be worked on.

Impact & Achievements

During my time at Team Liquid, I have driven significant improvements across technical implementation, processes, and team collaboration. Here are the key areas where I've made measurable impact:

Webflow Performance Optimization

When I joined the company, I identified several critical areas for improvement in the Webflow project, including code quality, performance metrics, and accessibility standards. The project was initially built with the Client-First framework, using Wized for API calls. Key issues included:

• Bloated CSS structure
• Unorganized interaction patterns
• Sub-optimal performance metrics
• Limited accessibility compliance

I wanted to rework the project with MAST framework, as I find it better in many senses. It has lighter class system, a built-in layout mechanism with rows and columns, and overall more developer friendly approach to building Webflow sites. I was able to convince our team to migrate by building a case, listing all the benefits and trade-offs.

After leading the migration process, I achieved several significant improvements:

• Improved performance through CSS optimization and removal of unnecessary JavaScript
• Created an organized library of 30+ reusable components, reducing development time and increasing maintainability of the project.
• Implemented a standardized naming convention for interactions, improving readability and team collaboration
• Reduced animation-related JavaScript by transitioning to CSS animations
• Improved accessibility by following best practise like using relative units, optimizing assets and using helpful attributes like aria-labels.

I also proposed a solution to move away from Wized, as our use-case wasn't worth the performance issues that caused or the prize we paid for it. Instead, I wrote custom solutions to fetch the external data and render it on the page.

Key Business Impact:

• Launched 20+ high-converting landing pages.
• Successfully migrated critical pages from React to Webflow, reducing maintenance time.
• Launched a new revenue-generating micro-site for training facility rentals, contributing to a new business vertical
• Reduced software costs by opting to use custom written solutions instead of Wized.

Design work

On top of designing landing pages, micro-sites and all Webflow work, I have been heavily involved in UI & UX design work for our fandom platform. We recently made a massive update to the experience by releasing a new "Quests" experience, where I contributed to the project by design and prototyping work.

I also wanted to start a better documentation culture for design work to make it more easy for the developers to grasp everything seen in the designs. Screenshotting components, explaining every detail and their function, had a great impact on how fast we managed to build the new project. The developers were thrilled to have this written documentation and less guesswork than before. Since starting this with the "Quests" project, this has become a standard procedure for the team.

Professional Growth

Key learnings from working with large-scale teams:

1. Communication skills are maybe the most important skill to master and practise at this scale. There's so much information shared between different channels and conversations, it's crucial to learn how to keep track and push things forwards.
2. Documentation is great. Things said in the meetings get easily forgotten, so it's important to write down everything needed for the future. Writing documentation also helps you think through the problems in more detail and see the cracks than just discussing.
3. Asking for help is not considered weakness, but collaboration. Most of the time, it's far more efficient to ask for a hand if you are swamped in work or don't know something.
4. Be a good listener. Communicate effectively. The more smaller you can reduce your point or question, the more likely people will give you their thoughts.

This role has opened up many possible paths to take my career into; Product management, full-stack engineering and design engineering are all interesting paths for me in addition to this no-code path I've been currently on.