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

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:

Incorporate visual examples, best practices, and more illustrative descriptions
Improve access to the Drupal Workbench user guide created by DoIT
Improve taxonomy and navigation by using more familiar terms
Clarify the moderation process
Be clear and consistent in error avoidance and requirements
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

Previous low contrast pending status view

Previous low contrast published status view

Proposed, Accessible Colors

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.

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

Return to Prototype

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

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

Contextual Inquiries

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.

Prototype

Tools

Sketch
Miro
Invision
Slack
WebAIM Contrast Checker

Constraints

Three week project
Mid-CMS migration