Overview
Digital First Editor (DFE) is a content management system that enables government employees to update and maintain the Centers for Disease Control and Prevention's official site. It's a B2B2C product with the end users being the general public and healthcare specialists. This was part of the digital modernization initiative, through COVID-19 emergency relief funding that reduced unnecessary or outdated information by over 65%, making it easier for users to find, read, and digest information.
Summary
Role
UX Designer
UI Architect
Research Analyst
Accessibility Specialist
Timeline
Two years, launched in April 2024 with ongoing user testing and updates.
Tools
Axure
Figma
Jira
axe DevTools
Users
This is a B2B2C product. The business users are government employees who are the communication experts on their team. This was a very invested user group, making it easy to coordinate user research.
The consumer users encompass the general public, with a focus on healthcare workers, families, and people with special needs, making accessibility of the end product an important objective.
Goals
The high-level end goal was for CDC.gov to have a refreshed look and feel, with updated content that was easy for users to navigate and find the information they need. To achieve this, we created a new product from scratch: a custom-built content management system that provided the structure, consistency, content guardrails, and guidance to help the business user to update and manage their portion of the website.
Agile Design Process
My design team worked on this product in two-week agile sprints, meeting regularly with research, development, engineering, and stakeholders for feasibility checks, ongoing user research, testing, and review.
Research & Plan
Partnering with research, my team and I established user needs, pain points, and a process for evaluating and ranking component urgencies.
Design & Develop
Working closely with development to ensure design feasibility, I ideated on options, creating wireframes, mockups for and protoypes for review.
Test & Review
Once developed, the product continued to be tested and evaluated for usability, accessibility, and design system consistency.
Research & Plan
When conducting user research, we focused on the needs of primary roles, including manager, writer, publisher, and reviewer. Through observational research and analysis, we could track how much time was spent on everyday tasks and determine pain points and opportunities for improvement. This helped us decide what components to work on next and the impact they would have on the overall user experience.
User Research for Digital First Editor
Design & Develop
Based on research and feedback, I created wireframes, user journeys, mockups, and interactive prototypes. I presented my work to stakeholders for feedback and review and met regularly with development, research, and engineering to ensure feasibility and accessibility.
Components and elements I designed include onboarding, navigation, version history, file management, and alternative language tools.
Onboarding
I created a welcome tour to help new users onboard to Digital First Editor. If it was their first time logging in, they would see this pop-up, and it would help them get started through a step-by-step guide. It could be accessed at any time to provide resources through the site's help menu.
Navigation
I created a left navigation component for the page editing screens. Prior to this addition, users only had left navigation functionality at the site level, which remained visible while in page editing mode. This update added a page-specific left navigation component and updated hover and selected states as well as tooltips on the site level navigation to meet 508 accessibility compliance.
Review and Edit tool
I led the design for version history, a complex and interactive component that tracks changes made by multiple users.
Through user research and testing, we learned that writers were using outside resources such as Microsoft Word to edit their sites, which did not have the CDC guidelines and writing suggestions necessary to ensure consistency. This component allowed users to compare and name versions to help edit and review.
Digital Asset Management
I simplified the file management tool in Digital First Editor to be more user-friendly and visually appealing. The updates were based on user feedback and research on best practices in digital asset management systems.
To do this, I evaluated the information displayed and limited it to what was necessary for the user to make a decision.
Alternative Language Page Management
In the first version of the content management system, users could create an alternative language page but could not manage or update it.
To solve this problem, I created an alternative language page management function. Users can now select "add" or "edit" in the dropdown on Page Settings and in the Page Settings modal. I also added a language filter on the Pages screen so users can see which pages have versions in alternative languages.
B2B2C
The Public-Facing Site
My team built the components in this content management system with the end user in mind: the healthcare professionals and general public who depend on the CDC for reliable and up-to-date data on health information affecting people worldwide.
This project launch included updating the official CDC.gov website to reflect new content with a new design system (which I contributed to and helped maintain). The outcome was a user-friendly site that streamlined information and reduced clutter by 65%.
Design Challenges and Solutions
The main challenge in designing this product was managing scope creep. As the product evolved, new ideas emerged to make this content management system more helpful for the user, and they had to be balanced with budget, timeline, and business objectives.
My team and I overcame these challenges by meeting with the client weekly to review the product with demos and discuss pain points. We regularly worked with researchers to conduct user testing and surveys to understand the impact these updates would have. This helped us define and prioritize our next focus area.