Creating the next generation of content planning tools for newsrooms
WebSked is where journalists and editors manage the life cycle of their content. This case study covers the evolution of this product, providing a more scannable and efficient way to review thousands of pieces of content.
Company
The Washington Post / Arc XP
Date
January 2023 - March 2024
My Role
Lead Product Designer
Overview
Large media organizations publish several articles, galleries, and videos every hour, and editors and journalists must manage large amounts of complex content daily. The challenge lies in offering a solution within WebSked that helps these users quickly identify and interact with relevant content, despite the vast volume and variety of content types.
This case study covers January 2023 to June 2024 and features multiple projects aiming to meet the needs of users of the WebSked platform. As a lead designer for the content team, I was tasked with understanding the current state of the application and working with leadership and produce management to uncover the best steps forward in revamping the application. Once the application was understood I worked with the team to create a vision of the most used pages and user flows.
Original Stories (Planning) Page
Redesign Planning Page
Business Objective
Objective
Increase the efficiency and engagement of editorial teams by streamlining content management workflows in Arc XP's WebSked platform.
Key results
Increase editorial team engagement with WebSked by 25%
Measured by the frequency of interactions with key features like the calendar view and search functions.
Achieve a 20% improvement in client satisfaction scores from major clients
Measured by a post-launch survey sent to key clients.
Reduce time spent on content management tasks by 40%
Measured by benchmarking done in Pendo
Understanding the current state of things
User Tasks
After creating the site map I created a user flow of the major actions that users would be running within the application. Using Pendo.io we tracked these actions daily to get a benchmark before the future updates were rolled out.
User Interviews
By reaching out to Technical Account Managers who were associated with large users of WebSked we set up interviews with clients who used WebSked daily, weekly, or monthly. These calls allowed us to understand exactly who was using the applications.
I spend 30-45 minutes on calls with clients. Using the same script with each call I uncovered recurring themes of who our users were and why they used our applications.
Using this information, we put together the following user personas.
Personas
Content Curator
Responsible for distributing content to website or other channels.
Top Need: Able to see content waiting to be distributed.
Editor
Responsible for ensuring content is ready for publication.
Top Need: Be able to see all content waiting for them to edit.
Calendar View
Date: December 2022-December 2023
The additional view needed was discovered in the persona research. More than half of users mentioned the need for a better way to view their content. Media organizations are focused on posting on a linear schedule having a view that showcased this was a critical need.
Research
Using Respondent.io, a tool that connects researchers to participants. We talked to digital marketing and enterprise users who used different tools to understand how they used planning tools and if this view would help potential clients outside of media.
My team spent 30-minute sessions with Arc XP users and Respondent.io participants. We presented participants with a mockup of a basic calendar and had users walk through basic tasks and ask open-ended questions. Touching on some of the following areas:
Understanding who the organization is, and what the various internal teams are.
Understand how the individual user fits within their department’s org chart.
Understand how their organization defines and manages content
How they keep track of large initiatives
What is their workflow managing content
Research Major Findings
[ArcXP user] mentioned that they often handle as many as 80 pieces of content within a single hour and expressed a pressing need for a streamlined way to view, edit, and manipulate it easily.
All users we talked to have different perspectives on what functionality is the most important to them and what kind of content is used. However, all have the same use cases for having a calendar.
Users gravitate toward the user of a calendar and a kanban view would be unhelpful for their daily work.
“Having a calendar that is always going to be there helps my team know exactly what is happening day to day.”
“We need story cards with minimum info to help get a global view of the daily plan at a glance. We have 70-80 stories a day.”
Design Iterations
A major pivot was to remove the top ‘Not Assigned’ portion of the calendar. This was originally thought important to give users visibility of what potential tasks. Feedback from usability tests and surveys informed us that they would rather filter the content and save space on the page to allow viewing more relevant content.
Monthly View
Daily View
Daily View Prototyping View with flow and use cases
Launch
Traffic soared immediately after the launch and continued to grow over the first year, with one-third of users promptly incorporating the new view into their daily workflows. This significant engagement is particularly noteworthy, as it reflects that half of all customers using the WebSked product enabled are actively taking advantage of this enhancement.
The top five users of WebSked Calendar view are:
“ I LOVE the new calendar. Being able to get a clear look at digital publishing times that quickly is extremely important.”
Search
WebSked is a unique application in the ArcXP because it shows the user all types of content they have within the suite of applications. This allows users to plan, manipulate, and group content.
Main drivers for product focusing on this initiative:
Design consistent content cards that are content agnostic as Arc XP grows into new content areas
Improve ease for users finding the content they’re looking for, increasing user satisfaction and stickiness
Information Architecture
I created wireframes to illustrate the different approaches we could take with search and the pros and cons of each. These wireframes were used to showcase to leadership and engineering the direction the search solution could take. This conversation allowed the team to decide on the direction of the overall information architecture while not getting bogged down with visuals.
When working to break down the architecture further I brought a sample graphic that laid out the expectations of what would be a part of each section. This graphic was iterated during the project while interviews uncovered new use cases that needed to be solved when creating the final list of use cases.
Inline Horizontal Filters
Peak Overlay Search
Inline Vertical Filters
Top Overlay Search
Usability Testing
Launch
Content Cards
Content cards are flexible enough to address diverse data without being so complex it is impossible to build and support.
Ability to support right to left and left to right
Card Sorting
To understand what metadata the team had we talked to all product managers across the content application suite to get a list of all data that could be used. After collecting all the data I ran card-sorting workshops with internal and external users.
Round 1 - Internal
Participants were requested to categorize the cards into appropriate and coherent groupings based on logical relationships.
Round 2 - Clients
Participants were instructed to classify the cards into distinct priority categories.
Data Categorization
We broke down all the data the application had access to and broke it down into different categories. This allowed us to have buckets of data to go into each card. Creating this breakdown enabled us to know what the most complex version of a single card could be and the simplest version.
“The ability to change the default view through filters to find exactly the content we need is essential for our business ”
“We need a very small story card to allow getting most useful info at a glance”
Content Card Configuration
Design Iterations
When running surveys throughout the design process results showed that users liked the content cards which supported my hypothesis. Users liked the content cards with the most data possible, but with the caveat they wanted the card to take up little vertical space to see as many pieces of content as possible at once.
Low-Fidelity
Responsive iteration
Responsive and right-to-left iteration
In context iteration
Final
English (Left to Right) version of the the redesigned content card
Arabic (Right to Left) version of the redesigned content card
Configuration (Future Work)
The research found that users would like to be able to configure the cards, but this functionality was not green-lit by the business to spend the engineering resources. I designed a configuration layout for future iteration when the business has more funding for that initiative you can find it below.
Business Outcomes
90%
User satisfaction
68%
Workflow improvement
27%
Increased engagement
My Key Contributions
Research and User-Centered Design
Conducted extensive user interviews to understand how users define complex content cards, the priority of data, and additional metadata needs.
Research guided the design process to ensure content cards aligned with user expectations and workflows.
Designing for Flexibility and Scalability
Systematically categorized all the data the application
Defined the most complex and simplest versions of a content card, ensuring flexibility across various use cases.
Ensured the cards were responsive and adaptable to different screen sizes and international users' right-to-left (RTL) layouts.
Iterative Design Process
Led testing with users, confirming that users preferred cards with as much data as possible but in a concise, scannable format.
Retrospective
This project enabled WebSked users to take full advantage of viewing their content in a view that serves them the best. After launch users raved about the ability to find the cards they were looking for and the ability to see them in the calendar.
The project showcased the importance of continual feedback from users. By spending time understanding our users at the beginning of the process and doing check-ins throughout the process we did not find ourselves at the end with a final product that was not helpful for our users. By getting to know our users and understanding their definition of seemingly simple concepts we understood exactly what they were looking for in their workflow.
By working through the information architecture, the team was empowered to understand what was possible, but there was no question that the direction was correct. By working through all of the different layouts getting buy-in from internal stakeholders and understanding all of the needs of our users we were able to put out the best product possible.
The final content card is flexible but robust and will allow the Arc XP team to reuse the card throughout the entire ecosystem. This allows for less design and tech debt and improves the business and the work done for users.
Within our research, we found the need for marketing users to have the ability to organize content into campaigns to make the calendar work extremely well for them. For Arc XP to move into the marketing space this will be a must-have for marketing personas.