chicago / design.chicago.gov

The Chicago Design System is a guide for producing delightful technology products and services for the residents of the City of Chicago.

Welcome to the Chicago Design System

The Chicago Design System (CDS) is a guide to producing delightful services and technology applications for employees and residents of the City of Chicago.

The CDS is open source (under the MIT license), and contributions or commentary from City of Chicago employees and the public at large are welcome.

Call for participation

You can get involved by giving us feedback, writing an issue, or finding other ways to contribute.

design.chicago.gov's Issues

Empathy Map

Conduct interface inventory with community

Consider and port existing styles to current system

UX Project Plan

Complete front end questionnaire

https://github.com/bradfrost/frontend-guidelines-questionnaire

Opportunity/ Roadmapping Workshop

UX Questionnaire

Strategy Workshop

Product Research

-A/B Testing

Use 311 service requests Figma comps as a basis for the new design system look and feel

Task Matrix

Create Style Tiles

See http://styletil.es/ for more details.

cleanup jekyll templates

Task Flows

Write a set of blog posts for our audiences

1. leadership at DoIT: why are we doing this and what does it mean?
2. leadership at other departments: same as above, but lighter context.
3. vendors & teams: what does this mean, what are the next steps?

User Personas

Listening Tour

https://design.chicago.gov/all has markdown in last section

the include is in markdown. this is why the other ones were in html, @jdkunesh.

Project Brief

Convert CDS Jekyll instance to Bootstrap 4

• Add bootstrap 4 sass files
• Restyle the site with sass/boostrap 4
• Add logo images for different page sizes
• Make posts reappear
• Asset Addition System
• Commit changes to cds site

Front end questionnaire completed by all teams

• Front end questionnaires completed
• Decide on tech stack based on responses
• Share tech stack on CDS site, with supporting assets

Product Review

(same as in deliver)

Add an FAQ

People have common questions:

what is this
who can use it
how to address counterfeiting
etc.

Links & buttons

When do we use each?

What common scenarios or groups do we see?

This may have to wait for the interface inventory so we address a broad set of scenarios.

Design Brief

For new users, describe the purpose of this design system so they can figure out how to use it and how to contribute.

People need to see this design system and understand how to make it go!

User Research

-participatory design
-task analysis
-contextual inquiry
-journey mapping or service design

Set monthly and quarterly goals for the group

Wireframes

Consideration of global header & footer elements for pay.cityofchicago.org

Given the Chicago Design System's wireframe styling of header & footer elements, let's try applying them to pay.cityofchicago.org and seeing where the system fits and needs extension.

Forms

• Decide on where we divert from US Web Design System
• Publish where we divert
• Publish guidlines in Figma (https://www.figma.com/file/TDPrBq1OzTeCuaQ7DHZwKVqS/US-Design-System-Components_sticker_sheet)

We can start with general guidance on forms:

• Label placement in relationship to forms
• Label letter case
• What makes a good & bad label
• Example text- what are good and bad forms of example text
• Helper text - what are good and bad forms of helper text
• Accessibility considerations

There’s a ton more here:

Buttons (primary secondary etc)
When to use checkboxes vs radio buttons vs dropdowns
But we can start with this initially

Add a code of conduct to the Design System for participation

https://docs.google.com/document/d/1UqK1_M6_I-sm9XLmSJt_SgYfo5tHg9z-ar5SHy62ENI/edit#heading=h.3u02axafjdg5

https://github.com/carbon-design-system/design-system-website/blob/master/CODE_OF_CONDUCT.md

https://www.mozilla.org/en-US/about/governance/policies/participation/

design.chicago.gov templates broken on mobile in USWDS1.0 v0.9

At Tablet scale, left margin breaks in a hinkey fashion. I spent a few hours rooting through the USWDS1.0/CDSv0.9 framework, but its age & density makes a fix troublesome. As we are about to abandon this platform for the new CDS1.0 on Bootstrap 4, let's accelerate that work immediately and begin converting design.chicago.gov.

Thanks!

invite team to sprint planning & retrospective

Broken sites listings

We should update these to reference live sites, and tie this list into the work Saeid is doing.

Goals & Success Metrics Defined

Interface inventory

We need to perform an interface inventory across key properties:

• Coc.org
• Pay.coc.org
• 311
• Chicago business direct
• Buildings app

Sketching/ 6-8-5 Sketching

Share figma assets

• share Figma style tiles (https://www.figma.com/file/NBbALqqS6AxUSPhvdRLy5Fa2/CDS-Basic-Styles)
• share bootstrap 4 figma file
• Take subset of USDS file and share as well (See Forms issue #7 )

Product Review

-Cognitive Walkthrough
-Heuristic Evaulation
-Competitive Analysis
-Accessibility Evaluation
-Content Patterns

Accessibility upgrade

The accessibility support in CDS should give:

• Guidance on the 4w1h questions (who, what, etc)
• Sample accessibility statement
• The definition of accessible support levels for public facing & internal apps. IE-WCAG 2.0 level 2.
• Automated & manual testing techniques & resources including any checklists

Changes to make to the current CDS.org

• Reference this in the writing guide: https://practicaltypography.com/line-length.html

User Engagement / Adoption

-training

User Research

-Usability Testing