hero-image-header

Strengthening the Bond Between Health Care and the Public

Foundation for Health Care Quality responsive website redesign (2018)

The Foundation for Health Care Quality (FHCQ) is a nonprofit organization dedicated to providing trusted and independent third-party resources to the health care community.

Why redesign?

Having four different websites under the FHCQ umbrella was difficult for administrators to consistently update each of the sites. Each site also had inherent problems that had been accumulating over time.

My role

I worked with two other ux designers, one ux researcher, and a local digital agency. I focused on:

  • User research
  • Usability testing (existing websites)
  • Information architecture
  • Low- and high-fidelity wireframes
  • Design mock-ups
  • UI style guide
  • Project management

Problems that needed to be solved

  • Each of the websites had a poor navigation experience.
  • Messaging directed users to outdated content.
  • Multiple login pages and locations.
  • Resource documents and event information were hard to find, unavailable or outdated.
  • A lack of a consistent look throughout each of the foundation's websites.

Platform

Responsive website

User research

The project kicked off with a meeting with the client and three classmates who volunteered to work on the website redesigns. We learned about the history of the Foundation for Health Care Quality, discussed the client’s needs and their vision for the project. Initially we thought we were redesigning only the foundation’s website, FHCQ, but quickly learned we would be redesigning five distinct websites. These included the main website (FHCQ) and four other foundation programs they supported: Clinical Outcome Assessment Program (COAP), Surgical Care and Outcome Assessment Program (SCOAP), Obstetrics Clinical Outcomes Assessment Program (OBCOAP), and Washington Patient Safety Coalition (WPSC).

Once we received the project brief from the client, I determined we should start our analysis of how to redesign the sites by conducting user research on the existing sites. We created an email survey (google forms) and set up usability testing with members of the five foundation programs. We scheduled eight candidates for recorded video conferences and also did in-person testing with people from each program.

We sent 20 customized email surveys with 10 questions to users in each of the five foundation programs. We received six responses from WPSC participants and one from a COAP participant.

Below is the survey we sent and the information we received.

email-survey

Information architecture

Once we finished the interviews and gathered all of the information from our email survey, we began work on the new information architecture. To create a user-friendly architecture, we used our research to organize the navigation for each of the five sites. Re-creating an architecture that connects and is consistent across all five websites was challenging. Each site had specific customer needs and a different architecture. We approached this issue by combining all of the websites into one mega architecture. We sorted all of the content into viable groups, which held all of the content from each site and would serve as a top-level category within the navigation. As a group, we accomplished this by collaboratively organizing the architecture printouts on a whiteboard.

After sorting the content into viable groups, each team member created their own architecture based on the top-level categories. I focused my design recommendations on the user feedback from the email surveys and usability results of our testing. Each team member then presented their architecture to the group and we collaborated to develop the final architecture.

informational-architecture-team-photo

Wireframes

During the wireframe stage, the group presented, voted, and had iterative discussions around the sort of functionality the new sites should contain within each of our wireframe layouts. We used sticker voting, which helped us expand our initial ideas into full-scale wireframe concepts.

wireframe-layout

The team falls apart

We thought we had nailed down the informational architecture as a group, but as we moved to the wireframe phase the team started to fall apart. One of the members left, which prompted another team member to leave. I wanted to finish this project for the client, so the remaining team member and I moved forward.

From the information architecture the team created, I felt it wasn’t the best direction to pursue for each of the five sites. We decided to take a step back and do an online card sort test and sent 30 cards to 20 people (using the program Optimal Workshop); 10 of the people were not affiliated with the foundation and 10 others were FHCQ program member users. I wanted to understand how users might group a number of words that were in the old navigation to determine where we could add clarity and efficiently organize the information in the each site’s navigation.

Below is the information we received from our card sort testing.

Information architecture: Round 2

To create a final user-friendly architecture, I used the card sort results to organize the navigation titles for each of the five sites in a consistent layout for each foundation program.

Wireframes: Round 2

Reviewing the email surveys, usability testing and card sort results from FHCQ, the foundation’s other programs and public users drove my new designs. I laid out concepts of the new functionalities, like a simple and clean navigation, easy-to-find resources, event page and member portal.

Low-fidelity sketches

wireframe-sketchs

High-fidelity

