NC.gov: Digital Transformation
•Download as PPTX, PDF•
4 likes•396 views
Most organizations have service agreements. NC.gov has a mandate: to serve every citizen, non-profit and business in the State of North Carolina. NC.gov was struggling to meet these demands. While all the information one might need was available somewhere within NC.gov's network of agency websites, finding it was challenging. NC.gov broblem was a crisis of usability. As a result, many visitors were frustrated and opted to call agency offices directly, which resulted in slower response times and even more frustration. NC.gov was also on the search for an internal transformation within the state that may change how agencies work together, and how they think about their content and the services they provide to the public. NC.gov needed a transformation. A transformation in design, user experience and technology infrastructure that would better serve its audience.
Recommended
Recommended
More Related Content
Similar to NC.gov: Digital Transformation
Similar to NC.gov: Digital Transformation (20)
Recently uploaded
Recently uploaded (20)
NC.gov: Digital Transformation
- 1. Revolutionizing NC Government for the Web NC’s DIGITAL TRANSFORMATION
- 4. 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
- 8. Marketing, UX, Design Branding 3rd party Vendor Development 3rd party Vendor
- 9. Project Goals • Enhance the User Experience • Unify the Government • Meaningful Content • Findable Content • Device-agnostic • 508 & WCAG 2.0 AA Compliant
- 11. 508 A AA AAA
- 12. Web Content Accessibility Guidelines Perceivable Operable Understandable Robust
- 14. 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.
- 15. Process
- 17. Discovery
- 21. Patterns
- 25. Design
- 27. • Historical Sans-serif • Road Signage in UK • Multiple Weights • Mobile-Friendly • Pay-once Web License
- 31. Develop
- 32. Development Overview • Carbon “CSS” Framework • Modular / Flexible • Responsive - 5 breakpoints • Platform-agnostic • Theme-support • Static development • Digital Style Guide
- 33. 1 2 3 4 5 Elements Components Layouts Pages Branding Atomic Design Architecture
- 34. Results
Editor's Notes
- Today I want to walk you through the story of NC.gov. <click> The office of Information technology services sought out the ability to work with Cabinet agencies to bring state government websites into the 21st century. I’ll provide you with a high level project overview, the problems that NC.gov faced and the methods and best practices that Atlantic BT brought to the table to create a digital transformation. The quest became known as the digital commons because we are working together to make each of the government sites highly informative, useful, and easy to use.
- The Need: Problem Statement: Most organizations have service agreements. NC.gov has a mandate: to serve every citizen, non-profit and business in the State of North Carolina. NC.gov was struggling to meet these demands. While all the information one might need was available somewhere within NC.gov's network of agency websites, finding it was challenging. NC.gov Problem was a crisis of usability. As a result, many visitors were frustrated and opted to call agency offices directly, which resulted in slower response times and even more frustration. NC.gov needed a transformation. A transformation in design, user experience and technology infrastructure that would better serve its audience. NC.gov was also on the search for an internal transformation within the state that may change how agencies work together, and how they think about their content and the services they provide to the public. This is the story of how Atlantic BT solved a tough digital problem to bring about North Carolina's Digital Transformation. We were asked to create a unified look and feel, that shows coordination across the state, will provide better customer service and predictable interface. Up-to-date, robust functionality, accessibility for all devices and for all audiences, and easy-to-maintain websites are also key to this project.
- NC.gov compiled a workforce that consisted of two cross-agency workgroups: The Digital commons Web content committee consists of web content managers and communication personnel from each of the 12 cabinet agencies who are ensuring the websites meet their agency’s needs and the needs of the citizens they serve. The Digital commons technology committee consists of webmaster and developers who are helping with technical standards and deployment.
- If you notice through the following examples, there was no consistency among any of the agency sites. A user would fall on one site and through a simple click transported to a new site. The experience was jolting and confusing.
- Each site was build on a different platform, or created using static html. Some sites were using Dot Net Nuke, LifeRay, and most commonly, there was no CMS present at all. This meant there was no governance or compliancy across any of the agency sites. That each web master for an agency there was no workflow model in place. There was no control.
- It’s not just the visual look and feel, but the language that is being used. As a citizen, if you are try to just contact the agency, or talk to someone it’s explained a variety different ways across each site. One of the problems Atlantic BT needed to solve was how to create a unified voice and language across each of the different sites.
- There were several groups who were brought in to facilitate the digital transformation for NC.gov. Atlantic BT has served as the bridge marrying all groups and forming a solid partnership. groups. NC’s new web presence represents an upgrade with all the making of a modern website. NC.gov is built on a multisite Drupal distribution and hosted in the cloud via OpenShift.
- WCAG = Web content accessibility guidelines
- Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. For Atlantic BT and the digital commons project, accessibility is considered in three parts. To comply with WCAG 2.0 and Section 508, to have content accessibility as well as color contrast requirements.
- The World Wide Web Consortium (W3C) sets the main international standards for the World Wide Web and its accessibility. W3C created the Web Content Accessibility Guidelines (WCAG 2.0) which are similar to Section 508, but on an international level. WCAG 2.0 requires specific techniques for compliance and is more current than Section 508. As part of Digital Commons core mission any work produced had to map to the following standards to guide new web development. We have to comply with Level AA WCAG2.0 and Section 508. As much as it is practical we also needed to comply with WCAG20 Levels AA and AAA. Many countries and international organizations require compliance with WCAG 2.0. The guidelines are categorized into three levels of compliance: A (must support), AA (should support), and AAA (may support). Representatives from the accessibility community around the world participate in the evolution of these guidelines.
- It was important for Atlantic BT to understanding the 4 Principles of Accessibility. Guidelines and success criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is: Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses) Operable: User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform) Understandable: Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding) Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
- Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; A contrast ratio of 3:1 is the minimum level recommended for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging. The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80.
- For Atlantic BT, we needed to create a defined process that would work across each agency. We understand the importance of planning and strategy. Because we were working with 12 different groups, each being taken through the same course of action, it was necessary for us to create a project process flow chart. This documentation allowed each agency that we were working with visually see each step of our process. We could map team members, deliverables and dependencies to a visual timeline. When working with multiple agencies and outside vendors, it was imperative for each team member to understand exactly where in the process we were.
- Our discovery phase is how we refine the global planning and design phases of a digital transformation. Our BA, Software architects, user experience specialists, and marketing placed emphasis on discovering and documenting the following: We work with state communications officials and technical personnel from state agencies to understand how content was created and what work processes looked like. Through leadership of information architecture workshops and user testing, we were able to design a website that was tailored exactly to the needs of the workforce as well as the end user.
- Our first step in the discovery phase was to identify who the primary persona is that uses North Carolina’s websites. We conducted four separate persona workshops working with three different agencies in each workshop. We collected over 100 unique personas through the different workshops. From there, our team consolidated the finding to create seven global personas that encompassed all of North Carolina.
- Personas are useful because they help us identify the wants and needs of the end user. We give them a name and reference back to each during the course of the project.
- Once our personas have been defined, our team did a full technical audit across each of the agency sites. We validated the site structure based on content, page type, and functional component. Sometimes the best approach is a low tech approach. We’re in a high tech business, but we’re doing this with people for people. This is a shot from one of our workshops. Our approach is very interactive. We have key stakeholders out of their seats and putting post-it notes on the walls. We work with each individual to organize recommended components for the site.
- We found consistent patterns throughout each of the sites. Our goal is to generate a global template that can be unified and used across each site. To do this, we had to document what page types would be utilized both now and in the future for each site.
- Once we understand the patterns of the site, we needed to also determine the global template structure for each site. Because a unified look & feel was necessary, we needed to work with the NC.gov workgroups to prioritize content and structure of a page.
- Our site architecture is developed around what are perceived end-user needs based on our persona development and research from analytics.
- From there we created a clickable prototype that went through user testing to validate the page structure and design.
- With our design we took a mobile first approach.
- As part of the design, we created a concept board.
- We picked a font that was both mobile friendly and provided a lot of options for weight. The font we chose, Transport New, stood out because it easy to read. It was first designed for road signs in the UK.
- We established a color pallet that mapped to web compliancy and contrast restraints
- Using invision
- Carbon is a light-weight component model and services framework providing enterprise quality services.
- From a development perspective, we tackled the digital commons project utilizing the Atomic Design Methodology. It is composed of five distinct stages working together to create deliberate interface design system. Atoms: The smallest indivisible particle of matter. These are our inputs, buttons, labels, etc. and on their own are almost useless. For us, this is the branding piece. A brand defines all of the necessary inputs. Brand of our interfaces serve as the foundational building blocks that comprise all our user interfaces. This is where color palettes and font stacks live. Molecules: A group of atoms. Joining our inputs, labels and button, we can build a molecule-form. For us, molecules are relatively simple groups of UI elements functioning together as a unit. Organisms: These are relatively complex UI components composed of groups of molecules and possibly even atoms. An example of this component would be the menu and heading structure for each site. Templates: Page-level objects that place components into a layout and articulate the design’s underlying content structure. Pages: Specific instances of templates that replace placeholder content with real representative content.
- - We achieved the goal of unified visual design - The redesign of NC.gov was the benchmark for creating a new identity for branding.
- We provided a combination of governance, training and tools.
- We provided a combination of governance, training and tools. We did training around the governance, writing for the web and GA.
- We also created a digital style guide that has been published for all of the smaller agencies and departments within the state. At the end of the day we took 12 different cabinet agencies, all of their communication agencies and got them on to the same page.
- Digital style guide provides a seamless workflow for reach of the agencies. It is a living document that has been updated through each iteration of design Operates as a communication tool across each agency The digital transformation of NC.gov is apparent with each design. At the end of this, North Carolina wants more than just 12 new websites with mobile optimization and a great look & Feel and revitalized content. They want to shift their overall culture around supporting and managing a digital experience to be more modern, collaborative and innovative. The process and the story we told with NC.gov supports that dream.