Battle.net

date_published

06/08/2021

12:00 AM

last_deployment

2021-06-08T23:44:00+00:00

project_type

work

[ do scoll ]

_overview

As a software engineer at Activision Blizzard, I was a primary engineer on a major initiative to redesign and rebrand Battle.net as well as begin making our services WCAG 2.1 compliant. I was the primary engineer working on this in my team and many of the services that we have built and maintain: Login, OAuth, Account Creation, and Account Recovery. These services are seen by millions of gamers around the world every day and are used by all Blizzard games and Battle.net services.

_tech_used

  • Java
  • Spring Framework
  • LESS
  • Docker
  • Kubernetes
  • AWS
  • REST
  • MySQL
  • Redis
  • Webpack 5

_more_details

This was really two separate major projects started at different times for different business needs. The first project was a major design refresh all Identity services. The primary focus however, was making our products accessible by making them WCAG 2.1 compliant.

The new WCAG 2.1 compliant login screen

[ The new WCAG 2.1 compliant login screen ]

The Battle.net and Online Services design team worked for weeks to research what changes needed to be made to be compliant with the WCAG 2.1 standards. Once their research was complete, I was assigned to completely update the front-end and follow both the new designs in Figma, but also use their research results as a guide. From there, I had to make engineering decisions on how to make our views compliant with different screen readers, add logical keyboard navigation, and ensure color contrast were accessible.

Some example views with the design refresh

[ Some example views with the design refresh ]

Probably the most challenging aspect of making our services accessible was implementing inline form errors. Some of these were handled in the front-end, but most of these were sent from the back-end either through async calls to REST endpoints or rendered through Spring MVC. All error handling, including the new inline form errors, also had to be read by screen readers in particular order. This was especially challenging for certain flows, but was able to accomplish this in all primary browsers and all error states.

The new rebranded and redesigned Battle.net login

[ The new rebranded and redesigned Battle.net login ]

The second project was another major redesign to rebrand all Battle.net properties. This was yet another total front-end update to which I was a primary engineer for. As with the last design refresh, I took advantage of a component library shared across many Battle.net teams. These design changes were done faster, more accurately, and more consistently across projects because each component was updated in the shared library while coordinating with engineers on other teams.

Some examples of the new rebranded design

[ Some examples of the new rebranded design ]

More examples, note the error state for the code input

[ More examples, note the error state for the code input ]

The new design was made to be more optimized, easier to implement in different environments, and continue to be WCAG 2.1 compliant. Many of these services are used not only in multiple browsers, but also native iOS and Android apps, and gaming consoles such as Nintendo Switch, Playstation, and Xbox. They are also used in-game for all of our titles: Overwatch, World of Warcraft, Hearthstone, Starcraft, and several other. This present several challenges when needing to support this many environments, but the new streamlined and global design makes much more possible.

Redesigns for days!

[ Redesigns for days! ]

New landing page for our Account Recovery service

[ New landing page for our Account Recovery service ]

_the_team

  • 2 Engineers
  • 1 Designer
  • 2 QA Engineers
  • 1 Product Manager
  • 1 Project Manager