Blizzard Support Redesign
Overview
Blizzard's support website had not been substantially updated since the early 2010s. The number of users browsing our site on mobile devices had been increasing, Blizzard's game library was actively growing, and we knew it was already difficult to find content. It was time to do a deep dive into better understanding those problems our customers were facing and overhauling the entire website.
I led our UX research intern for user research, and partnered with the UI designer to develop the new look and feel.
My Role & Responsibilities
User research, competitive analysis, heuristic review, surveying, usability testing, information architecture, prototyping, and interaction design.
Outcomes
Fully responsive website resulted in a 18% reduction in mobile bounce rate
Noticeable drop in contact rates for several key contact categories
New visual aesthetic that matched the Blizzard brand
Planning The Design Process
The below process is a rough map of our timeline for completing the design portion of this initial effort. Throughout these months, I was continuously checking in with business stakeholders to get further buy-in on our proposed solutions and engineers to ensure the incremental updates were feasible to build.
Team Kickoff
To launch such a large initiative, I led an all-hands multi-day workshop to define our goals, better understand how customers navigate our product, and get a sense for the problems we want to tackle first.
With the team aligned on common goals and problems, we leveraged this information to inform our initial user research.
Working with our product manager and front-line customer service reps, we defined our product’s and users’ goals.
We observed and mapped out a new employee’s experience of playing one of our games and attempting to solve an issue using our website.
We clustered dozens of known problems and opportunities. Then everyone voted on which ones should take priority based on perceived effort and impact.
Data Deep Diving, Surveys, and Usability Testing
With web analytics, business metrics, and anecdotal stories from customer service reps, we had a good sense of the issues customers were experiencing. Next, I wanted to leverage a survey sent out to customers who had recently interacted with our website to get the most accurate opinions and self-reported behavior.
I led the task creation and moderation of several usability tests to better answer “Why?” we were seeing the previous data. Being able to watch how people used our product and having an open dialogue was invaluable. This gave a number of insights into known issues, and it uncovered new opportunities.
Based on the success of the studies that I recruited for, moderated and later reported on, we were able to build our own department usability lab.
“I feel like I’m being guided in a maze. If I don’t select the right thing, I’m not going to get what I want.”
Mapping Out the Information Architecture
The content audit mapped out the current content and how it related with each other. Taking that information, we ran a series of card sorting exercises to figure set how we would group, classify, and label the content we’d be working with. We turned a complex system that often looped back on itself into one that more closely matched our customer’s mental models and made clear paths for completing core tasks.
This was a drastic change from the previous sitemap which was very wide and often sent the user back to points they already came from.
Wireframing, Prototyping, and Annotating
Taking that content inventory, we went through a number of iterations for each page template and UI component identified--whiteboard sketching, paper prototyping, and guerilla usability testing throughout. As we got closer to what we thought was a final direction, we brought in outside customers to run additional usability tests to check if we were really solving the problems we identified and not causing new ones.
Sketching allowed us to freely explore ideas that would otherwise be sidelined.
Paper prototyping with the team allowed us to quickly iterate on ideas without getting too committed to a specific direction.
When screens and UI components were finalized, they were added to our larger documentation calling user flows, every UI component state, analytics we want to track, etc. This was complimented by our UI designer working alongside me to create pixel perfect renderings.
Pre and Post-Launch
I worked closely with the engineers to talk through complications or ideas on how to further improve elements. Once released to the public, the business KPIs and user feedback showed strong signs of improvement. To continue leveraging this progress, we followed up with additional rounds of surveys and usability testing with this new version to identify more problems and opportunities to prioritize for future work.