UAB MEDICINE

UAB Hospital in Birmingham, Alabama is the largest teaching hospital in the Southeast with a web presence that provides numerous resources to patients and their families. The in-house marketing team of the Health System was called upon to redesign the flagship website, improve usability and increase the overall value to the patient.

All images and wireframes in this case study are from the redesign and launch in 2014. The website has undergone a recent update. Visit UAB Medicine


SITUATION

A NEW DESIGN, A NEW CMS

UAB Medicine's client facing website was dated and difficult to use while being problematic to update for the marketing team. Once evaluation and licensing of the new content management system was complete, collaboration began on a plan to migrate legacy content as we started training on the new CMS.

MY ROLE

As lead designer, I was involved in every step of the project life cycle and engaged in all design decisions. From working with the content manager to determine a more efficient site flow to concepting page layouts, producing sketches, wireframes and prototypes as well as presenting comps to stakeholders.

APPROACH

REUSABLE ELEMENTS

Brad Frost's Atomic Design was my roadmap for creating modular, pattern-based components which ultimately helped the team avoid issues commonly faced in a traditional design/test/deploy project.

APPROACH: ENHANCING USABILITY

A SEARCH DRIVEN WORLD

We have Google to thank for the popularity of search, which in many cases is used before standard navigation. That being said, I made this pattern easy to find and use in our design concepts.

CHALLENGE

IMPROVE ACCESS

The hospital campus is located in the Medical District of downtown Birmingham and occupies 20 buildings across dozens of city blocks. The team knew from patient interviews that access was one of the greatest challenges, so emphasis was placed on location pages and maps.


Working with the dev team and using the Google Maps API, I designed custom map icons and custom CSS for embedded maps on locations pages calling out drop off locations, parking decks and ERs.

APPROACH: EMPATHY

WE'RE ALL PATIENTS

Partnered with Solucient, we recieved valuable visitor data which was used to build profiles, rather than personas. Apart from that we've all had to visit the doctor or urgent care at some point, so it was easy to put ourselves in that role to anticipate needs.

APPROACH

WIREFRAMES

Wireframe examples for a conditions page, a treatment page and a location page.

RESULT

FINAL COMPS

A collection of page layouts and comps from the live launch. These images were presented to stakeholders just before the site went live.