Digital Transformation of NC Government for the Web

THE STATEOF THE STATE

Project Overview

Web Accessibilit

y

Discovery

Design

Development

Process

Project Overview

Agencies• NC.GOV• Department of Cultural

Resources• Department of Health & Human

Services• Department of Environment &

Natural Resources• Department of Public Safety• Department of Administration

• Department of Revenue• Department of Commerce• Office of the Governor• Office of Information Technology

Services• Office of State Human Resources• Office of State Budget &

Management

Marketing, UX, Design

Branding

3rd partyVendor

Development

3rd partyVendor

Project Goals

• Enhance the User Experience• Unify the Government• Meaningful Content

• Findable Content• Device-agnostic• 508 & WCAG 2.0 AA

Compliant

9.9 MILLION

Web Accessibility

508

A

AA

AAA

Web Content Accessibility Guidelines

Perceivable Operable

Understandable Robust

Color ContrastRequirements

4.5:1Regular

3:1Large

10 tips• Add alt text to images and add labels to forms.• Use heading tags, table headings and lists.• Provide sufficient contrast between text and

background colors.• Make each page navigable by keyboard alone.• Allow pausing of animations.• Add skip to content links.• Add a meaningful page title.• Avoid 'click here' link text.• Keep navigation consistent.• Avoid pop-up windows.

Process

Discovery

Patterns

Design

• Historical Sans-serif• Road Signage in UK• Multiple Weights• Mobile-Friendly• Pay-once Web License

Develop

Development Overview• Carbon “CSS” Framework• Modular / Flexible• Responsive - 5 breakpoints• Platform-agnostic• Theme-support• Static development• Digital Style Guide

1 2 3 4 5

Elements

Components

Layouts

Pages

Branding

Atomic Design Architecture

Digital Style Guide

• Living Document• Uses KSS• Seamless Workflow• Communication Tool• Included with Carbon™

Results

–Steve Jobs

“Design is not just what it looks like and feels like.Design is how it works.”

Thank you!Questions?

You can find me: @tcaldsimon