Lead UI / UX Designer

Designed the StarCraft 2 interface to be clear, engaging, and intuitive.
Role: Lead UI / UX Designer, interaction design, usability, cross-function collaboration

Design Process

Discover

Ideate

Design

Collaboration

Cross-functional Collaboration

Crafted the design vision and coordinated a large, cross-disciplinary team to bring it to life.

  • UI Designer

  • UI Artist

  • Technical Artist

  • Developers

  • Producers

  • 3D Artist

  • 3D Animator

  • 3D Scene Builder

  • Sound Team

  • Community Team

Scaling Collaboration

Coordinating across so many roles was challenging, but the results made the extra effort worthwhile.

Teams Invovled

  • UI Designer

  • UI Artist

  • Technical Artist

  • Developers

Teams Involved

  • UI Designer

  • UI Artist

  • Technical Artist

  • Developers

  • 3D Artist

  • 3D Animator

  • 3D Scene Builder

  • Sound Team

Interaction Design

Pain Point

One of the biggest pain points for players was the sense the game lacked a community, caused by low activity in chat channels. This stemmed from both the UI design and the algorithm that populated the channels.

Personas

Leave-me-alone guy

Who: Doesn’t like to chat.
Findings: Prefers playing solo, little social interaction.
Thoughts: Easy to accomadte
Solution: Give them a way to leave chat.

TV-noise guy

Who: Similar to those who are alone but have the TV on
Findings: Enjoy watching text fly by
Thoughts: Likes passive engagement, can benefit from chat visibility.
Solution: Text can fly by without a background; doesn’t need to be fully legible or ADA-compliant

Watcher

Who: a lot of people
Findings: Large portion of the player base.
Thoughts: Potential to convert into active participants with better chat design.
Solution: Add a background for text to improve legibility, but keep it from taking up the whole screen.

Guys-who-like-to-talk guy

Who: Actively talks in chat.
Findings: Core social players we want to support.
Thoughts: Driving chat activity, most important persona for engagement.
Solution: Make chat tall and pinnable so it’s always visible.

Watchers can pin a chat box open to easy to read, persistent text.

Text on the bottom right and scrolls by as users talk for TV-noise guy.

Guys-who-like-to-talk guys can make the chat box take up the whole screen. The box doesn’t hinder navigation because important menus are one the left.

More UI Examples

RESULTS

YouTube comments show user excitement over some upcoming UI changes over social features and content for casual personas.