Sutter Health Network
Responsive Website

I led the Propane UX team in redesigning the entire Sutter Health website network.
Our design consolidated 30+ individual sites into one site tuned for modern devices.

Personas (Summary)

Based on interviews, research, and statistical analysis, I created personas created to represent the key users of site content.

Persona Detail

I crafted the personas in detail, so they could represent real users during client discussions. They built up the team's empathy with users, and guided us to vital insights when prioritizing features. 

Experience Map

Based on the personas, I created this map charting the overall hospital market and how users engage with hospital medical treatment as a whole. This provided insights on a variety of fronts. 

Site Map (Partial)

Combining client feedback, content strategists' recommended taxonomy and content, practical layout factors, and localization considerations, I constructed a broad structural map for the site.

Affiliate Home Page Sketch

I generally sketch wireframes first, before making digital versions. Working on paper or whiteboard speeds collaboration and ultimately saves time. This sketch illustrates use of headers to adapt a standardized page template to represent various individual hospitals' home screens. 

Home Page

The design provides multiple ways to engage and a configurable 'natural language' drop-down for common needs.

Find a Doctor

Controls for locating a physician or other provider were revised to use terminology users would most likely understand. 

Find a Doctor: Map View 

A map view displays geographic information showing users the closest doctors of a given type based on their search results. 

Find a Doctor: Search Results

Results from a doctor search, showing listings in text, with additional filters for quickly tuning results.

Doctor Profile

In showing the details about a particular doctor here, my goal was to humanize doctors and provide useful information about them (within medical industry requirements).

The screen also highlights the types of insurance accepted, a key piece of information users seek in choosing a doctor. 

Facility Detail

We designed facility specific information to provide important details for a variety of user needs, from finding parking and the cafeteria at a given facility to knowing what services were provided in a given location.

Conditions Page

Offerings at facilities were broken down into Conditions (diseases and physical issues, along with explanatory information) and Services (typically treatments for the various conditions and needs of patients).

Here an overview page provides access to successive levels of information on common Diseases and Conditions.

Condition: Cancer

A high-level/overarching Condition page hosts general information and provides links to more granular information about specific sub-types for that condition. 

Crosslinks and secondary content also connected to other areas of the site, promoting wellness and long-term treatment options beneath condition descriptions. 

Condition: Cancer: Breast Cancer

This 'Sub-type' screen provides multiple 'tabs' of information. Cancer includes Breast Cancer, and shows specific causes, symptoms and treatments.

Healthy Living Overview

We created a Healthy Living section to house Sutter's award-winning content for wellness and daily living, elevating the prominence of this area throughout the site via crosslinks and cross-promotion.

Healthy Living: Category Open

Content is designed such that the user can 'lens open' the portions of Healthy Living that interest them.

Tracking on the back end and persistence on the front end effectively allow customization of site content here and elsewhere without forcing users through a conscious configuration process.


One article template is re-usable across many different genres of content pages, with the addition of specific modules addressing different sections' content needs.