San Francisco Health Service System
![SFHSS Home page on several devices](https://kanopi.com/wp-content/uploads/2019/07/Hero-Image-952x609.png)
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.
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.
![Home page on Mobile](https://kanopi.com/wp-content/uploads/2019/07/Mobile-1-375x665.png)
![Menu on Mobile](https://kanopi.com/wp-content/uploads/2019/07/Mobile-2-375x665.png)
![Benefit Plans page on Mobile](https://kanopi.com/wp-content/uploads/2019/07/Mobile-3-375x665.png)
![Health Topics on Mobile](https://kanopi.com/wp-content/uploads/2019/07/Mobile-4-375x665.png)
The Process
Discovery
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](https://kanopi.com/wp-content/uploads/2019/07/cs-userflow-615x819.png)
Wireframes
We created a sitemap and wireframes to guide design and development, then led user testing to validate the simplified site structure.
![Wireframes](https://kanopi.com/wp-content/uploads/2019/07/Desktop-1-615x819.png)
![SFHSS Blog Wireframes Home](https://kanopi.com/wp-content/uploads/2019/07/SHFSS-Home.png)
![SFHSS Blog Wireframes Menu](https://kanopi.com/wp-content/uploads/2019/07/SFHSS-Menu.png)
![SFHSS Blog Wireframes Mobile](https://kanopi.com/wp-content/uploads/2019/07/SFHSS-Blog.png)
![SFHSS Events Wireframes Mobile](https://kanopi.com/wp-content/uploads/2019/07/SFHSS-Events.png)
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](https://kanopi.com/wp-content/uploads/2019/07/Key-Features-1-615x819.png)
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](https://kanopi.com/wp-content/uploads/2019/07/Key-Features-2-615x819.png)
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](https://kanopi.com/wp-content/uploads/2019/07/Key-Features-3-615x819.png)
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.