Full Build

San Francisco Health Service System

A strategic website to connect government employees with benefits and wellness.
SFHSS Home page on several devices

Client Overview

Since 1937, the San Francisco Health Service System (SFHSS) has been providing medical benefits to Government employees in the Bay area.

They encourage and enable well-being to 126,000 people by raising awareness, providing programs, services, tools and striving to create a supportive workplace environment.

Visit Live Website

The Problem

Making it easier to access medical benefits online.
The SFHSS team started with a static, HTML website that could only be updated by seasoned members of their IT team. They needed a new site that would allow all team members to easily add and feature new initiatives while helping users navigate the complicated world of benefits with ease from any device. 

Civic sites can be tricky for users, but Drupal is a terrific choice for government websites. Kanopi partnered with SFHSS to understand stakeholder and user needs, establish alignment throughout the strategy phase, test and validate the new site structure, collaborate with SFHSS designers, and develop the mobile-first site in Drupal.

The Process


Kanopi helped identify and organize high-frequency tasks to provide clear paths to help users find what they need. They also found creative ways to pull in wellness content to compliment benefit information.

SFHSS User Flows


We created a sitemap and wireframes to guide design and development, then led user testing to validate the simplified site structure.


The Solution

Kanopi used Drupal 8 to build a flexible, component-based architecture. The new structure gives SFHSS editors the ability to design engaging, media-rich pages with multiple ways to present and feature content. We built components using Drupal’s paragraphs module, adding templates and styles to make sure that all elements would work well in any context, all with a mobile-first design strategy.

Key Features

cAlendar of Events SFHSS

Calendar of Events

Kanopi introduced an events calendar that displays key wellness activities available to employees that can be filtered by event type, location, and month including multiple view options.

Content editing for SFHSS

Easier Content Editing

Drupal paragraph and media modules make it possible for the SFHSS team to design and publish engaging content on their website with ease.

Meta tag functionality for SFHSS

Meta Tag Functionality

By introducing a meta tag module, content editors at SFHSS now have the ability to impact search engine optimization.

The Result

With the launch of the new site, SFHSS’ users benefit from a fully responsive, mobile-first accessible website with engaging wellness content, easy access to benefit information, and an event calendar that connects the community to resources, information, and inspiration to help improve their health. The upgraded user experience has already resulted in a 15 percent increase in new users, as well as the impressive stats below.

Increase in page views
+ 47 %
Increase in sessions
+ 33 %
Decrease in bounce
- 19 %

Related Work