Dotdash Workflows App
Designing a web app to help North America’s largest digital publisher scale editorial review operations.
Company: Dotdash Meredith
Project Date: 2022
Role: Design lead responsible for discovery research and analysis, UX and UI design, prototyping, testing, and stakeholder outreach
Team: Product manager, lead researcher, tech lead, engineering lead and squad
Project Overview
Editors at Dotdash spent a lot of time reviewing and updating the library of 1.5M+ pieces content. The internal tools team wanted to build a new workflow app that made the review process more efficient for editors. I conducted discovery research to learn about the existing review process and worked with the product team to decrease the friction based on user insights. Then I designed and tested multiple solutions before delivering high fidelity mocks and flows for development. Together we made it easier and faster to start a new review project, access project information, and republish articles.
Context: The Review Stamping Process for Digital Publishers
Review stamping was a recurring monthly project in which editors gathered previously published articles and assigned them to be reviewed by freelance subject matter experts, such as doctors. If an article was approved, it would get republished with a badge with the expert's name in the byline (the stamp). Editors and reviewers handle hundreds of articles across dozens of brands each month. Maintaining trustworthy site content was crucial for SEO.
The byline stamp indicates that this article has been reviewed and approved by a doctor.
Problem
A bottleneck occurred at the end of the month when editors had to respond to all the review work completed by reviewers while they must also prepare and send out next month’s review stamping projects. There was an increased pressure to scale operations after the merger with the much larger publisher Meredith, which was leading to burnout among editorial staff. Managing a high volume of review stamping projects took time away from more growth-oriented creative tasks, such as pitching and publishing new content.
Objective
The internal tools team wanted to reduce the work and stress for editors at the end of the month by creating a workflow app MVP that leveraged newer workflow engine technology. We had to address pain points faced by editors and make the overall process more efficient. As the design lead, I was responsible for discovery research analysis, UX and UI design, prototype building and testing, and stakeholder outreach.
Metrics of Success of MVP:
Reduce the time and mental load for editors when creating new review projects
Reduce the time and manual steps between reviewing and republishing
Integrate with existing platform tools, such as the CMS and accounts manager
If successful, the MVP would be refined and expanded to handle more editorial processes in the future.
Discovery Research
Editors have been using an older app for managing review stamping projects, and my team needed insight into their entire process. Partnering with the lead researcher, I planned, conducted, and analyzed contextual inquiry interviews with 4 editors and 3 reviewers.
We identified the core user groups, tasks, needs, and pain points users encountered. I documented the user journey, existing user flows, and how tasks got handed off between editors and reviewers.
By breaking down review stamping into 3 stages, I found opportunities to reduce pain and increase efficiency at each stage:
Creating a new project (for editors)
Accessing and doing review projects (for reviewers)
Applying stamps and republishing articles (for editors)
High level view of the user journey
Narrowing the Scope of the MVP
During discovery research, I learned that about 35% of articles under review did not require edits in the CMS before republication (done by doc editors). I helped my team reduce the scope of the MVP without impacting basic end-to-end review stamping by excluding document editing flows and serving fewer users. This sped up delivery of the MVP and I documented additional features could be added in future versions.
Streamlining Project Creation
With the project scope defined, I explored solutions for pain points and inefficiencies, then gathered user feedback from editors and stakeholders. The bulk of my design work was in project creation.
Pain Points
The project creation UI of the existing app was cluttered and tricky to use. Even senior editors did not feel confident about creating new projects correctly from scratch. They duplicated and modified old projects rather than create new ones because they were afraid to mess up.
When creating a review project in the old app, users encountered:
Many irrelevant fields without an obvious purpose
Required fields hidden behind tabs that were easy to miss
No clear sequence to follow, which made it easy to lose their place mid-task
Project creation UI with irrelevant fields and no clear sequence
After articles were imported into a project, users encountered:
Wide, unscannable article task lists with unneeded information and empty columns
Frustration when repeatedly clicking through actions for each line item
Super wide assignment list with irrelevant information
Solution
We asked editors to identify elements they never used during the discovery interviews. I stripped out the irrelevant components and made sure required fields were visible in the new design.
To replace the tabbed experience, I made a clear flow for editors to follow when filling out project requirements. I built and tested 2 versions of the project creation flows. One version had a single, long form and the other had the same linear flow broken up into a multi-page wizard.
The multi-page wizard scored higher with users for ease of use and understandability. Users reported that it helped them focus on one step at a time and not feel distracted even when interrupted.
Project creation flow in single long form
Project creation flow in multi-step wizard
To improve the cluttered article task list, I omitted unneeded columns and introduced multi-select and bulk actions so users can modify data quickly.
Redesigning Cards for Projects in Progress
Pain Points
Reviewers could access a project from a card on their dashboard once it has been created and assigned to them. The cards in the old app had meaningless “priority” and “status” labels which users ignored while useful information about the number of tasks left to do was understated. The colors and contrast levels did not meet WCAG standards.
Project cards in the old app emphasized irrelevant information and had low contrast.
Solution
I redesigned the project cards by making the most important information, the number of tasks left and name of the project, easy to read. The new cards also met WCAG contrast levels. I initially removed the progress bar, but received feedback from users who liked feeling a sense of achievement with their work.
Reviewer’s projects dashboard in the MVP with the most essential information available at a glance.
The product team decided to leave out secondary features like the project’s brand identifier, the due date, and filters for the MVP . I still created high fidelity mocks to document the goal state and to share with stakeholders.
In later versions, the cards will also have the brand’s logo and colors, project due dates, and filtering options.
Automating Stamping and Republishing After Review
Pain Point
Republishing was pure grunt work that mostly happened at the end of the month when editors also had to prepare next month’s review projects. Completed reviews came in at random times by multiple freelancers, and editors scrambled to respond to them in a timely manner. In order to republish an article after review, editors had to go into the CMS, manually select the right stamp and reviewer, save, and republish.
Automating republishing eliminated manual tasks done by editors.
Solution
The engineering team and I determined that the last stage was a good fit for automation to eliminate this task for editors. Since the stamp type and reviewer were selected during the project creation stage, the workflow engine could automatically apply the stamp in the CMS as soon as the article got approved. Stakeholders and editors were glad that automation could significantly free up their time at the end of the month so they could focus on new projects.
Impact
This workflow app was the first at Dotdash to utilize a workflow engine that could automate complex editorial processes on the publishing platform. It will have the greatest impact at the end of the month when editors no longer have to worry about stamping and republishing as they set up new projects. When it is completed, the MVP would be able to reduce the time, steps, and mental load for editors throughout the review stamping process. This would help Dotdash scale operations and reduce editor burnout.
I left the project after handing off high fidelity final mocks and flows for development.
High fidelity mock of project creation: selecting a workflow
High fidelity mock of project creation: setting up project details.
High fidelity mock of project creation: reviewing tasks and assignment before launch
High fidelity mock of projects dashboard.
Next Steps
Develop App
The engineering and product team will develop this app over the next several months.
Release and Compare MVP to Old App
After releasing to several editorial teams, the product team will compare the time between reviewing and republishing utilizing the old app versus new app as well as conduct qualitative surveys on user satisfaction.
Develop More Features and Capabilities
Engineering and Product will also design and implement additional features, such as the document editing flow that we left out of scope in the MVP. The product team plans to use my design and research process as a template to develop spinoff apps for other editorial processes.