User experience, content design, accessibility engineering, and a large-scale Drupal implementation for the California Energy Commission.

i

2022 Update: Technical, Accessibility, and Google Lighthouse Improvements

This award-winning example of a successful governmental website got updated in 2022 to improve stability, security, and performance. The content management system was updated from Drupal 8 to Drupal 9, along with the California State Web Template’s accessibility compliance. As a result, the website now features maximized Google Lighthouse scores.

Learn more about why the government website performance matters.

California Energy Commission Google Lighthouse scores: 95, 100, 100, 100.

Access to funding, reports, and key resources on the latest clean energy policies of the state of California.

A newly redesigned and modernized portal for the Commission provides easy access for the public and energy sector stakeholders to critical information about energy planning and policy in California. Key improvements include a modern, brand-aligned, and mobile-friendly look-and-feel, user-centric content organization, and compliance with ADA Section 508 and WCAG 2.1 accessibility standards.

California Energy Commission’s Gold Davey Award

An Award-winning Experience

The Energy Commission website received a Gold Davey Award in 2020 in the category of Governmental Websites.

Davey is judged and overseen by the Academy of Interactive and Visual Arts (AIVA). The AIVA is an invitation-only member-based organization of leading professionals from various visual arts disciplines dedicated to embracing progress and the evolving nature of traditional and interactive media.

Challenges

  • Outdated look-and-feel (from an original 1994 design).
  • Non-responsive for mobile devices.
  • Organization-centric, instead of user-centric information architecture.
  • Difficult to find relevant content.
  • Limited content management capabilities to empower business users.
  • Brand misalignment and experience throughout the website.
  • WCAG 2.1 and AB 434 accessibility compliance.

Results

SymSoft collaborated with the California Energy Commission Web and Communications Specialists to identify brand and communication alignment opportunities while adhering to the rigorous California state accessibility standards.

The process started with a detailed content audit and stakeholder discovery, soon followed by information architecture development and design sprint sessions with top executives and commissioner’s representatives that actively participated in the ideation and decision-making process.

Once finalized, the new navigation and responsive design system were implemented into Drupal, allowing the Commission’s in-house Web experts to modify and create flexible templates for different content types and reduce the time to publish by half.

    Project Highlights

    Energy Commission Practitioners and Industry Experts

    Practitioner-centered Design

    Upon reviewing the website content, analyzing traffic, and interviewing executive stakeholders, we discovered that most Commission’s proceedings follow an established pattern. We organized the website content to prioritize information in a logical sequence, starting with proceedings and rulemaking, policies and manuals, policy implementation programs, project funding opportunities, analysis, and showcases.

    California Energy Commission Information Architecture diagram

    Drupal 9 Implementation

    SymSoft implemented the website using Drupal 9. As part of the project, SymSoft leveraged Drupal’s structured content and taxonomy capabilities to enable dynamic cross-referencing and automated program-related news and event feed.

    The solution allowed California Energy Commission to move from manual file-based website updates to a fully developed content authoring environment, with workflows and role-based access control to ensure appropriate web governance for the content published on the website.

    California Energy Commission responsive website powered by Drupal

    Responsive Web Design System

    SymSoft created an accessibility compliant responsive web design system that included visually rich, brand-aligned components for a wide-variety of devices and form factors. 

    The Fractal-based Web Style Guide system was then implemented in Drupal, allowing content authors to use a range of components that would allow them to produce visually appealing content and online reports, with associated workflows and governance to ensure that content was relevant, accessible, and inclusive. 

    The style guide is used as a content development reference by the in-house communication and Web experts.

    Like what you see?