Main navigation 01

Foundation for Health Care Quality website
fhcq-home-page-wireframe

1. Main navigation 01

  • A more personal and descriptive navigation for users.
  • Created a consistent navigation layout for all of the other programs to follow.

Main navigation 02

Washington Patient Safety Coalition (WPSC) website
wpsc-home-page-wireframe

2. Main navigation 02

  • Member login access is now in one location.
  • A external link location if needed.
  • A personal and descriptive navigation.
  • Easy access to each foundation program.

Main navigation 03

For the SCOAP, COAP & OBCOAP websites
scoap-home-page-wireframe

3. Main navigation 03

  • Member login access is now in one location for the SCOAP, COAP & OBCOAP websites.
  • A personal and descriptive navigation.
  • Easy access to each foundation program.

Copy layout, with side navigation

For the SCOAP, OBCOAP & WPSC websites
scoap-program-overview-page-wireframe

4. Copy layout, with side navigation

  • A faster option than using the drop-down menu.

Copy layout

For the FHCQ, SCOAP, COAP, OBCOAP & WPSC websites
fhcq-about-us-page-wireframe

5. Copy layout

  • All sites now have content hierarchy.

Event information & resource locations

For the SCOAP, COAP, OBCOAP & WPSC websites
scoap-events-page-wireframe

6. Event information & resource locations

  • Future event information.
  • Easy access to recent event documentation and videos.
  • Easy access to past event agenda.

Member log in - mortal popup window

For the SCOAP, COAP, OBCOAP & WPSC Websites
scoap-member-log-in-mortal-popup-window-wireframe

Member log in - mortal popup window

  1. Fast and easy way to sign in.
  2. Keep users on the same page without directing them elsewhere.

Main member dashboard

Surgical Care and Outcomes Assessment Program
scoap-member-dashboard-page-wireframe

Main member dashboard

  1. Member have easy access to see upcoming events within the dropdown calendar.
  2. Simple and clean pop-out search bar.
  3. Organized resource dropdown menus.
  4. A tab menu for easy access to see the latest resource documents.

Member resource dashboard

Surgical Care and Outcomes Assessment Program
scoap-member-dashboard-resources-page-wireframe

Member resource dashboard

  1. See upcoming events within the dropdown calendar by a highlighted circle.
  2. Detailed event information (month, day, time & location).
  3. Simple resource panels with easy access to download and view documents and urls.
  4. Organized resource documentation filed in the side navigation by year and is repeated in the tabs above the resource panels.

Design mock-ups

When my high-fidelity wireframes were sketched. They came alive in color using the new FHCQ branding.

Main navigation 01

Foundation for Health Care Quality website
fhcq-home-page

Main navigation 02, with member login & link

Washington Patient Safety Coalition website

Main navigation 03, with member login

For the SCOAP, COAP & OBCOAP websites
scoap-home-page

Copy layout, with side navigation

For the SCOAP, OBCOAP & WPSC websites
scoap-program-overview-page

Copy layout

For the FHCQ, SCOAP, COAP, OBCOAP & WPSC websites
fhcq-about-us-page

Event information & resource location

For the SCOAP, COAP, OBCOAP & WPSC websites
scoap-events-page

Member log in - mortal popup window

For the SCOAP, COAP, OBCOAP & WPSC Websites
scoap-member-log-in-mortal-popup-window

Main member dashboard

Surgical Care And Outcomes Assessment Program
scoap-member-dashboard-page

Member dashboard resources

Surgical Care And Outcomes Assessment Program
scoap-member-dashboard-resources-page

UI style guide

Using the company’s new branding I created the UI style guide for FHCQ and the program sites they support.

fhcq-ui-style-guide

The outcome

Once the high-fidelity color mock-ups were designed, we gave the Foundation for Health Care Quality the following list of next step recommendations:

  • Final usability testing.
  • Content strategy and content mapping.
  • Maintenance schedule for updates and scheduled annual copy review for updates.
  • A dedicated person who would be tasked with website updates rather than multiple people from each program.

“We really appreciate it and you did a great job ☺”

Rachel Ward, MHA – Administrator at the Foundation for Health Care Quality

“We appreciate all your work — the site looked great!”

Jeannie Collins-Brandon, Program Director, COAP