WHEN
Jun 2022 - Nov 2022
DELIVERABLES
discovery
ux research
user interviews
ux design
wireframes
high-fidelity design
CHALLENGE
When Blizzard wanted to migrate its blog authoring workflow to a headless CMS tool, we saw this as an opportunity to address numerous authoring challenges and provide more modern and consistent reader experience across all devices and platforms. The challenge is that the editorial team is used to a variety of blog components such as tabs, galleries, and media cards to organize complex and complicated content structure, many of which we need to create a custom plugin to support on the new CMS tool. Our objective was to identify the minimum number of components that could accommodate the majority of use cases and suggest a new blog rendering and custom plugin workflow.
PROBLEM STATEMENT
-
For our readers: How might we provide modern content experience that is visually consistent and accessible?
-
For our editorial team: How might we make it easier for editors to create clean and beautiful blog posts?
HIGHLIGHTS
-
As the only designer assigned to the project, I collaborated with five game teams, one product manager, and a team of engineers to lead the entire process from defining the problem to developing high fidelity design specifications.
-
I extensively researched content accessibility and incorporated it into the plugin design logic. Additionally, I created a set of guidelines for editors to reference to ensure they use the new components correctly.
-
We expect 35%+ reduction in ongoing maintenance cost and content programming cost.
PROBLEM & GOAL
The blog content created by our editors lacked visual consistency across various franchises, and often failed to meet accessibility standards. The primary issue stemmed from the use of an outdated WYSIWYG content management system which did not provide the necessary tools to manage the large volume of content that needed to be published.
THE PROCESS
The project was separated into two segments: designing the player-facing display and the workflow for the authoring tool. We began by conducting research on best practices, followed by a discovery workshop with the editorial team to ensure alignment among all stakeholders during the design process.
EXISTING COMPONENT AUDIT
Blizzard's content, including patch notes and developer updates, is naturally intricate and lengthy. To break down the content into manageable chunks, the previous authoring tool provided eight distinct components with various styling options. We evaluated the existing use of these components and their associated challenges from both a branding and accessibility compliance standpoint before deciding which components to retain while retiring others.
NEW COMPONENTS TO SUPPORT
After considering the editorial team's feedback and frequency of use, we established an internal framework to determine when and how to use each component. By doing so, we were able to decrease the number of supported components from eight to three without compromising the editorial team's requirements.
EARLY FEEDBACK SESSIONS
In the initial stages of developing component designs, we conducted several feedback sessions with the editorial team that represented the key franchises to obtain stakeholder buy-in. These sessions helped us recognize pain points that were not addressed by the previous authoring tool and we endeavored to incorporate them into the new authoring workflow.
ORGANIZE CARDS WITH CLEAR CTAS
A difficulty that arose frequently in blog posts was finding a way to group images, headings, text, and links together in a concise manner. We addressed this issue in the new blog design by utilizing a card format with the choice to include a heading and CTA buttons, which ensures that they appear visually appealing on all screen sizes.
TABLE OF CONTENTS
We observed that editors often manually created a table of contents to organize lengthy articles. Our goal was to streamline this process by auto-generating a table of contents using headings. This approach also ensures that editors utilize heading levels appropriately to indicate the content structure, rather than using components to style the text. When users are scrolling down a long article, having a sticky table of contents can assist them in navigating through the content.
CONSISTENT STYLING ACROSS ALL TOUCHPOINTS
After stakeholders and the design team reviewed the designs for all components, I created a detailed specification sheet that includes implementation details. This comprehensive specification documentation aided discussions with the engineers during the project's implementation phase.
AUTHORING TOOL MADE SIMPLE
We utilized a headless CMS tool that came with a Real-Text Editor with basic functionality. However, we needed to create custom plugins to support the components we proposed. While the design was being developed, I worked with the engineers to determine the technical feasibility of plugin development and to think through the user experience of the plugins simultaneously.
NEXT STEPS
Since the rollout of the authoring tool, our next steps include:
Working with the product partner to onboard the editorial team
It's important to work closely with all stakeholders to ensure a smooth transition. This includes identifying the key features and benefits of the new tool, as well as any potential challenges that may arise during the adoption process.. We will actively listen to feedback from the editorial team and use that feedback to make improvements to the tool and its workflow.
Educate stakeholders on importance of accessibility compliance
Although we incorporated features to guarantee adherence to accessibility guidelines, it is possible for them to accidentally overlook accessibility compliance if they are not educated about the topic. Thus, we intend to use the accessibility document that I created to conduct sessions and ensure that the editors are informed of the importance of accessibility and are equipped to maintain the standard to the best of their ability.
KEY TAKEAWAYS
Unique challenges of organizing a large volume of content
This project provided an excellent opportunity to view content consumption as a user experience challenge and to identify different ways to improve both reading and authoring workflows. Design is just as important as content, which is why it's important to make your blog as user-friendly as possible.
Working better with engineers through rigorous documentation
At the start of the project, the goal was to document the existing blog styling in preparation for the authoring tool migration. This provided me with a solid understanding of both the existing design and the new components we needed to create, down to the smallest details. By creating comprehensive design specifications, I was able to effectively communicate with the engineers and address any questions they had throughout the implementation process. This experience enabled me to create my own techniques for documenting design that improved communication with engineers.