The New StPaul.gov

After moving to Drupal five years prior, the City of Saint Paul was looking to update the website as part of their Digital Transformation project. The last version of the website was on Drupal 7 and moving to Drupal 8+ requires redevelopment of the front-end, therefore this was a great opportunity to reevaluate and redesign the website.

Hoverboard collaborated with the City of St. Paul’s Office of Technology to improve user experience, reimagine their content strategy and governance and provide a strategic digital approach for the City’s website moving forward.

Goals

• Users will be able to find the information they are looking for quicker. 
  • Determined through usability testing before and after project. 
• Information about opening and operating a business will be more accessible and clear.
  • Determined through usability testing before and after project.
• Making online payments will be easier and standardized for users. 
  • Accomplished through enterprise payment platform integration. 
• Using new tools, the website will enable St. Paul residents to be more engaged in their city through volunteering, events, feedback mechanisms, and more.
  • Determined through usability testing before and after project.
• It will be easier for users to plan events in St. Paul using new web tools. 
  • Determined through usability testing before and after project.

Process

Hoverboard collaborated with the City throughout the whole process, overseeing each step:

1. Content Audit
   • Document the structure, pages and functionality of the existing site and identify gaps and opportunities relative to research findings and competitive/comparative experiences. 
2. Technology Audit
   • Review the City of Saint Paul’s current and planned technology stack and data integrations to inform numerous executional considerations.
3. Audience Definition and experience mapping
   • Create descriptions and use cases of prioritized site audience user types based on department sessions and user research, then map these audience user types across their experience of interacting with the city.
4. Strategic approach, visual direction and roadmap
   • Translate the requirements and site vision into a near-term digital road map and strategic guide.
5. Site structure
   • Establish the initial organizational, structural, labeling and navigational systems for site content that allow users to find information and complete tasks on both the new homepage and within existing content.
6. Content type descriptions
   • Define the set of content types that are needed based on the existing site structure.
7. Design concept directions
   • Develop creative concept directions for the site experience that align with the strategic approach and apply the City of Saint Paul brand style guide.
8. Content strategy and Search Engine Optimization considerations
   • Using research and content audit findings, develop a set of “Saint Paul for all” content guidelines to keep messaging and terminology clear, accessible, and consistent.
9. Content taxonomy
   • Establish the content taxonomy plan for the site experience, organizing the planned content of the site into distinct types with associated descriptions, characteristics, fields, relationships, etc.
10. Test plan
    • Perform quality assurance (QA) on the site using their internal QA checklist after initial development is complete.
11. Component development
    • Develop front-end components to be used by editors to build out content.
12. Content creation
    • Based on content strategy and findings of the content audit, create and edit existing content as needed.
13. QA testing and remediation
    • Review developed components and functionality to ensure alignment with user stories and the approved requirements. Defects will be logged and addressed.

Drupal

Migrating the site from Drupal 7 to Drupal 8 was a heavy lift as a part of this project. Utilizing the migration tools that Drupal provides was key to the success in this process.

Module Compatibility

When the Drupal 7 site, it was considered to use Drupal 8 at that point in time, however the module ecosystem for Drupal 8 was very young. Five years later, the eco-system was much more established.

There were still some modules and functionality that didn’t make it over 1 to 1 from 7 to 8, therefore alternatives were used in those cases.

Module Structure

The huge goal in this project was to build a modular component system for editors to use to build out unique pages. Simply building page templates would not have been flexible enough for the City. The paragraphs module was a perfect tool to build out theses components.

Coding Conventions

With this component mindset, it was very easy for us to use BEM naming conventions to create components in the backend.

<div class="news-card">
  <h3 class="h3 news-card__title">
    <a href="{{ link }}">
      {{ title }}
    </a>
  </h3>

  <p class="news-card__meta">
    <span class="news-card__date">
      {{ date }}
    </span>

    {% if department %}
      <span class="news-card__department">
        {{ department }}
      </span>
    {% endif %}
  </p>

  {% if subtitle %}
    <h4 class="news-card__subtitle">
      {{ subtitle }}
    </h4>
  {% endif %}

  {% if summary %}
    <p class="news-card__summary">
      {{ summary|raw }}
    </p>
  {% endif %}

  <a href="{{ link }}" class="btn btn--red news-card__button">
    {{ button_text }}
  </a>
</div>

<div class="news__cards">
  {% for news_item in content.news_items %}
    <div class="news__card">
      {{ macros.component('news-card', {
        'title': news_item.title.0.value,
        'subtitle': news_item.fields.field_subtitle.value,
        'date': news_item.fields.field_date.value|date('n/j/Y'),
        'department': news_item.fields.field_department.0.get('entity').getTarget().getValue().getName(),
        'summary': news_item.body.summary,
        'link': path('entity.node.canonical', {'node': news_item.id}),
        'button_text': 'Read More',
      }) }}
    </div>
  {% endfor %}
</div>