UX/UI

Game

Art

About

Contact

UX/UI

Game

Art

About

Contact

UX/UI

Game

Art

About

Contact

League of Legends Client Case Study

Dead by Daylight • Aug 2023

Dead by Daylight • Aug 2023

League of Legends (LoL), commonly referred to as League, is a 2009 multiplayer online battle arena video game developed and published by Riot Games. I followed the League of Legends Brand Guidelines. And you can see the reference points from current game UI and explanations in the below.

RESPONSIBILITIES

Game Experience Design
A/B testing
Prototyping

TOOLS

Figma
Photoshop
Illustrator

Problems

Mockups

Solutions

Solutions

A/B Testing

Conclusion

References

Problems

Problems

Problems

1.Lack of Hierarchy: The page lacks hierarchy as both header levels share the same font size and weight, providing no visual distinction.


2.Lack of Consistency: Inconsistency is observed between the height of the input field and dropdown on the Set Profile Background Page compared to other pages. Additionally, the tracking of dropdown texts deviates from the established UI Kit and typography standards.


3.Lack of Sorting & Categorization: In the Dropdown, choices are currently sorted either by decreasing purchase date or increasing alphabetical order. This poses a challenge when highlighting older, rarer skins, as users must scroll extensively. Additionally, there is a need for improved distinction between skins and default/classic character options.


4.Lack of Distinction: A lack of distinction exists between the Save and Restore Defaults buttons, causing confusion for users. Although a hover effect is applied to the Save Button consistently, this creates further confusion due to ingrained user behaviors. To further enhance clarity, a "Restore Defaults" button with two choices has been introduced, and A/B testing was conducted to determine the final option.

Mockups

Mockups

Option A (Redesigned “Set Profile Background” Page with icon button)

Option A (Redesigned “Set Profile Background” Page with icon button)

Option B (Redesigned “Set Profile Background” Page with text button)

Option B (Redesigned “Set Profile Background” Page with text button)

Mockups

Solutions

Solutions

To address the lack of hierarchy, I have adjusted font sizes. The heights of input field boxes and dropdown containers are reorganized, ensuring that the tracking of the dropdown texts aligns with the rest of the user interface and typography. To tackle the issue of sorting and categorization, I have expanded the options within the dropdown and introduced separate navigation for a clearer distinction between skins and defaults/classics of the characters. In order to eliminate the lack of distinction, I implemented a "Restore Defaults" button with two choices. Additionally, A/B testing was conducted to determine the optimal option, providing a data-driven approach to finalizing the design decision.

To address the lack of hierarchy, I have adjusted font sizes. The heights of input field boxes and dropdown containers are reorganized, ensuring that the tracking of the dropdown texts aligns with the rest of the user interface and typography. To tackle the issue of sorting and categorization, I have expanded the options within the dropdown and introduced separate navigation for a clearer distinction between skins and defaults/classics of the characters. In order to eliminate the lack of distinction, I implemented a "Restore Defaults" button with two choices. Additionally, A/B testing was conducted to determine the optimal option, providing a data-driven approach to finalizing the design decision.

A/B Testing

A/B Testing

In an A/B test aimed at determining the selected UI version for a newly introduced "Restore Defaults" button, recurrent players (dedicating a minimum of 3 hours per week) were presented with two options. Option A featured design enhancements with a "Reset Defaults" icon in the upper right corner, while Option B displayed the "Restore Defaults" text in the same location. The control group, Option C, represented the existing interface. Among twelve participants, Option A secured a 50% selection rate, Option B collected 33%, and the control Option C received 17%. Based on these findings, adjustments were extended to the emotes page, reintroducing the "Restore Defaults" feature. This A/B testing methodology provides valuable insights into user selections, guiding decisions for the optimal UI version across various pages.

In an A/B test aimed at determining the selected UI version for a newly introduced "Restore Defaults" button, recurrent players (dedicating a minimum of 3 hours per week) were presented with two options. Option A featured design enhancements with a "Reset Defaults" icon in the upper right corner, while Option B displayed the "Restore Defaults" text in the same location. The control group, Option C, represented the existing interface. Among twelve participants, Option A secured a 50% selection rate, Option B collected 33%, and the control Option C received 17%. Based on these findings, adjustments were extended to the emotes page, reintroducing the "Restore Defaults" feature. This A/B testing methodology provides valuable insights into user selections, guiding decisions for the optimal UI version across various pages.

Conclusion

Conclusion

Conclusion

In summary, user experience challenges were addressed by fixing the confusion around headers , changing containers for consistency, decreasing time spent by adding dropdown options and navigation. Lastly to increase user engagement, restore default function's placement have been changed. This changes will help the LoL client to be more inline and cohesive across other pages of the games UI.

In summary, user experience challenges were addressed by fixing the confusion around headers , changing containers for consistency, decreasing time spent by adding dropdown options and navigation. Lastly to increase user engagement, restore default function's placement have been changed. This changes will help the LoL client to be more inline and cohesive across other pages of the games UI.

Reference Points Explained

Reference Points Explained

Conclusion

A. Previously, the "Restore Defaults" feature existed as a smaller icon button but was removed in recent updates without a direct replacement. Instead, a new function has been introduced, allowing users to delete an icon by dragging. It's crucial to note that this function only removes the emote from the player's "shown" emotes without causing permanent deletion. This could potentially confuse players who may associate dragging an icon to the trashcan with permanent deletion. While in many UI contexts, dragging files to the trashcan signifies permanent removal, in the LoL Client, emotes are only deleted from the displayed page and can be replaced.


B. This page serves as the players' customizable identity page and will serve as a key reference point for crafting the first and second tier headers, as well as the search and filter bar for the "Set Profile Background" Page.


C. In the client's "Settings" Page, attention was given to the placements of the "Restore Defaults" and "Done" buttons. These reference points were considered in the creation of new pages, ensuring alignment and synchronization with the user interface.


By utilizing these reference points, the goal is to factor in players' past interactions with the interface, fostering a seamless and user-friendly experience.

A. Previously, the "Restore Defaults" feature existed as a smaller icon button but was removed in recent updates without a direct replacement. Instead, a new function has been introduced, allowing users to delete an icon by dragging. It's crucial to note that this function only removes the emote from the player's "shown" emotes without causing permanent deletion. This could potentially confuse players who may associate dragging an icon to the trashcan with permanent deletion. While in many UI contexts, dragging files to the trashcan signifies permanent removal, in the LoL Client, emotes are only deleted from the displayed page and can be replaced.


B. This page serves as the players' customizable identity page and will serve as a key reference point for crafting the first and second tier headers, as well as the search and filter bar for the "Set Profile Background" Page.


C. In the client's "Settings" Page, attention was given to the placements of the "Restore Defaults" and "Done" buttons. These reference points were considered in the creation of new pages, ensuring alignment and synchronization with the user interface.


By utilizing these reference points, the goal is to factor in players' past interactions with the interface, fostering a seamless and user-friendly experience.

PS: This research is statistically non-significant due to the small sample size.
Disclaimer: This case study is a personal redesign to showcase my skills and has nothing to do with neither Riot Games nor League of Legends brands. As a person who enjoys League of Legends, by doing this redesign I have tackled a frustration I was experiencing.

Let's Connect!

I’m currently taking on new clients, and would love to hear about your project.

Home

Home

Let's Connect!

I’m currently taking on new clients, and would love to hear about your project.

Home

Home

Let's Connect!

I’m currently taking on new clients, and would love to hear about your project.

Home

Home

© 2024 Luna Sever

© 2024 Luna Sever

© 2024 Luna Sever