Architecting Government Websites Migrating Portland.gov to Drupal 8 - - PowerPoint PPT Presentation

architecting government websites
SMART_READER_LITE
LIVE PREVIEW

Architecting Government Websites Migrating Portland.gov to Drupal 8 - - PowerPoint PPT Presentation

Architecting Government Websites Migrating Portland.gov to Drupal 8 Josh Mitchell with special guests from the City of Portland Josh Mitchell Consulting Product Manager for Portland.gov Background: Enterprise Applications Manager, Multnomah


slide-1
SLIDE 1
slide-2
SLIDE 2

Architecting Government Websites

Josh Mitchell with special guests from the City of Portland

Migrating Portland.gov to Drupal 8

slide-3
SLIDE 3

Josh Mitchell

Consulting Product Manager for Portland.gov Background:

Enterprise Applications Manager, Multnomah County CTO, Drupal Association Director of Engineering, Phase 2

Why am I doing this?

Government websites are the most important sites we can build. The complexity and breadth of data make them an ideal site for Drupal. Artwork by Mishya Mitchell
slide-4
SLIDE 4

Ida Salazar

Business Solutions Division Manager, Bureau of Technology Services


Rick Nixon

eGovernment Program Manager, Bureau of Technology Services


Jen Clodius

Strategic Communications Manager, Office of Management and Finance


Project Team

Brittany, Casey, Greg, Julie, Kevin, Mark, Mike, Richard, Ronnie, Tracey

Meet the team

slide-5
SLIDE 5

A case study in 3 parts

  • 1. Where are we coming from?
  • 2. What are we trying to get to?
  • 3. How we are doing it?

a) the technology b) the strategy

Photo by Zack Spear on Unsplash
slide-6
SLIDE 6

Where we are coming from?

Part 1

slide-7
SLIDE 7

Existing platform

16-year old Coldfusion platform Public site and intranet combined 350,000+ content objects 
 (mostly PDF and DOC)

slide-8
SLIDE 8

Our community 
 does not care 
 about government

  • rg charts
slide-9
SLIDE 9
  • Obtain a permit or service
  • Find a job
  • Pay a bill
  • View emergency information
  • Find parks or recreation activities

Most community members want very little

slide-10
SLIDE 10

Emergencies and taxes

July 21, 2012 Boil water notice August 8, 2013 5-alarm fire May 23, 2014 Boil water notice & flooding January 11, 2017 Snow & ice December 14, 2016 Snow & ice December 7, 2015 Flooding

$ $ $ $

slide-11
SLIDE 11

Mobile

300%

increase in mobile traffic since 2013

slide-12
SLIDE 12

Search

61% 


  • f traffic to

PortlandOregon.gov arrives via organic search

90% 


  • f organic search is Google
slide-13
SLIDE 13

What are we trying to get to?

Part 2

slide-14
SLIDE 14

Services and information that are easy to find, easy to access, and easy to understand.

slide-15
SLIDE 15

Search should be awesome. Word choice is important. 
 Use words the community will use.

Easy to find

slide-16
SLIDE 16

Community needs equity and accessibility above all else.
 
 
 


Five zero three (pause) eight two three (pause) four zero zero zero

Easy to access

503-823-4000

slide-17
SLIDE 17

Content written at a 5th to 8th-grade
 reading level.
 Translation will be built into the platform 
 in an upcoming phase.

Easy to understand

slide-18
SLIDE 18

The technology

Part 3a

slide-19
SLIDE 19

3-week sprints Measure our progress Incremental improvements

Jira

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

Containers reduce developer time to onboard Tradeoff of slower localhost and issues with Windows-based team members

Local development

slide-23
SLIDE 23

Title text

Photo by Chris Arock on Unsplash
slide-24
SLIDE 24
slide-25
SLIDE 25

Default to open Show your work Feature branches Protect secrets

Github

slide-26
SLIDE 26

Github feature branch = multidev on Pantheon Continuous integration to master branch Continuous deployment of the master branch Integrate on Pantheon, deploy test, deploy live

CircleCI and Pantheon

slide-27
SLIDE 27
slide-28
SLIDE 28

1.Teach it your language with synonyms.


Governments like acronyms.


2.Understand stemming. 


Parks and parking are the same search query.


3.Know when to elevate.


Sometimes you have to game the system.

How to train your search engine

slide-29
SLIDE 29
slide-30
SLIDE 30

Paragraphs Media embed Page manager Block layout Layout Builder

