Brand & Product Designer
based in Seattle


UX/UI

Patch.gg


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





01
What are Patch Notes?

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.





02

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 league’s patch page to access patch notes.
- The steps needed to view previous or archived notes or relevant information.

Designing and Implementing features such as...
- Search queries and filtering options
- Showing relevant information regarding new updates
- Promotion for newer skinlines and themes etc. 


↑ Here is a demo video of how a user usually searches for new patches.









03

The Problem


Sometimes players want to know what’s the best item to buy before their ranked match.









04

The Solution


My design solution was to design an app to address the immediate issue of easy accessing the patch notes.
The Search Page
Organizes all champions and shows relevant character information.

The Character Page   
Displays comprehensive updates on champion abilities, item changes, and game balance adjustments.

Filtering System
Allows users to sort champions by lane and role.

Archive
Allows users to access and reference previous patch notes.

Recommendation System
Guides new players in their champion mastery journey, encouraging engagement and skill development within the game.







05

User Interviews


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.
05-B

Challenges


Difficulty navigating websites or locating specific details within patch notes.

Emphasized the importance of champion changes, item updates, and game balance adjustments due to their direct impact on gameplay strategies.

Expressed desires for improvements to enhance their experience, including streamlined access to relevant information and clearer organization of patch notes.

Regarding new players, participants emphasized the need for comprehensive guidance on champion mastery, including detailed information on champion abilities, item builds, and strategic gameplay tips, to facilitate their entry into the game effectively.








06

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.”

– Totally not Challenger Rengar player








07

Prototyping



Figma Prototype Demo






08
Draft & Feedback #1



I wanted my users to test out the filtering system, and whether if individual champion pages were useful.
08-B

Product Testing


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?






08-C

Product Testing
Takeaway #1


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)







09

Takeaway #2


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

– Totally not Diamond Singed Player







09-B

Draft & Feedback #2


The biggest difference between draft 1 and draft 2 is the consistency of descriptions under character abilities.

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.
(Click on arrow to view)

*Focused on the consistency of how the abilities were being displayed, and what type of information was important for new or experienced players.







09-C

Takeaway #3


“I am a new player, I got overwhelmed by the information and don’t know what to look out for first.”

– Certified Iron Master Yi Player








10

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.


Final Draft






11

Design Challenges + Setbacks



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.

A screenshot I took from XCode!






12

MVP Design (Developed with SwiftUI)


Developed in XCode & Figma





13

Design Challenges + Setbacks

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.






14

Looking Ahead

Because of the two week time restriction, we weren’t able to develop all the features we wanted.
However, In Patch.gg ver. 2, I would like to implement

Navigation Bars

Explore page
(skins, events, news)

Champion pages
(mid patch data/items/ARAM balances/bug fixes etc)

Onboarding experience
(log-in/sign-up)

Favourite feature
(makes filtering way easier)

Valorant & TFT patch note






15

Project Overview







Let’s Chat






Anna Sham
© 2024 Anna Sham.