cityofaustin/janis

frontend for joplin

janis's Issues

Place page template

i.e. museums and cultural centers

Update 'related services' section

We observed a handful of residents using the new digital services. One person referred to 'related services' and the 'feedback request form' as the footer. Another person using a tablet did not scroll down to the 'related services' section and so was never able to use it to discover and access similar services. Problem is that users are not recognizing 'related services' as part of the service page experience–it feels separate, like a footer. And on our end–'related services' is the primary next step we want users to take.

I imagined (A) moving the 'related service' content into the right column, beneath 'contact', but it felt like too much information. Of course, we can't be sure until residents test, but instead–let's (B) change the attributes of the 'related services' section so that when a user gets to the end of a service- they continue to scroll down and read over 'related services', believing that it is an inherent part of that service.

updates in mocks:

• change 'related services' section background to match service content background
• change service tile color to #0A71AE $color-primary
• change service tile type and chevrons to #ffffff white
• change 'related services' section title to: "Check out related city services"
  there's a change in column layout included in the mocks but I'll detail that in a separate issue

Add service and home page images and topic page background color

Add header image holders to the following templates:

1. service page – image
   mobile resolution: 320 width x 120 height
   desktop resolution: 1440 width
2. homepage – image
   mobile resolution: 320 width x 240
   desktop resolution: 1440 width
3. topic page – solid color background
   mobile dimension: 320 width x 320 height
   desktop dimension: 1440 width x 320 height

• Get ready for bulk pickup image: https://drive.google.com/drive/folders/1zK6BN-sohJo5nbthWbZY01-gMnOUDVgw

• Get ready for curbside compost image: https://drive.google.com/drive/folders/19KEqh8HmLQNvX1oBeKOfcwHuTM3RYI8j

• Look up recycling, compost, and trash pickup days image: https://drive.google.com/drive/folders/1y4LFZLxYC6gzY6yEz2Dkj9m3p2f2jLSZ

• Pick up free paint and household items image: https://drive.google.com/drive/folders/1bR2UllpuK0CIElNVVLBoYPxQr_TekzPx

• Drop off household hazardous waste and other recyclables: https://drive.google.com/drive/folders/19KEqh8HmLQNvX1oBeKOfcwHuTM3RYI8j

• ARR Department page: https://drive.google.com/drive/folders/19KEqh8HmLQNvX1oBeKOfcwHuTM3RYI8j

Images should:

• automatically compress, even though image library user access is limited to content coaches or higher, who should be uploading the correct size

Class/workshop/skills training reservation

Needs to be researched with users, city staff who manage, requirements gathered, etc

Application block for Recollect

Need documentation from Jorge
[phone]

Got a response!
recollect-userguide-embedding.pdf
Widget codes.txt

Above embed script utilizes document.write, which doesn't work for async loaded scripts. Checking with Recollect directly to see if there are async solutions. [email protected]

Topic Page

Mocks in sketch file here:
https://drive.google.com/drive/folders/1Xg6739ixhIDrb7MdJAnO4_zCRu3kDmZQ

Park and facility reservations

Needs to be researched with users, city staff who manage, requirements gathered, etc

Chinese Language abbrievation

In our project summary, we list the top languages used in Austin:
https://docs.google.com/document/d/1ll72dBQ9bCh9QA5OaDUzjvJyRO-ZvQ5WbPvmIvKexGU/edit#

We're under the impression that in an ideal world, we'll be handling translations for all those listed. When it comes to the two distinct versions of Chinese (Traditional & Simple) we need confirmation that these will both be implemented. And if they are, we need to research how the language codes are different and refactor our i18n selection banner to accept language codes longer than 2 characters.

Relevant discussion w/ @ifsimicoded :
https://github.com/cityofaustin/janis/pull/46/files#r158395784

cc/ @cthibaultatx

Header/Footer

Make header and footer components

• Header
  • Language Bar
  • Menu Bar
• Footer

News/articles/updates

Needs to be researched with users, city staff who manage, requirements gathered, etc

Transition permittingatx.com content and create page template

