Taking on Team Builder - Part 2

Designing for Real-Time Social Interaction and Sportsmanship

My name is Weszt Hart and I'm a UX designer at Riot Games.

In Part 1 of this series, I talked about the problems we were trying to solve with Team Builder, the goals of the feature, the UX design process, what we learned from early explorations, and our initial design principles.

In Part 2, I’d like to describe a few of the design tactics that put our principles into action and helped solidify the overall experience.

Provide comprehensive feedback

With up to five players and the system performing different and critical tasks simultaneously, it was crucial that everyone always knew what was happening.

We scrutinized the flow, looking for all the places where feedback would be needed. From the player slots...

… to the minimap...

… to the chat log...

… and so on.

Providing comprehensive feedback did a lot to build confidence in the system and established trust between players.

Principles followed: Let the player control the flow.

Illuminate the path

Players never had to guess what the next step was because anything that required their immediate attention was within a green glowing box.

To help these interactive sections stand out, we removed borders from anything that wasn’t interactive. This set expectations and improved clarity. Consequently, this is why there are no distinct lines around the minimap and chat log.

Principles followed: Let the player control the flow; Give players an obvious path.

Make the first action feel awesome

We wanted players to start the entire process with confidence, which meant making the first action feel like a success.

Notice the oversized bevel on the champion icon on the image below? That’s intentional. Turns out that the bigger bevel, the more powerful the button press felt. Started things off right.

Principles followed: Design for repeated use.

Don’t punish players for required steps

Players were required to choose a champion, role, and position – but if they didn’t choose one, we had to tell them they’d forgotten something. This felt terrible and didn’t feel very game-like.

After trying a number of different solutions, we realized that by allowing players to move past the required steps, we were essentially allowing them to make a mistake and then punishing them for it.

Revealing the required steps progressively solved the problem beautifully. Players never missed a thing and seemed much more confident in their decisions.

Principles followed: Let the player control the flow; Design for repeated use; Keep instruction to a minimum.

Reduce distractions

Despite our initial assumptions to the contrary, players had a more difficult time using Team Builder when they were shown all the player slots they were expected to fill.

By removing these and other unnecessary visual elements, we were able to decrease the amount of time players spent going through the process and increase their confidence doing it.

This is the starting state that proved most intuitive in lab testing:

Principles: Avoid interruptions and distractions.

Final thoughts on our design principles and tactics

I believe our team was able to make a more intuitive, enjoyable, and overall better product because of the design principles and tactics we used. Combined with a massive amount of iteration, collaboration, thoughtfulness, and attention to detail, we exceeded our own quality expectations.

The entire experience had a huge effect on me, instilling a firm belief in the role of the craftsmanship in UX Design. In the future, I hope to share more about what this belief means and how the methods we used have evolved into better ways to design for social systems like Team Builder.