San Jose Water

Accessibility lawsuits have begun to gain speed due to the recent government regulations requiring websites to be designed in a way that individuals with disabilities still have access and equal benefit of website information and services. For San Jose Water, the need for a compliant and accessible website was compounded by the fact that they are a public service organization located in one of the global hubs in digital innovation, San José, California.

San Jose Water manages one of the largest and most technically sophisticated urban water systems in the United States, serving 1+ million people in the greater San José, California metropolitan area. When Kalamuna originally audited San Jose Water’s website it was evident that many of the region’s 1+ million residents could not access the company’s general information and service portal. In addition, neither its mobile nor desktop sites met accessibility standards—meaning that many people with visual and other impairments were unable to use and access needed information. The Kalamuna team joyfully took on the challenge and privilege of creating a website that served all of the San Jose Water community members.

User Persona Development: Our initial research exposed the fact that demographic differences among San Jose Water customers was not the most impactful element in defining user needs in the website design. Rather the various tasks users needed to perform, such as paying a bill or looking up water quality concerns was the data point that Kalamuna needed to uncover. To understand and prioritize these use cases, we developed persona scenarios that acknowledged the various tasks and the contextual challenges users might face such as having a disability or time constraints. Prioritizing the many persona scenarios was the first step in reorganizing the new site.

What does a water customer want from their water company...besides water? To have the ability to perform tasks and gain needed information quickly and efficiently. Moreover, individuals with certain disabilities need the very same thing!

Kalamuna took a five-pronged approach to accessibility testing for conformance to the WCAG 2.0 accessibility standards. Kalamuna utilizes a powerful tool called SiteImprove when defining baseline metrics for website performance. San Jose Water’s accessibility score was a dismal 60%. Significant accessibility problems included a lack of semantic hierarchy and swaths of text, buttons, links and images that screen readers, keyboard-only users, and individuals with varying levels of vision problems could not access.

Thoroughly examining the accessibility of colors, code, text, and more, during the discovery phase was crucial: this new site design would have to enable differently-abled people to interact with all aspects of the interface.

• Automated Testing
• Manual Keyboard-Only testing
• VoiceOver testing
• Powermapper.com report review
• SiteImprove report review

Only 17% of San Jose Water’s web traffic was conducted on a mobile device. This metric was staggering due to the fact that in today’s world over half of all internet traffic happens on a mobile device. This exposed that users frequently gave up on the mobile website (m.sanjose.com) due to its poor usability. It also verified that implementing a responsive web design would be a top priority.

Google Analytics revealed that most users were primarily interested in paying their bill when visiting the San Jose Water website. We knew we had to re-architect the website in a way that gave users a streamlined experience and ease of conducting other transactional actions online.

Our technical analysis revealed two unique challenges. First, we saw that making the content editor’s interface robust and easy to use was going to be difficult given the project budget. We also discovered that the legacy site held layers of custom functionality which would need to somehow translate into the new Drupal 8 site, and that would work in a way that could be easily maintained and extended by San Jose Water’s developers.

Our UX research pointed to vast opportunities to combine and shorten content from the original desktop and mobile sites, make it accessible, and make the new site fast and easy to use for our most important audience, water consumers. We shared our findings with our partners at San Jose Water to kick off what would be many collaborative ideation and sketching sessions.

While we knew we would pare down content on the two separate sites and create one streamlined property, we needed to understand more about what users would need from a new site, and how those needs might intersect with the company’s business objectives. We also needed to understand the technical underpinnings of the legacy properties, as well as the ways in which the site did not meet Web Content Accessibility Guidelines (WCAG.) We culled down duplicate content and reprioritized pages based on what customers need from the site, and then further prioritized content in our site map by looking at the importance of its corresponding persona scenario.

Our clickable prototype allowed stakeholders to interact with what would be San Jose Water’s first responsive website. This tool let us test insights and assumptions as we built, allowing us to change course and make progress at the same time. Meanwhile, users who tested the prototype performed a series of tasks; studying test results let us see how we needed to adjust design elements, site functionality, etc. to provide a better experience.

To topple our first technical challenge—creating the content editor’s interface—we used a custom module to tweak the markup and styling of the Paragraphs edit forms. The resulting interface improves upon the confusing out-of-the-box experience that befuddles the average editor trying to create content and layout via rows of nested Paragraphs. Our usability enhancements made the editorial experience flow cleanly down the page, guiding editors smoothly through content creation. To solve our other big problem—the migration of custom functionality from their legacy site to the new one—we provided guide rails for the client team’s developers, implementing a series of extensible frameworks for custom code that follows Drupal best practices and prevents the carry-over of technical debt from old to new.

We not only created one site people can easily use on any device, we also created a Drupal 8 technology platform that the San Jose Water development team can build upon for years to come, saving them time, money, and headaches. In addition, the site’s new mobile use metrics are improving, and its new accessibility scores went from dismal to outstanding.