Project Breakdown
Why redesign Team Select?
- When designing Rift Raids, it was important to add restrictions and conditions in team compositions to help make the feature engaging and compelling. We needed to account for a way to communicate these restrictions and conditions in a straight-forward way
- Rift Raids also added the use of potions for individual Guardians as a way to power them up. We needed to add that functionality
- The UX team wanted to improve readability and hierarchy as much as possible without removing critical information
- Players had been asking for a way to select which Guardian was the Leader of the team
Goals
- Break down the key interactions of the screen and improve the hierarchy
- Add new functionality of potions
- Improve the way we communicate restrictions and conditions
- Improve how we communicate Team Power
- Account for different types of users. RPG players that like to dive deep into character kits and casual players who just want to progress through the game
Approach
Evaluating the current design
- Communicating Team Power could be improved
- Cleaning up information in the slots: The most important piece of information is Power as it represents how strong a Guardian is, including rarity, level and rank
- No way to select which Guardian is the leader. It always defaults to the middle slot which can cause frustration around selecting/unselecting Guardians
- Consistency pass on iconography around buffs and restrictions
- Main CTA should be more prominent
Understanding the screen’s functionality
- Understanding main decision points:
- Primary: build a team strong enough to win an encounter
- Secondary: understand different buffs and restrictions
- Secondary: dive deeper and view different Guardian and enemy skills
- Adding slot specific restrictions and conditions
- Adding the use of potions fro Rift Raids
- Allowing players to choose the leader of the team
Design constrains
- Using 1 screen for different game modes. The screen should be versatile and all encompassing
- Being able to access information about Guardian skills, enemy skills, encounter buffs and restrictions
Design
New Team Power bar
- A more graphic and intuitive way of representing Team Power
- The bar indicates the combined power of all the Guardians in the team
- Each section represents how a player is likely to win or loose an encounter
Timer Updated buffs, conditions, and restrictions UIStates
- Creating a symbol system that represents different conditions and restrictions in encounters and slots
- Icons can be used in different context like slots, encounter information, and map view
Slot updates
- Simplify the top information of the Guardian to only show Power and role
- Communicate if a Guardian has it’s power buffed
- Add the ability to select which Guardian is the leader
- Include restrictions and conditions
- Include the ability to add Rift potions to a selected Guardian
Side Panel updates
- Improve the sorting of the Guardians to show the most useful Guardians at the top, sorting by restrictions, conditions, and power level
- Clearly show what Guardians are being buffed to reduce cognitive load
- Use of the conditions/restrictions icons in the Guardian portraits and the warning messages
- Larger CTA
Rift Raid Potions
- Communicate that Guardians can have a limited number of potions assigned to them
- Easy access to inventory of potions
- Show if potions have already been assigned to other Guardians
- Show how potions affect Guardian power
Conclusion
Challenges
- Working with very limited constrains resulted in small incremental changes instead of a full overhaul of the screen
- Adapting the current design to meet the new requirements required compromises in the design
- Working closely with other departments to account for different requirements
- A comprehensive breakdown of the screen and how players use it was key
Learnings
- Understanding that screens are never “final” and can always be subject to changes and updates was the right mindset
- Making sure to have all the requirements before starting the redesign prevented a lot of edge cases and changes in the development period
- Having a thorough documentation was important to communicate all the different components and their different states