work permittingatx.com into austin.gov

Plug and configure analytics

• Define actionable analytics using user behavior learnings from research and austintexas.gov existing analytics
• Plan configuration with goals and data collection
• Implement

Integrate project tracker tool and page template

Team that created this tool:
@mateoclarke – developer
Tori Breitling – UX designer
Daniel Honker – product owner

Need to work out position within information architecture and resolve styling variations.

Setup Skeleton

• ES Lint .eslintrc
• .editorconfig
• package.json has description and version
• add Dockerfile
• add .dockerignore
• add gitignore
• pick license

optionals:

• CONTRIBUTING.md
• ISSUE_TEMPLATE.md

Display list of contacts & locations

Don't just show the first item

From discussion at #42 (comment)

Integrate digital asset management system(s)

Refine visual design of service page

• Refine service page template steps - step numbers have ovals around them now

• Remove 'United States' from contact address

• Update breadcrumb styling on service page: desktop includes full path, mobile and tablet shows only topic level

• Tag all addresses, phone numbers, and email addresses so they're in link format

• Lengthen desktop max character limit/line length to 720

Deployment

Search

Service Page Components - 1.2 Example Service 2

1.2 Example Service 2

![mvp_s_1 2_service](https://user-images.githubusercontent.com/5697474/33031013-92277334-cde2-11e7-91ab-fe718a48de09.png

Create separate austin.gov feedback tracker repo

issue tracker that will receive public feedback via the feedback form

• Once this is up and running, send this to our partner Bryan Hirsch at Mass.gov

Service Page Components - 1.3 Example Service 3

1.3 Example Service 3

Austin resident single sign on

Enable residents to sign on to single account to pay bills, look up tickets and court dates.

user flow not finished
requirements need to be gathered

USWDS & Sass

• Do we want to use USWDS for our base pattern library?
  https://github.com/18F/web-design-standards

• If so, what are its dependencies? Does that create any issues?

• How do we use Sass or similar css-preprocessors?

Research & Implement Server side rendering or Static site generation

This project is starting as a create-react-app (CRA) because it is the most popular starter for React projects. It includes basic linting around accessibility and a good webpack config. But mainly, it lets us start working on a prototype without many premade opinionated decisions.

But it does lack SEO and accessibility support (a11y) when Javascript is disabled on a browser or with some screen readers. The solution for this is server-side rendering (SSR).

We haven chosen to do CRA then SSR because it will be faster and it is recommended. CRA will look great for demos and user testing. And the components will be reused in a server rendered, accessible framework before public launch.

This task is for researching that path from CRA to SSR using Next.js.

Can we start by using nextjs router?
https://github.com/fridays/next-routes

• Think about data usage in general and how SSR is a pro or con.
• Why does SSR matter?

Resident Value

Supporting equity in our community by ensuring that our community with limited data access on mobile devices causes the least amount of drain on their plan by rendering server side.

Process page template

This is a template to support learning about and applying for City of Austin jobs. The template name will likely change once the requirements are gathered.

Courtney Jacinic is currently developing the content and layout for the initial job pages.

related to process page model- Joplin

Recordings/agenda/transcripts - ATXN

Needs to be researched with users, city staff who manage, requirements gathered, etc

Generic Form Component

Make agnostic form component. We could build it in a way that knows how to consume a standard json schema. ex: https://github.com/mozilla-services/react-jsonschema-form

Service Page / Service Index Page Components

components for pages (do not need to worry about global components like header/footer)

Persist language selection across user sessions

A user should be able to switch languages, close the browser, reopen the site, and see the language they just selected

discussion: https://github.com/cityofaustin/janis/pull/46/files#r158202221

Link Component

Make components out of coa-list_links to ensure strict DOM structure

Accessibility & Performance QA

Have we considered:

• server rendered pages for no-js clients
• a11y standards: WCAG 2.0, Section 508
• data usage, heavy assets

Language Selection

Gives residents the ability to change most content to 1 of 8 human-translated languages.

• Languages should always be listed in the language itself (Espanol, not Spanish)
• Language selection, although a separate navigation element, persists globally
• default copy = "Choose language: English" paired with down-facing caret
• when a user has set a language, any link they click should be prefixed by the language code. We need to research if there is a react-router way to do this? Or how it might work without react router too.

Resident Value

Austin is becoming a more diverse city, supporting residents who primarily speak English and Spanish but a growing number of individuals and families who speak Vietnamese, Chinese, Arabic, and other languages. By making content accessible in top Austin languages–our content, our services serve more people.

Implement homepage design

• update tile/service and module/services in sm, med, and lge

• add 'work in progress' message in sm, med, and lge

• add theme to main navigation plus...

• ...refine mobile and tablet menu and develop new large/desktop menu

• Themes and topics are listed here: Future Navigation airtable Only build in topics we already have services/content for ('Recycling, Trash, and Compost' under 'Housing & Utilities'). Leave off other topics and instead, when a user hovers over a theme with no topics- they should read: (waiting on copy from content team @courtneyjacinic )

• add airport icon to tablet and desktop header, and in mobile menu- links to http://austintexas.gov/department/airport

• add 311 link to header to tablet and desktop, and in mobile menu- links to http://311.austintexas.gov/reports/list_services

• add 'alpha' to 'austin.gov' = 'alpha.austin.gov'

Do not change these things:

• language header
• header/footer colors
• 311 and footer content - will be separate issue
• typestyles

image for alpha.austin.gov: https://www.flickr.com/photos/austintexasgov/13248971115/in/album-72157642552791885/ you can download the right size from the flickr source image

Resident Value

Creating a warm and respectful welcome message to residents and prioritizing their primary paths to getting what they need

Payments

Needs to be researched with users, city staff who manage, requirements gathered, etc

Menu

Here's abbreviated mocks of the homepage with menu link and expanded menu

Feedback Form

• UI Views for each state
• Client form validation
• Integration with Microservice Form Dispatcher
• Workflow Analytics [see below]
• figure out how we want to log email addresses -- currently shows in issue, which isn't very private.
• determine what we want to do in production vs development mode.

Mockup

language translation only shows up as an option on a translated paged (re: see original mock options)

Step-by-step

1. User opts to submit feedback on page
2. Following options pop up:

• Information on this page
• Language translation (only shows up if page is translated from English to another language)
• Technical issue
• Something else

3. User chooses option which prompts a specific ask on the feedback form' (screen 4 above) =

• If selected "information on this page" = How can we improve this page?

• If selected "technical issue" = What technical issue are you having?

• If page is translated to a non-English language, and selected "language translation" = How can this page translation be improved?

• If selected "something else" = How can we help you?

  • Field appears with notification that feedback is public
  • Description field - rich text - required

4. User sends feedback, form captures

• Type of feedback
• Feedback itself
• URL, Device, Browser, OS

More Info

Feedback form only shows up on Service Pages or other Page Templates–not topic or theme pages

Check out further comments & context

Automate language translation notifications to translators

Service Page Components - 1.1 Example Service 1

1.1 Example Service 1

Department page template

• Leave out project tracker section

coordination with backend (especially around API response)

Events/Class page template

–need to mock up–

Component and CSS file/directory structure

Before we go too far, let's get all of our components organized in a good directory structure.

Other SASS things to think about:

• react component dir structure should probably be coherent with our sass dir structure
• package.json references flexboxgrid-sass git repo. is this risky? Not sure if pulling a package this way considers version changes
• Should we update all units to rems?
• update uswds variables with only variables we override

Desktop Services and Service page

Pick a License

https://opensource.guide/legal/#which-open-source-license-is-appropriate-for-my-project

Emergency and non-emergency notification

Needs to be researched with users, city staff who manage, requirements gathered, etc

Get data from API onto a page

Set up storybook for component library

Application block Map

Mobile mockup

Desktop mockup

none, yet

Prelaunch checklist

We should make sure we don't forget to do things like update head tags, meta data, etc. This list seems pretty comprehensive:

Ex: https://github.com/thedaviddias/Front-End-Checklist