Health Topics Redesign
National Heart, Lung, and Blood Institute public website
The National Heart, Lung, and Blood Institute (NHLBI) website is a large, public facing site that provides health information to consumer, advocate, and health professional audiences.
MY ROLE
UX Designer / Information Architect
STAKEHOLDERS
OSPEEC, The Office of Science Policy, Engagement, Education and Communications for the NHLBI
TIMELINE
9 Months
Part 1: Health Topics Landing Page
GOAL: Create a simplistic Health Topics Landing page. The page will be used primarily used by the general public seeking health information, it needs to accommodate different searching styles.
HEALTH TOPICS LANDING
The Original
The Original Health Topics page was a hybrid of an indexed search page and a general landing page. The search features - buttons and A-Z list - are separated by cards unrelated to the search.
Based on previous user research and site analytics, we knew that the use case for the Health Topic landing page is targeted and specific. Most users found Health Topic pages directly from a search engine. Users arriving at the Health Topics landing page were most likely attempting a pointed search for a specific condition.
HEALTH TOPICS LANDING
Competitive Analysis
Competitive analysis of other consumer health information sites revealed a wide variety of search based pages. Because this is a familiar and highly functional solution, we decided to take this route. For sites with over 150 topics, like the NHBLI we found that the combination of search bar and letter selectors enabled fast and varied search styles. The most appealing pages did not incorporate additional information or cards.
HEALTH TOPICS LANDING
Restructuring Information Architecture
As the primary Information Architect on the team, I examined the role of each element on the current page, with the goal of simplifying where ever possible.
The links at the top of the original HT topic page were designed to take users to commonly searched pages. Moving these links to the Global Navigation reduces an unnecessary click and makes information accessible from anywhere on the site. Removing these buttons from the Health Topics landing page would also simplify the new page design.
Health Topics Landing
Iterative Mock-ups
The initial version blocked out the main elements to be included. At this stage, there were three different methods to refine a search - search bar, browse by letter, and refine by category. This created a significant amount of space between the top of the search and the results. We had concern that a user typing a term would have a disjointed experience if the results were too far removed from the input.
Based on the original observation that users on this page were going to be searching for a specific Health Topic, the refine by category section was removed because it caters more to browsing. We also removed unnecessary dividing lines to lighten and streamline the appearance.
While reviewing early designs, content managers expressed a strong desire to link to other areas on the site from this page. In order to minimize distraction while meeting their needs, we created simple icon cards without images to be used on the right rail.
HEALTH TOPICS LANDING
The Final Version
The Health Topics landing page performed strongly in user testing. Users made use of the different types of search methods available depending on age, computer experience, and type of search. Collaborative and iterative design enabled us to remove everything but the essential elements and user testing confirmed functionality.
2. Clinical Trials
GOAL: Create a modern and dynamic Clinical Trial search index page that enables pointed searches and general browsing. The page needs to meet the needs of a wide range of users from health advocate professionals to the general public.
CLINICAL TRIALS
The Original
The original Clinical Trials landing page utilized an accordion-within-accordion approach. Critical information was buried. Searching for something like Varicose Veins meant scrolling down an extremely long alphabetized list. The Clinical Trial content was also not well integrated within the rest of the site.
CLINICAL TRIALS
Iterative Design: Filters
We decided to use a left rail filter design to remove the accordions and make searching more dynamic. We also knew that the customer wanted to integrate the an API to the content featured on this page. Fields needed to match those within the clinicaltrials.gov API to streamline automation. As the primary Information Architect, I referenced the data fields in the API, to ensure that our content matched. I also referenced schema.org to ensure that fields matched those used by google and other search engines.
The original design had four main categories. In preparation for user testing we decided to add more categories in order to give users the broadest range of choices. If users did not use a category, we planed to remove it after testing.
CLINICAL TRIALS
Iterative Design: Cards
The card for each trial is designed to capture the most relevant clinical trial information. Each title is designed to be an external link to clinicaltrials.gov where more complete information and details about enrollment are provided. The pages is designed to promote and provide information about NHLBI sponsored trials, but not to facilitate enrollment.
Initially we experimented with iconography being a quick way for uses to get the information they needed quickly and intuitively. On version 1, icon-based information was separated by a thin divider and provided at the bottom of the card. On version 2 we added “accepting healthy volunteer” status and an icon for age. The information was moved under the title to give a snapshot before the body description. Similar to the filter design, we decided to test for what information was needed by users as they searched, and remove the rest.
In an effort to connect clinical trials with other pages on the site, we experimented with using a clickable taxonomy term to connect a clinical trial to its related health condition. On version 1, it is displayed as button shaped “Asthma” kicker. On version 2, we moved this information to the bottom of the card so that several clickable conditions could be added without overpowering the design.
CLINICAL TRIALS
Iterative Design: Full Page
While the second version is lighter and provide thorough information. It feels a bit heavy, the informational hierarchy isnt yet complete clear. User testing would help to slim things down.
CLINICAL TRIALS
User Testing Results - Filters
During user testing, users were asked to describe what they wanted to know about clinical trials as they searched. They were also asked to rank the importance of the filter options provided. Based on the the results, we were able to edit the filters to four main categories.
We were also about the simplify the options available in the Recruitment status filter. Originally this section included, “Active, Not Enrolling,” and “Enrolling by invitation.” Both of these options were confusing to users, because trials displayed with this label would not be available to them, so we removed them.
Finally we added a clear button for each section of the filters to give users the most flexibility in adjusting their search. We also added more obvious scroll bars to indicate that options extend beyond the visible containers.
CLINICAL TRIALS
User Testing Results - Cards
User testing revealed that the clickable taxonomy terms (“conditions” at the bottom of the card) were mostly ignored and occasionally caused confusion during testing. They were removed and replaced with non-clickable key words describing the trial. This meant we needed to revisit our goal of better integrating Clinical Trial with the rest of the site. Because this page is designed to take user to another site, we focus Clinical Trials integration efforts on the other pages, increasing the opportunities for content managers to display NHLBI sponsored Clinical Trials.
User testing also enabled us to simplify icon usage. Sex and age were not a search priority for users, so that information was moved to the bottom of the card and the icon was removed.
CLINICAL TRIALS
The Final Version
The Final version features simplified search fields, streamlined information hierarchy on cards and nothing extra.
What’s Next?
Working in an agile environment there is always room for curiosity and improvement.
Whats Next
Typography
User Testing revealed that people had difficulty distinguishing between the H2 and the H3 on the new Research pages. This lead to the testing team’s suggestion of increasing the H2 size on the research pages. Starting with the research page, I decided to take this recommendation a bit further and conduct a thorough analysis to modernize typography and text spacing site wide.
A competitive Analysis also revealed that many other effect NIH sites were using one sans serif font throughout their site. I applied this modern styling in conjunction with smaller text containers size to limit characters per line.
The result is a friendly and inviting scanning or detailed reading experience.
Whats Next
User Experience for Content Managers
The end users aren’t the only users facing pain points! After a massive content migration with content mangers working overtime and the occasional user error, I began thinking about layers of user experience within this project.
I advocated for a backend facelift. Gin theme is a widely used Drupal module that is extremely easy for developers to implement. The modernized UI and the strategically revised button placement will contribute to a more pleasurable content management experience on a daily basis.
Minimal work - Maximum benefits!