Kaindorf Games Website

Story

The Kaindorf Games e-sports website is used to manage tournament registrations. However, the website faced issues during the development and design process. Specifically, the rushed creation of mockups resulted in lower-quality screens. Additionally, the use of components and a consistent typography and color system were missing.

I analyzed this flawed system to identify areas for improvement and create a new UI. During the redesign, a brand definition was first established, followed by the creation of clear typography and color systems. Based on these new guidelines, I developed preliminary wireframes and mockups.

One major problem we faced when updating the platform was that we previously used a mixed approach, where the landing page for the Kaindorf Games Association was joined with the tournament platform itself. That resulted into a complicated update process and added complexity when adding new content to the website. Therefore we decided to split this approach into a landing page and a dedicated tournament platform. This project only represents the landing page.

Learnings

It’s worth investing time in proper planning and preparation. By defining typography and color systems upfront, significant time was saved during the design process. Using components and Figma’s Auto Layout feature also greatly simplified the mockup creation, allowing layouts and screens to be developed much faster and more efficiently.