Overview
*This is a personal project, not endorsed by Supercell
What I did
In this case study, I worked on designing screens to display battle statistics at the end of an attack for Clash of Clans. The main goal was to improve the user experience by providing valuable information to players about their troop effectiveness and gameplay. Upon sharing my design on Reddit, players expressed their interest in seeing this feature implemented into the game.How I did it
I first created a low fidelity mockup and gradually made it high fidelity using Figma and Photoshop by imitating the typography and button designs. Afterwards, I created a demo video using Sony Vegas, complete with sound effects, and shared it on the Clash of Clans subreddit for feedback.What I learned
This project familiarized me with UI/UX design principles for mobile games and showed me the importance of taking into account player preferences before implementing a new feature.Introduction
In this case study design for Clash of Clans, I created screens that display detailed battle statistics at the end of an attack. The screens show which troop and hero dealt the most damage, as well as the amount looted and type of damage dealt by all troops.
The aim is to improve the user experience by providing players with valuable information about their gameplay and troop effectiveness.
These battle statistics would not only benefit new players who are still getting the hang of attacking, but it would also serve as a fun and informational way for the general player-base to learn more about their attacks. Allowing them to appreciate the effectiveness of their troops.
This feature encourages players make adjustments to their army compositions and strive for a perfect 3-star attack. With the ability to optimize their strategy based on the analytics, players can transform a 1-star attack into a 3-star attack, and see their improvements in real-time. The rewarding aspect of this feature provides players with a sense of growth and accomplishment, encouraging them to continue improving their attacks.
Design Direction
Inspired by the informative and clean style of graphs from Wild Rift, I sketched out a potential stats graphs that displayed important statistics such as damage taken, damage dealt, and amount looted per troop.
Since Clash of Clans is only played on mobile devices, I decided to not add in a filtering system as it would make the interface more complicated than needed
Each type of graph is scaled based on the unit with the highest number for each type of data.
In designing the Advanced Stats button for Clash of Clans, I made sure to place it to the right of the existing Return Home button. This provides a sense of familiarity and becomes the next object players see in terms of visual hierarchy since players are already used to looking in that area of the screen for the Return Home button.
To draw players' attention to the panels, I opted for a pop-up design that appears on both sides of the screen. This way, the panels catch the player's attention and draw their gaze onto them as they appear.
The navigation/flow of the Advanced Stats was kept very simple as I wanted the player to be able to proceed to the next battle analysis screen for their heroes with just a click. From both the troop and hero analysis screens, the player has the option of returning home to their base at any time.
The detailed statistics at the end of each attack in Clash of Clans would benefit both new and veteran players in several ways. For new players, the information provides a better understanding of each troop's strengths and weaknesses, allowing them to experiment and learn how to improve their future attacks. By seeing the amount and type of damage each troop dealt, new players can identify which troops work best in specific situations and adjust their strategies accordingly.
For veteran players, these statistics act as a useful analytical tool to help them obtain more 3-star victories against stronger opponents or to master new attack strategies with different troop combinations. This information would help them fine-tune their tactics by identifying which troops and heroes are underperforming or excelling in different situations.
The goal with the addition of detailed troop and hero statistics at the end of each attack is to greatly enhance the gameplay experience for players of all skill levels.
While designing the low-fidelity wireframes, I conducted user interviews to gather feedback on how current players feel about the feature, with the goal of determining its usefulness and desirability. These interviews were conducted with 5 of my clanmates ranging from Town Hall 7 to 13.
The feedback from these user interviews were largely positive. Newer players felt that the feature would be helpful in terms of improving their attacking strategies, as it would allow them to better understand the performance of their troops and prioritize their upgrades. Veteran players found the feature intriguing and felt that it could help them challenge themselves and aim for 3-stars on difficult event challenges.
I also posted a video of the prototype on the Clash of Clans subreddit, the response was also overwhelmingly positive, with most players expressing that they would find the feature interesting and helpful. Although a few players were unsure if they would personally use the feature frequently, they believed that the majority of players would appreciate having the option to view their statistics in different scenarios. This feedback reinforces the potential value of the Advanced Stats feature in enhancing the gameplay experience for a wide range of players.
Iterations
Based on the feedback, players liked the changes and suggested adding spell damage, which I added to a separate frame along with pet damage. These tabs appear after the troop damage and hero tabs in order to maintain the focus on troop impact. To improve readability, I added the option to expand the smaller pet and spell tabs upon click.
Conclusion
In conclusion, this case study design for a Clash of Clans Advanced Statistics feature offers a useful tool for both new and veteran players. By providing detailed information on troop and hero statistics at the end of each battle, players can improve their attacking and defensive strategies.
The design choices made in this project such as button placement, information hierarchy, and animations provide a seamless and engaging user experience.
Overall, this case study demonstrates the potential benefits of incorporating an Advanced Stats feature in Clash of Clans after each battle as it provides players with a informative tool to help them improve their skills.
Takeaways
This project taught me about UI/UX design principles for mobile games, including the importance of gathering user feedback and creating low to mid-fidelity prototypes. I learned the significance of understanding user pain points before implementing a new feature to address their needs.
Thank you for taking the time to look through my case study, If you have any suggestions on how to improve this design or ideas for my next project, feel free to reach out to me through my Email or Linkedin!
Check out my other case study : League of Legends Item Set UI Redesign