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. Many employees struggle with the Workbench process and often ask DoIT staff for guidance. While the employees are happy to help each other, DoIT staff want to make the system more efficient and enjoyable for all.

 

As a fan of local government and friend to many municipal workers, I was thrilled to help meet their goals.

This team project coincided with the Boston.gov migration from Drupal 7 to Drupal 8, including a new interface for the Workbench. This was a prime opportunity to get input from the users that DoIT can use as they further customize the Workbench, including several of our tested recommendations.

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.

Project Details

Team Roles

Shared: User interviews, contextual inquiries, comparative research, usability tests

Julia: Client liason, accessibility lead, Drupal research lead, writing, partial prototype

Luca: Visual design lead, high fidelity digital designs, clickable prototype, design cohesion

Morgan: Project manager, task analysis, research lead, findings report and presentation lead

Tools

  • Sketch

  • Miro

  • Invision

  • Slack

  • WebAIM Contrast Checker

Constraints 

  • Three week project

  • Migrated to newer version of Drupal on Day 3

  • Potential limitations of CMS

Process Details

User Research (All participants were current users of the system who volunteered through DoIT)

  • Focus Group (5)

  • Interviews (13)

  • Contextual Inquiry (11)​

Analysis

  • Comparative Heuristic Analysis (4)

  • User Workflows (4)

  • Affinity Mapping (327 data points)

Prototype 

  • Sketch

  • InVision

​Accessibility Testing & Updates

  • Manual review

  • WebAIM Contrast Checker

Usability Testing & Feedback

  • Usability Testing (4)

  • Demo to DoIT Project Team (4)

  • Demo to DoIT staff including developers & designers as well as research participants (15+)​

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 busy, text-heavy design and lack of intuitive wording as issues on 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

While interviewing 13 employees, we heard similar statements and problems:

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 for helping the Boston employees, 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

Example of Proposed Workbench View

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 workflow. Therefore, Luca redesigned the menu items and layout to be more easily accessible and familiar to users. We also added a "Help" section to the top menu, which opens the content creation handbook document, which all users wanted more accessible from within the Workbench.

Existing Initial Screen and Menu

Proposed Initial Screen and Menu (v1)

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

While our scope did not include a complete accessibility audit, I manually reviewed several key color choices and checked them with the WebAIM contrast checker. I found that many color combinations for buttons, links, and descriptive text did not have adequate contrast to meet AA standards.

 

I proposed increasing many font sizes and found similar color combinations that would meet contrast standards, many of which were integrated into the final prototype.

Previous Colors

Proposed, Accessible Colors

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

Proposed Content Layout Detail (v1)

Feedback on Version 1: Almost!

We tested a combination of 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 more visual examples to support decision-making. The accessibility options in the Workbench were unclear, so more work will have to be done to make the examples meet standards.

Initial Screen with View Choices (v2)

Content Creation Detail (v2)

Version 2 Prototype

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

©2020 by Julia