Refine service blueprint example

[juliaklindpaintner]

Note: This was originally issue 127 in the TLC repo. Because issues can't move from private to public repos, it's being recreated here.

A description of the work

Using an html table, we recently added an accessible example of a service blueprint to 18F methods(#650). It needs some light design touches (ex. sticky left column) to make it easier to read and navigate. The table design is something we can reuse and apply to future tables and method examples.

Point of contact on this issue

@MelissaBraxton

Reproduction steps (if necessary)

Page with table: to be added once on site

Billable?

• Yes
• No
  If yes, tock code:

Skills needed

• Any human
• Design
• Content
• Engineering
• Acquisition
• Product
• Other

Timeline
Does this need to happen in the next two weeks?

• Yes
• No

How much time do you anticipate this work taking?
1-2 weeks including feedback and review

Acceptance Criteria

• We've made desired refinements to the service blueprint example - refinements are live on the Methods site

Tasks

• Make the following refinements:
  • Make the leftmost column sticky
  • Remove periods at the end of list items in the first column
  • Move the description of the table that is underneath above
  • Make it so that the ("This simple service blueprint links back to the service blueprint Method card)
• Accessibility review
• Create pull request and tag Methods product owner to review and merge

[juliaklindpaintner]

I reviewed the service blueprint and have some additional suggestions for improving this page. Some of them are content-related and may require a separate ticket. Please handle as you see fit!

• As mentioned already, I think the biggest thing that would help would be a sticky leftmost column
• Consistent punctuation in the first column (a couple have periods, a couple don't) — probably no periods since they are sentence fragments
• Consider moving the description of the table that is underneath above — I think that explanation of the table is helpful to have to orient.
• Consider adding a "back to Service blueprint" link at the top so that it's easy to navigate back to the main method
• The link in the text at the top ("This simple service blueprint..." links to this page — should it link back to the Method card, or to a PDF version?

A couple content things, which may be out of scope for this issue:

• The frontstage items for "clean up and leave" seem to fit better in "Find a table and eat the burger"
• The frontstage items for "find a table and eat the burger" include cash register, card reader, etc, but "payment system" is under "Arrive at the restaurant and order" — are these in the right places?
• The support processes for the 3rd and 4th columns are the same — is that right?
• Consider changing "eat the burger" to "eat the food" since there doesn't seem to be anything else that is specific to it being a burger?