ConvergeSE: State of the state - Digital transformation of NC State Government
•Download as PPTX, PDF•
4 likes•537 views
The (current) wikipedia definition for digital transformation is: “changes associated with the application of digital technology in all aspects of human society.” That definition perfectly describes the unification of the NC.Gov’s 12 different agencies as part of the Digital Commons project. Some might mistakenly refer to this project as a website redesign, but a redesign typically focuses on only one brand and one website. What Atlantic BT’s team faced with the NC.Gov project was a landscape of multiple brands, multiple websites, and the views of multiple stakeholders for each agency. The NC.Gov website had become such a maze that the public was opting out of using any of its online resources at all. The state of North Carolina understood it needed a unified approach from perspectives of branding, governance, content, and navigation. They also needed help to determine the best platform to accommodate their multiple site administrators and contributors. This kind of Digital Transformation goes beyond a new website design. It goes to the heart of the connection between people and technology. It’s the story of a state government following its mandate to serve the needs of every citizen, non-profit, and business in North Carolina.
Recommended
Recommended
More Related Content
Similar to ConvergeSE: State of the state - Digital transformation of NC State Government
Similar to ConvergeSE: State of the state - Digital transformation of NC State Government (20)
Recently uploaded
Recently uploaded (20)
ConvergeSE: State of the state - Digital transformation of NC State Government
- 1. Digital Transformation of NC Government for the Web THE STATE OF THE STATE
- 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
- 11. Project Goals • Enhance the User Experience • Unify the Government • Meaningful Content • Findable Content • Device-agnostic • 508 & WCAG 2.0 AA Compliant
- 12. 9.9 MILLION
- 14. 508 A AA AAA
- 15. Web Content Accessibility Guidelines Perceivable Operable Understandable Robust
- 17. 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.
- 18. Process
- 20. Discovery
- 24. Patterns
- 28. Design
- 33. • Historical Sans-serif • Road Signage in UK • Multiple Weights • Mobile-Friendly • Pay-once Web License
- 35. Develop
- 36. Development Overview • Carbon “CSS” Framework • Modular / Flexible • Responsive - 5 breakpoints • Platform-agnostic • Theme-support • Static development • Digital Style Guide
- 37. 1 2 3 4 5 Elements Components Layouts Pages Branding Atomic Design Architecture
- 38. Digital Style Guide • Living Document • Uses KSS • Seamless Workflow • Communication Tool • Included with Carbon™
- 41. Results
- 46. –Steve Jobs “Design is not just what it looks like and feels like. Design is how it works.”
- 48. Thank you! Questions? You can find me: @tcaldsimon
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: What Atlantic BT’s team faced with the NC.Gov project was a landscape of multiple brands, multiple websites, and the views of multiple stakeholders for each agency. The NC.Gov website had become such a maze that the public was opting out of using any of its online resources at all. The state of North Carolina understood it needed a unified approach from perspectives of branding, governance, content, and navigation. They also needed help to determine the best platform to accommodate their multiple site administrators and contributors. 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
- There are roughly 9.9 million residents in NC. When we started to map out how to tackle this challenge, we had to keep these users in mind.
- 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 Web Content Accessibility Guidelines (WCAG 2.0), be Section 508 compliant, and to have content accessibility as well as color contrast requirements.
- Understanding Section 508: Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to access available to others Understanding Conformance: Conformance to a standard means that you meet or satisfy the 'requirements' of the standard. In Web Content Accessibility Guidelines (WCAG 2.0) the 'requirements' are the Success Criteria. To conform to WCAG 2.0, you need to satisfy the Success Criteria, that is, there is no content which violates the Success Criteria. Understanding what NC.gov had to conform to: As part of Digital Commons core mission any work produced had to conform with Level AA WCAG2.0 and Section 508. As much as it is practical we also needed to comply with WCAG20 Level AAA. 1. Conformance Level: One of the following levels of conformance is met in full. Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided. Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided. Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.
- Once we understood what was needed for conformance, It was important for Atlantic BT to understand 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.
- Using invision
- 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
- Carbon is a light-weight component model and services framework providing enterprise quality services. Carbon is built on the following principles: Create a more flexible architecture via a decoupled, metadata-centric system Reduce complexity by providing access to services as small replaceable components Encourage the separation of concerns, resulting in code assets that are easier to maintain, adapt and reuse in a complex and dynamic operating environment Improve quality with highly documented, fully tested code
- 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 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. This became our living document and an element we continuously update. The style guide uses KSS, provides seamless workflow. It also operates as our communication tool, and is included with Carbon.
- 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
- - 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.
- 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.