Case Study: Hospital Safety Score

Description: Redesign of the search experience for the Hospital Safety Score website, which assigns letter grades to hospitals based on reported safety data so that consumers can choose safer hospitals.

Year: Summer – Fall 2014

Platform: Web

My Role: UX Design

What I loved most: Working with a client so passionate about their meritorious mission. According to The Leapfrog Group, as many as 440,000 people die every year from preventable errors in hospitals. Their non-profit Hospital Safety Score website helps empower consumers to make safer hospital choices, and positively influences healthcare reform by pressuring hospitals to improve their safety standards.

The Challenge

To redesign the home page and search experience of the Hospital Safety Score website so that the public 1) is better introduced to what the safety score is and why it matters and 2) can more easily search for and understand results.

original

The website provides powerful data, but originally displayed it in sets of tables that were difficult for ordinary people outside of healthcare to digest. Our mission was to transform this search experience and results so that it’s tailored to consumers first, and reinforce the identity and meaning of the safety score.

The Process

Client Discovery

Discovery was short and sweet for this project. We focused on understanding the mission of the organization, and probing about what aspects of the website were inhibiting their goals. Through these discussions, our team was able to form our high-level strategy: we needed to liken this website’s service to that of comparable, familiar rating websites like Yelp and TripAdvisor.

moodboards

Our creative team utilized mood boards to help facilitate client conversations about tone and identity in a more concrete way. These preliminary ones I created reflect positive, neutral and admonishing tones. The client’s reactions helped to inform not only the visual design direction, but also language and content hierarchies.

Inspiration & Competitive Landscape

I worked closely with the visual design team to gather UI inspiration from other consumer-facing rating sites both inside and outside of the public health sphere. We created a repository of screenshots and links, which I correlated with a Google Sheet to collaboratively note relevant strengths, weaknesses, and opportunities that could be applied to our design.

companalysis

When conducting competitor analyses, I generally focus more on content organization, features, interactions, transitions, flows, responsive treatments, and overall usability, while the visual designers on my team focus more on typography, colors, shape and style.

Information Architecture

Content Planning

I conducted a partial audit to better understand what pieces of information needed to be included where, and how the safety score was calculated. The client had provided new content organization, but we needed to do a taxonomy restructuring exercise to understand where and how the information was changing. I became the content expert on our team, able to provide visual designers mock data sets and meaningful feedback.

ia

Understanding the nitty-gritty details of how the scoring system worked was imperative for us to design data visualization solutions that would simplify the results.

IA Flows

After identifying job stories of user objectives like searching, I sketched flow diagrams to address different user scenarios, improve efficiency, and map out the flows and screens which would need to be incorporated in the wireframes. I then worked hand-in-hand with early wireframe sketches until the core user experience was solid.

flow

Once the IA flow and accompanying wireframes were solid, I documented its diagram and technical annotations in the full UX spec.

Interaction Design

Concept Wireframes: Page Templates

Given that this was only a partial website redesign that would maintain the existing framework and navigation, I started concept wireframes within the context of the overall website structure (e.g. header, menu, footer). The client had provided the content which needed to be incorporated, but it was up to our team to prioritize it through the user interface. First, I iterated the layouts of each page template, collecting and incorporating feedback from other team members. Then, the Creative Director and I worked together to further iterate specific components of the page.

wireframes

Concept Wireframes: Data Visualization

The display of the actual safety data and all its detailed information became the biggest design challenge of this project. While the client had already ran some focus groups on iconography ideas, we wanted to push the boundaries by exploring a variety of ways to convey the complex number data. I created wireframes that showcased different kinds of data visualizations, along with different layouts and navigational structures to organize the data. Inspiration was drawn everywhere from thermometers to heart monitors to the stock exchange to NYC traffic and beyond. The visual design team would then work off these start points to push the ideas even further (and make them purdy).

datavisualization

Usability Testing

This was my favorite part of the project. The wall behind my office desk was completely covered with different data visualization designs. I’d hallway test co-workers as they passed by, asking them questions about a particular wireframe like, “What is this hospital doing really safely?” to see how quick, accurate and assured their responses would be.

To reach more participants and standardize this method, I used one of my favorite user testing tools,  Optimal Workshop, to create an online chalkmark test comprised of the most promising and diverse data visualization designs, and distributed it digitally.

Task: Click on any area in which the hospital is failing.

chalmarktestsAs the results came in, I tracked some of the key metrics that I wanted to observe, like which data visualizations had the quickest response times & most direct mouse paths, and whether or not those clicks were accurate.

results

Optimal Workshop has a robust, automated analytics tool. However, sometimes there are additional, particular metrics that are worthwhile to track manually. As more data come in and additional tests were run, our team uncovered that the iconography approach, visualized by a speedometer shape, yielded the most unified, quick, and accurate results.

Annotated Wireframes

Later, once the core UX design was approved by the client, I completed the full UX spec which was slowly building throughout the process. For this particular project, it was especially important to thoroughly annotate the wireframes and capture additional screen states because these website changes would be implemented by a third-party developer. I defined the behavior for reusable UI elements once only, but made sure to cover all the technical details and wireframe representations that a dev team needs.

Additionally, the visual design team established the look and feel, fleshed out full mockups of each page template, and delivered a style guide to the development team. We decided to include thumbnails of the mocks with their associated wireframes in the UX doc for further clarification.

annotatedwireframes

The Outcome

This non-profit organization leveraged the launch of the new website with updated hospital safety data, firing out press releases and disruption in the public health reform space. While our agency’s role in this effort sadly ended at the completion of the design phase, I have been pleased to see the Hospital Safety Score’s lifted identity featured in press coverage, healthcare social media, and even billboards!

webpages

We achieved a search experience comparable to that of familiar rating sites like Yelp or TripAdvisor, but still maintained the level of serious data associated with the results. Our team was happy to incorporate useful features never imagined during the client discovery, like the Recent Searches feature to conveniently retain and revisit past searches.

webpage3

To my surprise, the usability tests undeniably found this “gas gauge” approach to content organization and data visualization as the victor. The visual design established the look & feel and worked off my wireframes and content plan, elevating the experience. The third-party developers we handed this off to implemented it just right.

Hospitals: The pressure is on to improve your patient safety!

Learn more about my process and other case studies.

Advertisements