St. Vincent’s Website

Client

St. Vincent's Medical Center

company

Franklin Street

Year

2016

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.

Requirements

Content Strategy, Information Architecture, UX/UI Design

Background

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.

View deliverables

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.

View style tile

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.

view wireframes

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.

Results

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.