HTML5 Game Lobby Redesign

Tournament Feature Project

As part of the game lobby website revamp, I designed the UI for the new tournament feature. This includes creating a user-friendly tournament info page, engaging win pop-ups, and seamless in-game access. The goal is to ensure players can easily find and navigate tournament details, enhancing their overall gaming experience.

---

Landscape Mode Redesign Project

Existing Game Lobby Layout. 

I revamped the Game Lobby to enhance the landscape orientation. The previous landscape view on mobile devices was just a stretched portrait layout. My task was to add interactive elements, including motion graphics for icons.

---

Design Outcome

Layout Improvements:

• Main Menu Rail: Added a main menu rail on the left side with home, games, user, and language options. This rail functions like a drawer; clicking 'games' reveals all game categories, allowing users to navigate to specific games in the catalog on the right side.
• Floating Button Menu: Introduced a floating button menu on the right side for quick access to features like tournaments, Angpows, lucky bonuses, and app downloads.

---

Icon Animations

Icon animation created using After Effects, to be implemented in HTML5 using Lottie.

Final mockup for landscape and portrait mode.

Using Lottie:
Initially, we used Lottie for animations, but it was too graphic-intensive when running multiple animations simultaneously. We reverted to using GIFs for better performance and are exploring alternatives like Rive.