Layout in Drupal 8

slide-31
SLIDE 31

Phone numbers Tabbed interfaces Structured content Media

Accessible design components

slide-32
SLIDE 32

2 approaches to responsive images

slide-33
SLIDE 33

Focal point crop

drupal.org/project/focal_point Allows you to set your crop based on a focal point. Every image gets a focal point upon upload to the media library.

slide-34
SLIDE 34
slide-35
SLIDE 35

Banner and featured image styles

slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42

Max width

Used for media embed with breakpoints based on 50% and 100% wide images.

slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46

The strategy

Part 3b

slide-47
SLIDE 47

User journey

Photo by Vlad Bagacian on Unsplash
slide-48
SLIDE 48

Where did they start?

slide-49
SLIDE 49

What’s the destination?

Services and permits Pay a tax or fee Apply for a license, permit, or financial assistance File a claim or a request for public records Report a problem ~ 300 services 
 (not counting the numerous permit types) Information Construction projects, policy projects, parks, jobs, maps, charts, neighborhoods, charter, code, policies, notices, hearings, meetings

slide-50
SLIDE 50

Service delivery

Preferred

Online In person By phone Chat

Unstructured

By email By mail By fax Text

slide-51
SLIDE 51

Typical journey

Kris wants to register a business with the city Search the web Review results

(see in top 3 results)

Service on Portland.gov Search Portland.gov Review results

(see first result)
slide-52
SLIDE 52

Accessed via a mode Some modes cost more than

  • thers

Some modes are more convenient than others Simple, clear, concise is more effective

Services

slide-53
SLIDE 53
  • Content instead of layout
  • Be ready for voice and AI
  • Simple and concise

Shift the way we think about content

slide-54
SLIDE 54

Category

  • Category (subcategory)
  • Article
  • Event
  • Link
  • File

Old content model

Categories can have a template applied: homepage, blog, calendar, outline, outline with table of contents, project/program, sitemap, subpage, TrackIT (webforms)

slide-55
SLIDE 55

Groups Content Media Taxonomy Views

New content model

slide-56
SLIDE 56

Used to both provide site structure (path auto patterns) and roles and permissions

Bureau/office Program Elected official Project Advisory board or committee

Groups

slide-57
SLIDE 57

drupal.org/project/group

Group versus Organic Groups

Group create a special group entity. Approach assumes that all relationships are a special

  • entity. No explicit field is on the content to tie to group. Expensive queries make Group well

suited to anonymous traffic. Organic Groups was much more widely used in D7. Entity model puts a field on every entity that can belong to a group. Groups are a node, which means they have publication workflow.

Group module

slide-58
SLIDE 58

Static

Service Permit Page

Chronological

News Events Alert Notification

Location

Service location Park location (saved) Location

Content

slide-59
SLIDE 59

Mostly using the media approach in Lightning with some modifications

Images Videos Audio Documents

Media

slide-60
SLIDE 60
slide-61
SLIDE 61

Community Actions Topics Page types News types Event types Document types Project types Permit types

Taxonomy

slide-62
SLIDE 62
slide-63
SLIDE 63

Database and search API views Future syndication of content via web services

Views

slide-64
SLIDE 64
slide-65
SLIDE 65

Planning what needs to be rewritten

slide-66
SLIDE 66

Editors add “legacy path” to each new content they create. On save a redirect is added if no redirect exists. When portlandoregon.gov 404 is directed to portland.gov, all identified legacy paths will be in the redirect table. Less dead links.

Legacy path identification

slide-67
SLIDE 67
slide-68
SLIDE 68
  • Services directory
  • Soft launch
  • Load testing
  • Critical mass of content

Alpha, Beta, Live

slide-69
SLIDE 69

Demo

slide-70
SLIDE 70
  • Charter, code, polices
  • Council meetings
  • Locations
  • Intranet
  • Webforms
  • Customer service management

What’s next

slide-71
SLIDE 71

Join us for contribution opportunities

Friday, April 12, 2019 Mentored Contributions

9:00-18:00 Room: 602

First Time Contributor Workshop General Contributions

9:00-12:00 Room: 606 9:00-18:00 Room: 6A

#DrupalContributions

slide-72
SLIDE 72

What did you think?

Locate this session at the DrupalCon Seattle website: https://events.drupal.org/seattle2019/sessions/content-structures-government-websites-build-plan-portlandgov Take the Survey! https://www.surveymonkey.com/r/DrupalConSeattle