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.
Date: December 2023 - March 2024
My Role: Lead Product Designer
Overview
Problem to solve: What information do journalists and editors look for within WebSked when seeking a specific type of content?
This work was done in tandem with the search and list view search redesign that was being done a full case study can be found on that work here.
Arc XP clients consist of mainly large media organizations that publish three or more articles per hour every hour a day. These articles are complex pieces of data that include media such as text, photos, and images. Within the WebSked application (WebSked allows editors and journalists to plan, schedule, and publish their content) users can view all of the content created within the application suite.
I worked with the product and engineering team to research and design a content card that could handle different content types and metadata. Working with the senior product manager to ensure we found and addressed all requirements and the engineering team to create a technically feasible solution.
Design Process
Research
Research goal: To understand what ‘complex content cards’ mean for our users and to ensure the definition of content is the same as our users.
User Interviews
Concepts explored in interviews:
Priority of data
Additional data needed or desired
What is content
“We need a very small story card to allow getting most useful info at a glance”
“The ability to change the default view through filters to find exactly the content we need is essential for our business ”
Data Categorization
After the user interviews, 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.
Content Card metadata breakdown:
Metadata group
Max number in group per screen size
Story/Gallery/Video: only data on this content type
Locked: is always shown on the full content card for the devices indicated and cannot be removed by the admin through configuration.
Default: is shown on the full content card for the devices indicated, but the admin can replace or remove it from the content card when configured.
Optional: a suggestion for one of the fields an admin could choose to display on the full content card when configured. It is not shown on the default content card.
Content Card meta data breakdown
The list of content cards that WebSked provides needs to be flexible enough to address a wide number of use cases without being so complex that it’s impossible to build and support. To address this, we can provide the information users want by enabling admins to configure some fields in a content card.
Wireframing through major versions
Low-Fidelity Wireframes
Directions Explored:
Content type before title
Asset counters as buttons
Column or row
Date separation from the rest of content
Direction Decided:
Asset counter with text
Column layout to increase scalability
Badges to show status
Key-value pairs to show metadata
Low Fidelity Versions
Version 1
I took the basic card from the Arc Design System to see how it would manage the large amounts of content. Using this initial card I could find the restrictions that the card showed when pushed to the max and where new elements needed to be added.
Using existing breakpoints for screen size I could refine the data breakdown that we had established through the research process.
Direction Decided:
The content type before the title does not stand out in the scan test
Badges should be informational only
Two lines of key-value pairs cause all data to get lost
Version 2
As the cards started to take a more polished look the new version continued to refine the scalability of the cards. With tweaks in the overall information architecture, the card shows the most important elements where the eye is first drawn.
In this version, I tested the ability of the card to work globally. These cards are to work in English and other left-to-right languages but also in languages such as Arabic that are written right-to-left. Testing the layouts within a global eye ensured they were designed with this flexibility.
Version 3
As we began to reach the end of the iteration process I wanted to again confirm with our users that we were going the right direction. I reached out to our user testers to see how the cards resonated. My hypothesis for the survey is that users would want to see as much content as possible so this was a test to confirm the information hierarchy made so much content make sense.
Sample of User Survey Questions:
How much content do you want to see?
Does this layout include all the data you need?
The survey results showed that users liked the content cards which supported my hypothesis. Users liked the content cards with the most data possible to view, but with the caveat they wanted the card to be as short as possible so they could see as many pieces of content as possible at once.
Direction Decided:
Badge over content introduction went over well with users and stakeholders
The left side line to show status is not accessible to users who are color blind and should be dropped
Users like to have the asset counters type instead of just icons when space allows
Shorten the content cards where possible
Version 4 Final
Categorized all of the data that is collected within each piece of content.
Metadata mapping for the engineering team
Responsive breakdown and RTL component
Figma component that allowed for easy manipulation for all teams and easy adoption into the design system.
Content Cards final deliverables
English (Left to Right) version of the the redesigned content card
Arabic (Right to Left) version of the redesigned content card
Figma Content Card Configuration that allowed integration into the design system and easy manipulation.
Meta data mapping documentation
Content type documentation
Future Work - Configuration
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.
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.
This 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 that the cards were responsive and adaptable to different screen sizes and international users' right-to-left (RTL) layouts.
Iterative Design Process:
Explored different design directions and made critical decisions, such as:
Prioritizing column layouts for better scalability.
Using asset counters with text instead of just icons for better clarity.
Introducing badges to indicate content status and key-value pairs for metadata display.
Led testing with users, confirming that users preferred cards with as much data as possible but in a concise, scannable format.
Final Design Deliverables:
Metadata mapping documentation for engineering teams.
Responsive design and RTL support for global adaptability.
A Figma component that allowed for easy manipulation and integration into the design system.
My Overall Impact
68% faster workflow (user praise for scannability).
Scalable solution that prepares the product for future content types and metadata configurations.
User satisfaction by addressing real-world needs through targeted user research and feedback.
Cross-team alignment with documented designs and reusable components that streamline ongoing updates and maintenance.
Retrospective
This project enabled WebSked users to take full advantage of the metadata. After launch users raved about the ability to scan the cards to find the information that they were looking for on the card.
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 a content card.
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 reduced design and tech debt and improving the business in addition to the work done for users.