Blizzard Support Portal
My Role
Visual Design, User Testing, Icon Design, Animation, Prototyping, Development
Objective
This web portal was designed to assist Activision Blizzard game customers in quickly solving their issues and get them back to their game.
A ground-up overhaul was required to bring the interface to modern design standards. The site offers useful resources such as self-service automations and knowledge-base and community driven articles with regards to account, technical, and gameplay related issues. Should these solutions not help, escalating the issue to a customer service representative should be simple and straight forward.
Style Tiles
The previous rendition of the Blizzard Support portal did not adhere closely to the company’s brand guidelines. To address this, the first exercise was to create style tiles to illustrate various design directions we could apply to the whole website.
Component Libraries
The next step was to start building component libraries and style guides for other designers and developers to use as patterns. This ensures consistency across the site which is critical.
Prototyping and Animation
Next, these UI components were applied to low fidelity flows created in collaboration with UX designers to transition them into high fidelity mockups.
Micro interactions and animations were then created between screens to build out a working prototype. This helps illustrate the design flow to various stakeholders.
Design Specs
In order to reach the level of fidelity the design team was seeking on the final product, detailed design specs were provided to the engineering team.
Reporting
Looking at the transformation to the newly redesigned website, several key goals were reached. Reports show an increased success rate for customer self-services and has resulted in less company contacts. This resulted in drastic company cost savings.
Prototype
Being able to showcase screen to screen flows and to convey desired microinteractions and animations is helpful for developers to understand implentation.
Desktop Contact Flow: Link
Mobile Contact Flow: Link
Next Steps
There are more ongoing initiatives for the website today. This includes embedding the support model within in-game experiences, designing recommendation systems with machine learning algorithms, and updating component libraries on the design to code environment to assist developers. There is also a growing effort into making the site compliant with regards to accessibility and catering to those that require assistive devices.
