0%
100%

Blizzard | MLG

Client:
Blizzard | Major League Gaming
Year:
2018
Project type:
Website, mobile and responsive mobile refresh, and redesign ideation
Project duration:
4 months
Role:
UX Designer
Contributors:
Solo and in collaboration with 3 UX Designers, 2 UI Designers and 1 Developer
Tools used:
Sketch app, Abstract, Zeplin, JIRA, Google Apps, notebook, pen
Visit Project:
Link

Overview

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.

My team was tasked with rapidly redesigning the MLG product / platform. Our challenge demanded we consider how to redesign the product to increase user satisfaction, social engagement, and conversion.

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.
YouTube Live Super Chats presented a potentially useful design pattern.
Right click image and open in a new tab to see full view.

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.

An excerpt from the working draft of our social engagement survey. We wanted to learn about user Esports viewing habits and social engagement behaviors, as well as what info our users looked for when viewing Esports.
Right click image and open in new tab to see full view.

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.

User flow for sign up and login on accounts.majorleaguegaming.com
Right click image and open in new tab to see full view.

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

At left, the original chat pop up / responsive mobile login. At right, the original desktop login
Right click image and open in new tab to see full 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.

At left, the current desktop login. At right, my proposed design. I wanted to keep consistent with conventions already proposed by other UX designers on our team in order to maintain a unified look across our platforms.
Right click image and open in new tab to see full view.
At left, the current mobile web and chat pop-up for a user to login. At right, my proposed design. In addition to my goals for consistency, I wanted to make this design more compact and in-line with newer protocols for logging in with username or with an API.
Right click image and open in new tab to see full view.
Mobile Sign Up input field states.
Right click image and open in new tab to see full view.

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.

First Time User Experience for the gamification of brackets & stats: Whiteboarding the user flow for our brackets game onboarding           
Onboarding overlay & page layout ideation: Sketching out an idea for how the onboarding overlays might fit into the flow of the page design.
Microcopy & mechanics ideation: Notes on onboarding overlay microcopy and mechanics to consider in our design.

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.

See my other work

The Commune (@Medium)

I participated in the 2018 SOLA/HACK design hackathon for South LA.

Bird Tour

We integrated a new self-guided tour feature into the existing Bird app.

Dragon Herbs

I redesigned the Dragon Herbs website to optimize customer conversion.