Major League Gaming (MLG) is a professional Esports organization and a Blizzard Activision company. As a UX Designer, I assisted with the design of key experiences and features of their Esports product, as part of their goal to create the ultimate tournament companion. I worked on competitor and social engagement research, improving the login and sign up process, and the first time user experience flow for a proposed new feature.

Competitor research

Before the project began, I conducted an informal analysis of our major direct competitors identified as Mixer and Twitch. Once the project started, I explored this Competitive & Comparative Analysis in greater depth with other UX Designers on my team. We expanded our list of competitors to include more direct and indirect competitors, notably: YouTube Gaming, Facebook Live, and Periscope. Our findings showed …

Key takeaways

• MLG is uniquely positioned to cater directly to Esports fans, more so than Twitch, YouTube Gaming, or even Mixer. Those competitor platforms mainly served content creators and streamers, leaving Esports fans as a secondary audience with few features catering to them.
  ‍
• Among our competitors, Mixer had the cleanest, most aesthetically pleasing, and usable layout. The design uses a palette of highly saturated cool colors giving the design a playful vibe. This is paired with a dark background, which is favored by Esports viewers. The Featured content stream is placed prominently above the fold and, like all content streams, is very visually digestible and navigable. Secondary content streams are just below the fold but each stream is given adequate space. These points are relevant because users can easily pick and choose what they want to see and do.
  ‍
• YouTube Gaming had a unique chat feature in the form of Super Chats — pinned messages that had a duration limit based on dollar amount contributed by a member of the chat. We speculated this UI pattern could be useful to MLG users when applied to other, non-monetary, chat elements such as badges or other status and social engagement features.

Social engagement research

After the presentation of our competitive analysis, we were ready to move forward with the next stage of our project. I worked with the Sr. UX Designer on crafting user surveys and material for moderated interviews. We wanted to learn about the Esports viewing habits and social engagement behaviors of our users, so we could better serve their needs with our redesign. We also wanted to know what kinds of information our users were looking for when viewing Esports events, so we could prioritize the information that was most important to them.

Redesigning the Login & Sign Up user flows

After releasing the first survey and waiting for results, my team worked on an overall design refresh. I worked on a refresh of the Sign Up and Login screens for web and responsive mobile on accounts.majorleaguegaming.com, as well as for the native MLG mobile app. Login and signup is a vital gateway to access the site's full features, so it was important to design a flow allowing users to navigate through the process quickly and easily.

I started by documenting the existing user flow, to have a clearer understanding of what steps users needed to go through.

During my initial heuristic review, I assessed that the desktop web view needed the most work, followed by the responsive mobile view.

When refreshing the Sign Up and Login screens, I took my design cues from the work the MLG UX/UI team in Croatia had completed previously, such as the button styling, color palette, font face, and font styling.

I constrained my designs to keep existing functionality unchanged and only made cosmetic adjustments that would serve usability, legibility, and aesthetics, in alignment with patterns and styling established by the Croatia team. This would mean my designs wouldn't require a dedicated developer resource to implement and would remain consistent with the look of our current UX direction.

I presented my designs to my team using an annotated deck I could easily share with our developers. In this slide, I iterated on how to handle password confirmation. Instead of the password confirmation field we currently had, I employed a password show/hide text toggle so users could check their password at their discretion.

I spent several iterations presenting my designs and implementing feedback, making sure the design was as intuitive and user-friendly as possible before handing my work off to the UI designers on my team.

First time user experience for Esports stats & brackets

To determine the next feature to prioritize, my department participated in a short design sprint. We individually brainstormed and submitted ideas, then we chose the best 10 pitches. Our department was aggregated into groups and assigned to work each of these 10 pitches.

My group worked on the pitch named “[Esports] Stats, Brackets, and First Time User Experience”. This pitch was focused on engaging first-time users and increasing overall user engagement in Esports events broadcast on the MLG platform. The pitch consisted of:

• A web-based brackets mini game
• An onboarding flow for casual esports fans
• A separate stats viewing interface

I specifically ideated on the First Time User Experience onboarding flow.

Stats and brackets are such an integral part of sports fandom and they had been missing from MLG's Esports viewing experience for some time. Our design addressed that gap in user expectations and was particularly relevant to the needs and wants of our current users. The first time user experience flow would usher in budding Esports fans new to the experience and show them how to gain the most enjoyment and benefit from the brackets game.

Each team worked on ideating, designing and developing prototypes for the span of a day. We presented our designs and prototypes the following week.

Conclusion

While my contract with Blizzard came to an end, the work on this MLG project continued. My successful redesign of the login process proceeded to go through iterations and more testing. My team’s pitch designs will likely be used by MLG in the future for upcoming features.

My time at MLG was delightful and stimulating and I look forward to working with them again in the future.

‍

‍