PG&E Accessibility Redesign


The Story

Pacific Gas & Electric (PG&E) provides natural gas and electricity to most of the northern two-thirds of California, serving approximately 16 million people and 5.2 million households.

Many of their households, especially lower income households, access the experience via their mobile phones, but only certain sections of the experience were designed with mobile in mind. 

After the company was involved in a lawsuit over the accessibility of their online experience, they additionally needed help bringing their experience in compliance with federal accessibility guidelines. 

Their site has multiple identities, the most prominent two for residential and business customers. They also maintain a safety portal, corporate information, newsroom, and a collection of additional micrositesall linked together, but with different navigations and visual identities.

The sites contained thousands of pages of content, much of which was hardly, if ever, even accessed or read by visitors. 

The Ask

  • Create a template and component system for their unauthenticated functions and content housed in SiteCore. Our team's copywriters would use this system to rewrite and edit content and then hand off to PG&E to use in the future.
  • Unify the navigation, layout, and visual system to create a single identity and enable seamless navigation amongst different sites and microsites.
  • Bring the site into accessibility compliance to WCAG AA standard
  • Make the system work for mobile
  • Un-bury the content and make it easier to digest and navigate, roughly reducing the content to 1/3 its original volume

The Work

  • Led a team of 2-5 user experience designers (depending on the project phase) working on the core residential experience
  • Wireframes and annotations for a responsive component and template design system that enforced consistency and a unified identity, encouraged writers to create easier to scan "chunks" of content, and meet accessibility compliance. This system was used by the parallel projects for the Business portal and Energy Efficiency initiatives and by our content team as they re-wrote and reduced the content
  • Trained our creative team on design for accessibility and introduced a self-auditing system
  • Created a site map built in coordination with the content strategy team to organize the reduced content
  • Gathered feedback and requirements from client stakeholders, and coordinated work with parallel portal tracks as well as visual design, development, and content tracks of work.
  • Participated in the discovery & define phase of the small business portal


User Journeys (Small Business Portal)


Wireframes and annotations


Site map

Our site map needed to contain a visual vocabulary to account for several important factors affecting pages and how they connected and related to each other. We weren't designing the authenticated side of the experience, but still needed to document where we linked to the authenticated page, it was important to our developers to know which pages had forms and interactive elements, and we wanted to be careful to indicate where we were capturing links repeated elsewhere in the experience.


Visual Design