St. Vincent's Medical Center Website

St. Vincent's Medical Center
Franklin Street
My Role
Digital Producer
I worked closely with the Digital Strategist on all phases of the project, with an emphasis on communication with external development partners.
Content Strategy, Information Architecture, UX/UI Design


In 2015, the internal team at St. Vincent's knew it was time for a website redesign. The site was dated, the structure and navigation made it difficult to find information users were looking for, and the design was, at best, cluttered. In their own words, "My eye doesn't know where to go." Not having a responsive site was hurting them in search results in addition to alienating mobile users. Our kick-off call was filled with a lot of excitement (and show-and-tell of our favorite sites) because this redesign had been a long time coming.

I. Content Audit & Persona Development

During the diagnosis phase we did a full content inventory and began to group users into five distinct persona groups: Informed Decision Makers; Proactive Patients; Community, Wellness & Prevention; Advocates; and Medical Professionals. We identified key characteristics, goals, and worked with a writer on our team to develop a representative quote for each persona group.

Information Architecture & Content Strategy

The St. Vincent's Medical Center website had a lot of content. During our content audit we found that a lot of their content was repeated, either word-for-word, or was redundant in meaning. Because they knew their site was hard to navigate, it seemed like they had put the same kind of information in multiple places in hopes that users would eventually find what they were looking for.

We took a page-by-page look at all of their content and explored multiple organization schemes to find the best way to structure and label their new site map and navigation.

Style Tile

We read a lot about an increasingly more common deliverable in UI/UX projects—a style tile—before we incorporated one into our website process. They are most commonly defined as a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. We used this as a first pass at design and interface elements, gathering feedback from the client, but maintaining some flexibility moving forward. This gave us valuable direction as we moved into the formal design phase.

Wireframes & Prototypes

To be able to test out the functionality early on in the process we made several user experience videos and interactive prototypes. We used After Effects to make the videos, and a tool called Floid to make the interactive prototypes. 

Design System

Once we had approval on the style tile and design direction, we created the design system for the website. Their established brand identity served as a basis for the colors and typography. To create their UI style guide we expanded their identity and create all the modular UI elements that they would need for their new site.  


The new website launched on April 8th of 2016. The following results were measured using Google Analytics From April - September 2016, with a comparison to the same date range in 2015.
  • 202% increase in pages viewed per session (from 0.81 to 2.45)
  • Average session duration raised from 8 seconds to 1 minute and 44 seconds
  • Bounce rate decreased by 37 percentage points (from 75% in 2015 to 47% on the new site)
  • On the old site only 1.41% of sessions were from mobile users. This percentage raised to 30.96% in the months after the new website launched.