Anna Sham

Patch.gg

Timeline: 2 Weeks | Role: Visual Design, Development

Introduction


Patch.gg is a mobile app designed for League of Legends players to access the character update database on their fingertips!

A patch (otherwise known as a new client version) is a modification to the game files of League of Legends. Every patch will contain one or more of the following materials:

  • New game content: new or remade champions, items, and skins.
  • Balance changes: changes made to even out the power balance between champions.
  • Bug fixes: changes made to correct unintended behaviour in the game.
  • Client/Backend/development changes: technology or configuration changes that go on behind the scenes.
  • Patch Notes: Riot Games Inc.'s official documentation of the changes made.


Why Patch.gg?


In addressing user needs for accessing timely and relevant information on balance changes to their favorite champions in League of Legends, Patch.gg aims to streamline the user experience. 

By eliminating the need to...

Navigate to the official League of Legends‘ patch page to access patch notes.



Reducing the steps needed to view previous or archived notes or relevant information.





Here is a demo video of how a player usually searches for the updated patch notes. 




The Big Problem & How I Solved It


Sometimes players want to know the best items to purchase before a match, or the best meta champions to play.  

During the user research phase, I conducted interviews with several players who engage with the game at least three times a week. I aimed to understand their approach to accessing patch notes online and their preferred sources for this information.

Participants described their methods, highlighting preferred sources based on reliability, comprehensiveness, and ease of access.

✅ Players’ Wants


Importance of champion changes, item updates,  game balance adjustments due to their direct impact on gameplay strategies.




Streamlined access to relevant information and clearer organization of notes.

New players wanted a comprehensive guide on champion mastery, including detailed information on champion abilities, item builds, and strategic gameplay tips. 


Takeaway #1

Users only focus on things that affect the way they play the game, especially on items or pathing changes.

“I look at things that affect me the most or things that affect the way I play the game. For instance, what and how those changes would affect my solo queue games.”


Prototype #1




Draft & Feedback #1

I wanted my users to test out the filtering system, and whether individual champion pages were useful.
After designing the first draft, I asked regular players to test my app with the Figma prototype.



  • Walk me through how you navigated throughout the app.
  • What was a feature/detail you liked?
  • What was a feature you wish was different?
  • What was annoying to you when you used this app?
  • If you were a new player, would you find this app useful and why?


Product Testing Takeaway

Through feedback and interviewing, 90% of the interviewees concluded that reducing the amount of filtering would optimize the searching process. 

*Optimized search by limiting the filter to role based (top, middle, jungle and bot)
*Optimized search by limiting the filter to role based (top, middle, jungle and bot)


Takeaway #2

“Organizing each subcategory catering to each champion’s role would be helpful.”

– Totally not Diamond Singed Player

Draft & Feedback #2


My interviewees indicated that it was not helpful when only one ability had a description, and if they were a new player, they would not know how those abilities would enhance or diminish the quality of gameplay.

⭐️ The biggest difference between draft 1 and draft 2 is the consistency of descriptions under character abilities. Draft 2 focused on the consistency of how the abilities were being displayed, and what type of information was important for new or experienced players.

Click arrow to view
Click arrow to view


Summary of Changes from Feedback

We optimized gallery viewing by simplifying the filtering options, and only hone into information that is crucial to what the player is directly looking for.




Design Challenges and Set Backs



In response to a pressing project deadline, I embarked on a swift journey to learn SwiftUI within a week while collaborating remotely with a developer via Discord, with just two weeks allotted for completion.

The development process commenced with coding the index page, serving as the app's entry point, followed by key frames such as the home, champion, and filtering pages, constituting the core structure of the app. Each page underwent iterative refinement (on Figma and code) to ensure optimal user experience and functionality, prioritizing access to champion-specific information like patch notes and general details.

Despite the challenges posed by time constraints and remote collaboration, the collaborative effort resulted in the successful delivery of Patch.gg, which is designed to provide comprehensive champion insights for players around the world.


MVP Design



Reflection

When designing for a diverse player base, it's imperative to embrace a multifaceted approach that considers perspectives from both seasoned veterans and newcomers alike. By actively listening and empathizing with the unique viewpoints of long-time players as well as those just starting their journey, we can uncover valuable insights that bridge the gap between experience levels. We recognized that the opinions and needs of long-time players are equally significant to those of new players, and made sure to hear their thoughts and opinions on how we approached Patch.gg. This approach ensured Patch.gg’s experience to cater to the diverse needs and preferences of players across the spectrum, (whether if you’re in iron or in challenger) and ultimately making everyone’s pre-game experience smoother.


Go to Previous Project




 

Patch.gg