The Challenge
Loti is a powerful bot designed to elevate moderation, boost interaction, and enhance community engagement. With a massive user base of 6.7 million users across 36,000 servers, their digital presence needed to match their scale and utility.
The existing website felt outdated and didn't effectively communicate the bot's unique value proposition. The design was static, the navigation was clunky, and it failed to capture the dynamic nature of the bot itself. Our task was to renovate their online identity, building a new landing page from the ground up that would stand out in the crowded Discord bot ecosystem.
The previous version of the Loti landing page
The Approach
We didn't just want to make a "clean" site; we wanted to make a memorable one. The Discord bot scene often suffers from cookie-cutter designs—simple grids of features, generic hero sections, and flat aesthetics. We aimed to break that mold by leveraging Next.js and Motion (formerly Framer Motion) to create an experience that felt alive.
Motion & Interactivity
We implemented custom marquees and fluid animations to guide the user's eye. Every interaction was crafted to feel responsive and premium. We utilized staggered animations for list items and smooth layout transitions when switching between tabs.
The new, redesigned landing page
Performance was a key concern with this level of animation. We optimized our Framer Motion implementation by using layout props judiciously and ensuring that heavy animations were only triggered when elements were in the viewport. This kept the site feeling snappy even on lower-end devices.
The Command Center
One of the standout features was the Custom Commands Page. Instead of a static list, we built an interactive interface that allowed users to explore the bot's capabilities intuitively. This wasn't just about aesthetics; it was about making the documentation as usable as the bot itself.
The custom commands interface we developed
We structured the commands into logical categories with instant search filtering. This reduced the friction for new users trying to understand what Loti could do, effectively turning the documentation into a sales tool.
The Result
The new site successfully differentiated Loti from its competitors. It provided a platform that not only looked professional but also functioned as a powerful tool for their community. The feedback from the client and their user base was overwhelmingly positive, citing the "premium feel" and improved ease of navigation.
Note: Since our delivery, Loti has undergone another redesign, but our work laid the foundation for their modern web presence.