[ do scoll ]
_overview
As a senior software engineer at Activision Blizzard, I was a primary engineer on a major initiative to redesign and rebrand Battle.net. A big part of this update was updating our user experiences to be ADA and WCAG 2.1 compliant. I was fortunate to be involved with this initiative as well as many other on several business-critical products such as: Login, OAuth, Account Creation, Account Recovery, and a social REST API. 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
- Vue.js
- Docker
- Kubernetes
- AWS
- REST
- 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 more accessible by making them WCAG 2.1 compliant.
[ 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 ]
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 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 ]
[ 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! ]
[ New landing page for our Account Recovery service ]
_the_team
- 2 Engineers
- 1 Designer
- 2 QA Engineers
- 1 Product Manager
- 1 Project Manager