Boston.gov: CMS Improvements

Background

The City of Boston's Department of Innovation and Technology (DoIT) maintains the municipal Drupal site using the Workbench module to allow 100+ employees content creation and/or editing power. 

Challenge: Improve the Drupal Workbench experience for Boston.gov content producers and editors so they can more easily and independently communicate with visitors to the City website.

My Contributions 

  • User interviews

  • Client liaison 

  • Accessibility assessment 

  • Comparative research

  • Drupal research

  • UX writing

  • Prototyping

  • Testing

iMac Screen
Automatic GIF of navigating through the content creatin process.

Results

  • All employees said our prototype was easier and more intuitive

  • Our menu, wording, error avoidance, and state progression improvements made their work faster and more efficient. 

Planning and Research

Comparative Research

While scheduling user interviews, we conducted heuristic analyses of the Drupal 8 Workbench and three similar content creation sites for usability, successes, and areas for improvement:

  • Wix - visually-oriented basic site creator

  • WordPress - most popular site creator platform in the US

  • Google Suite - where City of Boston employees create most of their content

We identified the text-heavy design and lack of intuitive wording as issues in Drupal. This research prepared us to conduct informed interviews with users and identify potential improvements to customize from other sites.

Synthesized User Interview and Contextual Inquiry  Findings

Navigation

  • I want to edit this page, but I can’t figure out how to get to the editor from here.

  • I am confused about how things are named and described.

  • I struggle to find what I am looking for. 

 

Moderation & Preview

  • The new moderation tools seem helpful, but I’m still confused.

  • I want to be able to see and compare revisions, but this way is confusing me.

  • I don’t trust Preview. 

 

Errors & Help

  • Help me avoid errors by telling me the requirements.

  • I want easier access to the DoIT user guide.

  • I rely on DoIT staff when I can’t help myself.

  • I need more support to ensure my content is truly accessible to all of our users.

What's the Problem and How Might We Fix It?

Workbench User Problem Statement

City of Boston employees producing and editing content for Boston.gov struggle with the Drupal Workbench and often rely on DoIT staff because the Workbench is inefficient and unintuitive.

Hypothesis

 

We believe that by improving menus, descriptive text, and error-avoidance support, we will make streamline content workloads and improve Workbench users' experiences, as well as  free up DoIT resources to focus on strategic innovation.

Ideation and Testing

Initial Ideas

​While we had many ideas, we focused on the following for broadest impact:

  1. Incorporate visual examples, best practices, and more illustrative descriptions

  2. Improve access to the Drupal Workbench user guide created by DoIT

  3. Improve taxonomy and navigation by using more familiar terms

  4. Clarify the moderation process 

  5. Be clear and consistent in error avoidance and requirements

  6. Guide staff to support all Boston.gov users and meet accessibility requirements

With these ideas in mind, we made initial design change mockups in Sketch.

Example of Current Workbench View

Initial Workbench view with low contast menues and unfamilar terms

Example of Proposed Workbench View

Proposed Workbench view with high contrast and prominent status bars and menus

Menu: Reorganize Options and Reintroduce Familiar Names

We believed that by making page-editing actions more visible and intuitive, all users would have an easier time performing core functions of their workflows. We combined and streamlined the "My Workbench" and "Add Content" menus into one dashboard. We also saw most users switch tabs between the Workbench and a support document. A "Help" link in the menu now incorporates this content.

Existing Initial Screen and Menu

Initial Boston.gov screen and menu with vague wording and unfamiliar phrasing

Proposed Initial Screen and Menu (v1)

Proposed initial page, which has large square buttons for different content tasks
Initial Create Content screen with limited descriptive text and unfamiliar phrasing

Existing Content Creation Screen

Accessibility: Update Color and Font Choices to Meet WCAG AA Standards

Our scope didn'tt include an accessibility audit, but I assessed color choices with the WebAIM contrast checker. Many color combinations for buttons, links, and descriptive text did not  meet AA standards.

I proposed increasing many font sizes and identified similar color combinations to meet the standards.

Previous Site and Prototype Colors

contrast fails.jpg
Previous low contrast draft satus view
Previous low contrast pending status view
Previous low contrast published status view

Proposed, Accessible Colors

Proposed high contrast view
Proposed high contrast edit status view
Proposed high contrast pending status view
Proposed high contrast published status view

Content Creation: Incorporate Descriptive Text and Examples 

I researched, designed, and prototyped a new content layout selection page with updated terminology and visual cues to support user decision-making.

Existing Content Layout Detail

Content layout selection list before improvemets

Proposed Content Layout Detail (v1)

Initial proposed changes to workbench view. The new view has more descriptive text and rough examples of what each content layout option will look like.

Feedback on Version 1: Almost!

We tested wireframes and mid-fidelity prototypes on several of our initial users and heard:

Positive Feedback

  • This is easier to navigate than what I am used to.

  • I would use “View Example” of the content layouts.

  • Moderation seems simpler and easier to get through.

Conflicting Feedback

  • I like this dashboard vs. I want more/different information.

  • I want edit options in a pop-up vs. I want edit in a sidebar.

Helpful Ideas

  • I want to see published examples  as well as templates.

What We Observed

  • Users very quickly and easily navigating to where they needed to go.

  • Users being excited  and more confident in their process.

Iteration

Version 2: More Customizable and Visual

We incorporated user feedback, focusing on making the process more similar to dashboards the employees enjoy and incorporating visual examples to support decision-making. We presented our final designs in several employee meetings to overall positive responses from users and developers.

Initial Dashboard (v1)

Revised dashboard proposal for contet creation process. The top menu reads My Workbench and is followed by four large boxes with links to create a newpage, see drafts, see published work, or see all recent content.

Initial Dashboard Additional List View (v2)

Revised content layout previe screen that shows three columns, one with written description of the layout's uses, the middlewith a wireframe example of the layout and titles for its components, and a third with an example of the layout from the website.
Proposed initial page, which has large square buttons for different content tasks
Initial proposed changes to workbench view. The new view has more descriptive text and rough examples of what each content layout option will look like.

Content Creation Support (v1)

Content Creation Support with Existing Example (v2)

Additional Recommendations

  • Collaborate with very high volume departments to develop custom templates

  • More deeply embed help tips and access to user guide throughout the Editor

  • Provide users with access to the Brand Guidelines from within the Editor

  • Embed either Grammarly or Hemingway in text editor fields to encourage more accessible writing 

  • Provide users with translation capability

  • Implement accessible design recommendations from City’s April 2019 blog post to front and back-end

Focus Group

  • The experience they hope to give Boston.gov users

  • Feelings about their workbench experience

  • What they wanted to stay the same

  • What their pain points were

  • What they wanted to change

BostonCMSFocusGroup.jpeg

13 ​Active Boston.gov content-creators helped us understand:

Contextual Inquiries

BostonCMSContextualInquiry.jpg

Many users walked us through posting press releases, updating photos, and publishing content.

 

We identified pain points that employees had been working around and underused features to explore.

 

Tools

  • Sketch

  • Miro

  • Invision

  • Slack

  • WebAIM Contrast Checker

Constraints

  • Three week project

  • Mid-CMS migration