Website design for a league of legends startup

League of Legends (LoL) is one of the most popular online multiplayer games in the world, with millions of active players and a thriving esports community. The game is known for its complex character builds, where players must make strategic decisions about items, abilities, and playstyles to optimize their performance in the game. A new startup approached District-22 with a unique idea: to create a dedicated platform where League of Legends players could share, explore, and optimize their in-game character builds.

The client envisioned a website that would become the go-to destination for both casual and competitive players looking to enhance their gameplay. They needed an intuitive UI/UX design that allowed users to easily navigate through a vast amount of information, as well as a dashboard where registered users could save, modify, and share their custom character builds.

This case study delves into the process of designing the website and dashboard for this platform, focusing on creating a user-friendly, visually appealing, and highly functional interface tailored to the League of Legends community.

Project Goals

Our primary objectives for the League of Legends build-sharing website were as follows:

1. User-Centric Interface: The platform needed to cater to both casual players who might just want to copy a build, and experienced players who wanted to create and share complex character builds.
2. Engaging User Experience: We needed to create an engaging experience for users who would spend time not only browsing builds but also interacting with the community by commenting, rating, and sharing their builds.
3. Efficient Dashboard: The dashboard needed to be user-friendly, allowing registered users to track their builds, update them with new strategies, and share them with the community seamlessly.
4. Mobile Responsiveness: Since many gamers also browse on mobile while playing, the design had to be fully responsive across different devices to ensure accessibility.
5. Community Integration: The platform had to incorporate elements of a social network, where players could interact with others through comments, ratings, and discussions about their builds.

‍

‍

Research & Discovery

Before we started the design process, we conducted thorough research into the League of Legends player community, as well as other similar gaming platforms. Here are the key takeaways from our research:

• Competitor Analysis: We analyzed platforms like Mobalytics, OP.GG, and Probuilds, which offer build-sharing capabilities. These platforms provided essential insights into how build data is typically presented. However, we identified an opportunity to enhance user engagement by making the interface more visually appealing and interactive.
• User Personas: To better understand the target audience, we created personas that represented different types of players—such as beginners looking for simple, ready-to-use builds, and seasoned players who wanted to fine-tune their builds with advanced features.
• Game Complexity: League of Legends is notorious for its complexity, with over 150 champions and countless build combinations. Therefore, our design had to make navigation and searching for specific builds as simple and efficient as possible.

Design Process

1. Website UI/UX Design

The website’s design had to balance providing an extensive amount of information while keeping the user experience simple and enjoyable. We aimed to keep the layout clean and functional while adding visually appealing design elements that resonate with League of Legends players.

• Homepage Design: The homepage introduces the platform with a hero banner that features the latest or most popular builds, allowing users to quickly explore what’s trending. We also integrated a search function prominently at the top of the page, where users could search by champion, role, or patch version.
• Build Listings: Each build was presented in a card-style format, with the champion’s image, build title, and key stats (such as win rate, patch, and rank) clearly visible. We used vibrant colors and icons to give the cards a dynamic feel, appealing to the game’s visual aesthetic.
• Filter and Search Options: Given the vast number of champions and build possibilities, we designed a highly functional filter system. Users could filter builds by champion, role (top, jungle, mid, etc.), and even patch updates. The filters were designed to be simple but powerful, with collapsible menus and checkboxes to avoid overwhelming the user.
• Build Details Page: Each individual build page displayed detailed information such as items, runes, abilities, and gameplay tips. We used a tabbed layout to organize the information into easily digestible sections, ensuring users could quickly find what they were looking for.
• Interactive Elements: To keep users engaged, we integrated interactive elements like “rate this build” buttons, comments sections for user feedback, and a “copy build” feature that allowed players to quickly implement the build in their own games.

2. Dashboard Design

The dashboard is a key part of the platform, where users can create, manage, and share their builds with the community. The design focused on usability, ensuring that both novice and expert players could effortlessly interact with the system.

• User-Friendly Layout: The dashboard’s layout was kept clean and intuitive. We used a sidebar menu that allowed users to navigate between different sections such as “My Builds,” “Create New Build,” and “Build Analytics.” The user’s profile and settings were accessible through the top-right corner, providing easy access to account management features.
• Build Creation Tool: The build creation process was designed to be as straightforward as possible. Users could select a champion, choose items, runes, and abilities from drop-down menus, and input specific notes for each part of the build. We incorporated drag-and-drop functionality to make the process more interactive.
• Analytics and Insights: For more advanced users, we integrated an analytics section within the dashboard. This section displayed win rates, play rates, and match performance data for each of the user’s builds. This allowed experienced players to fine-tune their strategies and improve their overall gameplay performance.
• Build Sharing: Users could share their builds via a unique URL, and the dashboard also allowed them to upload images and video clips to showcase their build in action. This feature further fostered community interaction, as users could demonstrate the effectiveness of their strategies.

‍

‍

Design Elements and Visual Identity

Color Palette: The color palette was inspired by the League of Legends universe, using deep blues, purples, and golds to create a dark, moody atmosphere that is reflective of the game’s aesthetics. We complemented these colors with vibrant accents for interactive elements, ensuring key features stood out.

Typography: We used a modern, sans-serif typeface for easy readability across devices. Headings were bold to command attention, while body text was kept simple to ensure users could easily digest information.

Icons and Imagery: League of Legends champions have distinct identities, and we used character-specific imagery for each build. Custom icons were also designed for key build elements like items, runes, and roles, ensuring that even new players could quickly understand the visual cues.

Mobile Responsiveness

Given the growing number of gamers who access platforms via mobile devices, we ensured that the website and dashboard were fully responsive. On mobile, we prioritized simplifying the layout while maintaining the same level of functionality.

• Collapsible Menus: We utilized collapsible menus for mobile navigation to save screen space and provide an uncluttered user experience.
• Swipe Gestures: To enhance mobile usability, swipe gestures were integrated for functions such as saving, sharing, or rating builds.
• Mobile Dashboard: The dashboard was optimized for mobile by restructuring the layout into a single-column format, allowing users to manage their builds and view analytics with ease.

Results and Impact

The UI/UX and dashboard design we developed for the League of Legends build-sharing website achieved the following:

1. Increased User Engagement: The visually appealing and easy-to-navigate interface resulted in increased user engagement. Users spent more time browsing builds, rating them, and leaving feedback in the comments section.
2. Seamless Build Management: The intuitive dashboard allowed users to efficiently manage and update their builds, encouraging both novice and expert players to return frequently to refine their strategies.
3. Positive Community Interaction: By integrating social features like build sharing, commenting, and rating, we helped foster a positive and interactive community environment.
4. Mobile Usability: The mobile-optimized design ensured that users could access the platform from any device, leading to increased accessibility and convenience.

Conclusion

Designing the UI/UX and dashboard for this League of Legends build-sharing platform was an exciting challenge, as it allowed us to blend functionality with the visual style of a globally beloved game. Our focus on user experience, mobile responsiveness, and community interaction resulted in a platform that not only helps players optimize their builds but also fosters a thriving community of League of Legends enthusiasts. This project demonstrates how thoughtful design can elevate a gaming tool into a central hub for player interaction and strategy optimization.

4o

‍