[Concept] Valorant Collection UI Change

Posted by Steve

Friday, January 27, 2023 4:50 PM

Hey everyone! As Riot will release a seemingly infinite number of skins, banners, and buddies, I feel like the current design of viewable collections isn't scalable. Although Riot has added a filtering system since its release, this is still not scalable as we've now reached 100's of items and will inevitably approach the 1000's. With this in mind, I'd like to point out a couple of pros and cons of the current design.

Pros

  1. The current design emphasizes showcasing the selected item, given that it's centered and the largest element in the design.

Cons

  1. Single scroll takes far too long to find an item, even when filtered. A player should not have to click "next" or a button more than a few times to find what they're looking for.

Problem Statement

  1. How might we create a more convenient item location experience?

Solution

  1. Redesign the collection screen that is more conducive to a large amount of items.

1A: Equip Under Gallery

1B: Equip Under Gallery Mirrored

2A: Equip Under Item

2B: Equip Under Item Mirrored

Changes & Notes

  1. Rearranged the entire screen, although the selected item is still the largest element in the design.
    1. This new gun gallery allows the user to view more skins and find their desired skin without as many inputs.
  2. Added a scroll wheel for faster navigation for a specific item collection.
  3. Added a search functionality that quickly lets you find what you have in mind
  4. Some assets had to be recreated, so it won't look *exactly* like actual Valorant.

I've added a couple of different variations and mirrored versions of those two variations. Let me know your thoughts! I would love some feedback on this. (Riot if you need another Product Designer, please let me know :^) )

References

  • https://www.reddit.com/r/VALORANT/comments/10lvfjz/concept_valorant_collection_ui_change/
  • https://reddit.com/10lvfjz

More Like This