nc.gov: digital transformation
TRANSCRIPT
![Page 1: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/1.jpg)
Revolutionizing NC Government for the Web
NC’s DIGITAL TRANSFORMATION
![Page 2: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/2.jpg)
Project Overview
Web Accessibility
Discovery
Design
Development
Process
![Page 3: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/3.jpg)
Project Overview
![Page 4: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/4.jpg)
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
![Page 5: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/5.jpg)
![Page 6: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/6.jpg)
![Page 7: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/7.jpg)
![Page 8: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/8.jpg)
Marketing, UX, Design
Branding
3rd partyVendor
Development
3rd partyVendor
![Page 9: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/9.jpg)
Project Goals• Enhance the User Experience• Unify the Government• Meaningful Content• Findable Content• Device-agnostic• 508 & WCAG 2.0 AA Compliant
![Page 10: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/10.jpg)
Web Accessibility
![Page 11: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/11.jpg)
508
A
AA
AAA
![Page 12: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/12.jpg)
Web Content Accessibility Guidelines
Perceivable Operable
Understandable Robust
![Page 13: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/13.jpg)
Color ContrastRequirements
4.5:1Regular
3:1Large
![Page 14: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/14.jpg)
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.
![Page 15: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/15.jpg)
Process
![Page 16: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/16.jpg)
![Page 17: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/17.jpg)
Discovery
![Page 18: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/18.jpg)
![Page 19: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/19.jpg)
![Page 20: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/20.jpg)
![Page 21: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/21.jpg)
Patterns
![Page 22: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/22.jpg)
![Page 23: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/23.jpg)
![Page 24: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/24.jpg)
![Page 25: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/25.jpg)
Design
![Page 26: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/26.jpg)
![Page 27: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/27.jpg)
• Historical Sans-serif• Road Signage in UK• Multiple Weights• Mobile-Friendly• Pay-once Web License
![Page 28: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/28.jpg)
![Page 29: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/29.jpg)
![Page 30: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/30.jpg)
![Page 31: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/31.jpg)
Develop
![Page 32: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/32.jpg)
Development Overview• Carbon “CSS” Framework• Modular / Flexible• Responsive - 5 breakpoints• Platform-agnostic• Theme-support• Static development• Digital Style Guide
![Page 33: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/33.jpg)
1 2 3 4 5
Elements
Components
Layouts
Pages
Branding
Atomic Design Architecture
![Page 34: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/34.jpg)
Results
![Page 35: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/35.jpg)
![Page 36: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/36.jpg)
![Page 37: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/37.jpg)
![Page 38: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/38.jpg)
![Page 39: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/39.jpg)
![Page 40: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/40.jpg)
![Page 41: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/41.jpg)
![Page 42: NC.gov: Digital Transformation](https://reader035.vdocuments.us/reader035/viewer/2022062523/58f24c7f1a28abc3478b4583/html5/thumbnails/42.jpg)