A case study in hospital web design

Wyoming Medical Center

Mobile Home

Hos­pi­tals can be incred­i­bly con­fus­ing places. End­less, maze-like build­ings, com­pli­cat­ed med­ical jar­gon, mys­te­ri­ous insur­ance reg­u­la­tions, it all makes for some pret­ty big hur­dles to over­come when you’re try­ing to forge mean­ing­ful patient rela­tion­ships. On top of that, the per­son­al cir­cum­stances for vis­i­tors are often extra­or­di­nar­i­ly stressful.

So it’s vital that web­sites for hos­pi­tals meet these chal­lenges head on, antic­i­pat­ing the needs of their patients, pro­vid­ing calm reas­sur­ances, and quick access to the most essen­tial infor­ma­tion. Of course, a web­site alone will not solve the myr­i­ad com­mu­ni­ca­tion prob­lems that hos­pi­tals face. It also must coex­ist with the per­son­al­ized sup­port and care pro­vid­ed by the liv­ing, breath­ing humans that answer phones, cre­ate pam­phlets, and greet patients.

As the largest, most advanced hos­pi­tal in Casper, the Wyoming Med­ical Cen­ter pro­vides essen­tial care to peo­ple across the entire state. They hired us to to redesign and uni­fy three sep­a­rate web­sites — apply­ing and extend­ing the best ele­ments of a recent brand update.

Our Roles

  • Analytics
  • Content Strategy
  • Visual Design
  • Front-End Code
  • Content Management
  • User Experience Design

Begin with research to ensure we do the right work

After a few days of exam­in­ing data, inter­view­ing stake­hold­ers and absorb­ing as much infor­ma­tion as pos­si­ble, we learned that a huge por­tion of the audi­ence uses the site on a mobile device either at the hos­pi­tal, or on the way. Demo­graph­i­cal­ly, the audi­ence leans old­er and more female. And with the unique and unfor­tu­nate real­iza­tion that many vis­i­tors to a hos­pi­tal web­site are in active pain, acces­si­bil­i­ty for this site became more impor­tant than ever before. 

To pre­pare for design and imple­men­ta­tion, we did a con­tent audit and com­pet­i­tive analy­sis, close­ly exam­ined his­tor­i­cal data ana­lyt­ics and ran SEO reports. All this data was assem­bled into a report that extract­ed the most crit­i­cal met­rics and would help guide the rest of our work.

Define and understand the constraints

Since WMC had recent­ly gone through a major cor­po­rate rebrand­ing, we close­ly exam­ined the gen­er­al brand­ing guide­lines and saw how they had been applied to oth­er projects. These includ­ed spec­i­fi­ca­tions for the col­or palette, typog­ra­phy, and styl­is­tic lay­out rec­om­men­da­tions in the form of brochures, sig­nage and flyers.

We embraced these con­straints, adapt­ing and extend­ing them for the web with a dig­i­tal styleguide. This liv­ing doc­u­ment defines the grid sys­tem, dig­i­tal col­or palette, con­tex­tu­al typog­ra­phy, gen­er­al iconog­ra­phy, form lay­out, and usage of rich media — like pho­to gal­leries and embed­ded videos. 

On the back­end, their exist­ing site had been built in Expres­sio­nEngine (an extra­or­di­nar­i­ly flex­i­ble con­tent man­age­ment sys­tem). They were hap­py with the over­all sys­tem — no need for an expen­sive migra­tion — but it need­ed a thor­ough clean­ing and some extra oomph. We updat­ed to the lat­est sta­ble release and tricked out their instal­la­tion with com­mer­cial third-par­ty add-ons to add advanced search, on-the-fly tag­ging, drag and drop con­tent lay­out, our cus­tom con­trol pan­el theme and much more.

Storytelling helps build strong relationships

To our great advan­tage, WMC pos­sessed a stel­lar blog archive and has a tal­ent­ed writer on staff, con­stant­ly pro­fil­ing new doc­tors, new treat­ments, shar­ing amaz­ing sto­ries of sur­vival and loss. But this excep­tion­al con­tent was stuck in an old copy of Word­press, rel­e­gat­ed to a sub­do­main and loose­ly cross-ref­er­enced with the rest of the site.

mobile-pediatrics.png#asset:154

We import­ed every­thing into the con­tent man­age­ment sys­tem, redi­rect­ed all the old links, and auto­mat­i­cal­ly cross-linked the blog con­tent with relat­ed doc­tor bios, depart­ments and clin­ics. The lega­cy com­ment sys­tem was rarely used so we replaced it with com­ments that syn­chro­nize con­ver­sa­tions between the site and shared posts on Facebook. 

On top of that, we built a flex­i­ble lay­out sys­tem for pro­duc­ing rich­ly lay­ered con­tent. This design sys­tem allows edi­tors to insert pho­to gal­leries, side­bars, pull quotes and videos through­out a sto­ry while main­tain­ing a con­sis­tent, tight­ly struc­tured, respon­sive lay­out. It worked so well, we end­ed up using this edi­to­r­i­al design sys­tem through­out the entire site, allow­ing any­one in the mar­ket­ing depart­ment to cre­ate com­plex, inter­est­ing lay­outs on-the-fly with­out need­ing to fuss with code, or engage a developer.

Consolidated pages favor engagement over page views

Our strat­e­gy empha­sizes qual­i­ty over quan­ti­ty – devel­op­ing longer, more immer­sive pages with sim­i­lar con­tent grouped togeth­er, and redun­dant con­tent elim­i­nat­ed alto­geth­er. The over­all site nav­i­ga­tion sys­tem effi­cient­ly routes most vis­i­tors to the con­tent they need with only one click.

Through­out the site, the faces of indi­vid­ual doc­tors are strate­gi­cal­ly posi­tioned to ini­ti­ate a rela­tion­ship before you step foot in an office. And a care­ful­ly con­struct­ed fil­ter­ing sys­tem makes it easy to find a spe­cial­ist with either med­ical or col­lo­qui­al ter­mi­nol­o­gy (e.g. ortho­pe­dics vs. bone and joint).

Initial results chart a path for the future

The new site launched April 2, 2016, on light­ning-fast man­aged servers at one of our favorite host­ing com­pa­nies, ArcusTech. The results of our efforts were imme­di­ate­ly obvi­ous, with near­ly all ana­lyt­ics data trend­ing positive.

We con­tin­ue to work on the WMC site, fine-tun­ing, opti­miz­ing and per­fect­ing the expe­ri­ence based on feed­back from patients, staff and the community.

Visit the live site »