Improving authoring experience with headless cms
Project
Blizzard’s previous content authoring system gave editors direct control over HTML, leading to inconsistencies in blog articles. During the migration to a headless CMS, we took the opportunity to define key components that effectively present complex content. The final deliverables included an improved blog layout and a streamlined custom plugin workflow for editors.
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?
Role
Product designer
Date
2022
Deliverables
Strategy
UX research
Usability testing
UX design
Wireframes
High-fidelity design
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 had two parts: designing the player-facing display and the authoring tool workflow. We started by researching best practices, then held a workshop with the editorial team to align all stakeholders in the design process.
Existing components audit
We analyzed how existing components were being used and assessed their challenges in terms of branding and accessibility compliance before determining which to keep and which to phase out.
New components organization
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 to obtain stakeholder buy-in. These sessions helped us recognize pain points of the existing authoring tool, which we want to address them in the new authoring workflow.
Cards with a clear CTA
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 noticed that editors were manually creating tables of contents to organize long articles. To make this easier, we automated the process by generating a table of contents from headings. This also encourages editors to use proper heading levels for structure instead of just styling text. For readers, a sticky table of contents helps them navigate long articles more easily as they scroll.
Specs & handoffs
I created a detailed specification sheet that includes implementation details for each component.
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.