Redesigning 405d.hhs.gov

Problem

405d.hhs.gov hosts valuable resources to help the healthcare industry strengthen its cybersecurity posture, but the content was disorganized and the site lacks the polish and credibility of comparable websites.

Solution

We reimagined 405d.hhs.gov as a trusted cybersecurity resource that will accommodate the program’s plans for future growth.

My Role

I led the project and worked on the development of a new design system, including its visual and UX design. I gathered requirements from our clients and helped them think like their users. I revamped the UX of key pages while working with our web developer to implement the designs.

How might we redesign 405d.hhs.gov to improve usability and credibility?

Analyzing the old site

When I analyzed the old website, I noticed that there was a gap between how our team thought about our content and how our users would interact with it. For example, we had three different top-level tabs for users to access our materials with plenty of overlap between each of them. At the time, we were only able to pull analytics from limited time periods (i.e., the first week a product was published). This made it difficult to gauge how well people were finding and accessing our content.

Home Page

The 405(d) Program aims to position itself as credible cybersecurity experts. Although web design is not necessarily in the same technical wheelhouse as cybersecurity, having a website without a sleek, professional looking design can imply a lack of technical competence. We believed that cleaning up the site’s design and modernizing the brand would help our users trust our expertise.

Protect Patients & Organizations

This page outlines resources that 405(d) has to help employees in the HPH sector bolster their cybersecurity posture. At first glance, it’s hard to tell where users should go first, and relevant content is hidden away. Some of the relevant content isn’t labeled in a way that the user would quickly understand.

Resources

We listed most of our resources on one page as a text list. Without thumbnails or descriptions, it was difficult for users to understand what our resources were or why they might be interested in them without clicking on them first. Functionally, it’s more like a list of links for users who already know what they’re looking for.

Defining our users

First, we needed to agree on who our target users were and what they knew. Luckily, the 405(d) team had a Task Group: a working group of cybersecurity and health-sector professionals. Our team had developed relationships with members of the Task Group over several years, and we used that knowledge to develop a list of our target user groups. Unfortunately, we didn’t have the time or budget to set up one-on-one conversations with members of the Task Group.

Instead, I assigned each team member a different user group (e.g., IT professionals, small healthcare practices, healthcare administrators) based on their experience working with those users. Then, each team member put themselves in that user’s shoes and thought about what they knew and what they needed from us.

Key Insights: We expected our users to be most familiar with cybersecurity and the Healthcare and Public Health (HPH) sector, and least familiar with what the 405(d) program did. We knew we’d need to present our content as if the user hadn’t heard of us before, and this sparked good conversation with our clients about what that would look like.

From there, we sorted our current products into different categories based on how we expected users to look for them. I used those categories to structure the top-level tabs of the website.

We used a virtual whiteboard to define categories to sort our products.

Information Architecture

We originally envisioned eight top-level categories for our content, plus additional tabs like Contact Us and About Us. This was far too many and didn’t resolve our previous issue of category redundancy. I decided to consolidate our content into five categories, which I believed would make it easier for our users to find what they wanted. I sorted our pages and sections into two separate menus: one main menu with five top-level categories, and a smaller menu with our contact, about us, and portal. I split those pages into a separate menu because they needed to be accessible for all users, but the average user likely wouldn’t be reaching for them first.

Wireframes

I started with low-fidelity wireframes. Our previous site was not mobile-friendly, so I made sure to include mobile layouts. While we expect that most of our users would access the site from their work computers, having a mobile site will help the 405(d) Program engage with people at conferences and other engagements.

I laid out the site using a horizontal grid and imagined modular elements that could be reused across the site. I also imagined new interactive elements, like an interactive widget that would allow users to quickly find resources relevant to their role and organization size.

Designing Prototypes and Refining the Visual Style

The 405(d) program is unique. It’s one of the few programs in the Federal government that must balance the needs of the healthcare industry, government, and cybersecurity. It was imperative to develop a visual style for the site that could speak to each of these industries. Further, our clients had established an illustration-based graphic style that they were proud of, so the style would need to mesh with those illustrations.

Our clients’ color palette included rich blues and golds. I noticed that other companies within the cybersecurity industry favored black, white, and blue. Since blue was within the 405(d) Program’s color palette and is often associated with security and stability, I decided to lean into shades of blue for the design of the site.

Though it wasn’t ideal, we weren’t able to perform usability testing prior to launch due to time and budget constraints. This meant that we weren’t able to iterate on the designs prior to launch. Once the site is launched, we plan to update the site periodically and run user testing.

Final Result: Before and After

BEFORE

AFTER

This project is still in-progress and the final result has not yet been published. However, I’ve identified areas we can improve the site in the future.

  1. Usability testing. This wasn’t something we had time for, but it’s important and will help us better serve our audience. Ideally, we would include Task Group members and people totally unfamiliar with us in our testing.

  2. Shift the site’s architecture to a CMS like wordpress or drupal. This would give our clients better control over the content on the site and prevent bottlenecks on our team.

  3. Shift our posture for publication. Currently, we publish several products on a regular basis, including our flagship newsletter, the 405(d) Post. Currently, we publish three articles every two months in one PDF. I believe that we could build steady engagement and reduce barriers to readership by publishing articles directly to the site every two weeks. This would make it easier for readers to share individual articles and help us track what content our users engage with.