Taking on Team Builder — Part 2

Designing for Real-Time Social Interaction and Sportsmanship

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…

Player shots provided a lot of feedback in a small space.

… to the minimap…

Note the “grass” treatment to indicate the player is in the jungle (second from left).

… to the chat log…

The chat log kept a record of events and status.

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

If something required attention, the box glowed green.

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.

Only boxes with distinct borders contained interactive elements.

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.

The champion icon and button.

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.

One of the more “successful” approaches to telling players they missed a step.

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.

The first three steps of creating a team.

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.

In early prototypes, we showed all the players slots upfront.

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:

Removing anything distracting gave players more clarity and confidence.

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.