<commit_before>---
layout: post
title: "Our Redesign: Before and After"
category: blog
tags: ux about-us
---

[Bing](http://techcrunch.com/2013/09/17/bing-reveals-its-redesign-and-latest-improvements/){% external_link %}, [Google](http://www.fastcodesign.com/3027704/how-googles-redesigned-search-results-augur-a-more-beautiful-web){% external_link %}, and [Yahoo](http://mashable.com/2013/06/05/yahoo-redesigns-its-search-page/){% external_link %} have all rolled out major redesigns to their search results pages in the past year.

The last time we did a major redesign of our results page was in January 2012. It was long overdue for a facelift.

So, we've redesigned our search results page. We've kept an eye on best practices in the search industry and what media websites (like NPR.org and NYTimes.com) are up to, But, we're not simply following the leaders. We've also [analyzed our search data](http://www.digitalgov.gov/2014/05/07/analyzing-search-data-in-real-time-to-drive-decisions/) to make data-driven decisions that, ultimately, aim to make searchers' experience better on your site.

Below are some of the highlights.

## Basic Search Results

We started with the basic search results because they're the meat of the page. They also have the highest clickthru rate among the various items shown on the page. Here's the before and after for a search on *passport* on USA.gov.

![Search result for passport on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-search-result.png "Search result for passport on USA.gov")

We've done away with the underlining on the title. The snippet is wider and has more space. Clicking or touching anywhere on the snippet (not just the title) opens the link.

## Spelling Suggestions

Spelling suggestions have the second highest clickthru rate so we focused on those next. Here's the before and after for a search on *manual noriega* (sic) on USA.gov.

![Spelling suggestion for manual noriega (sic) on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-spelling.png "Spelling suggestion for manual noriega (sic) on USA.gov")

We've done away with the wordiness and boldface. The suggestion and its corresponding option to override the automatic correction now use plain language and are shown on two lines. We now only use boldface to highlight keyword matches for searchers' queries.

## Search Verticals

Through [usability tests](http://www.digitalgov.gov/resources/digitalgov-user-experience-program/digitalgov-user-experience-program-test-support/), we found that searchers didn't see the options to change the scope of their results in the left-hand column. Data also supports this finding as very, very few searchers clicked on these options. Here's the before and after for a search on *jobs* on USA.gov.

![Search verticals on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-verticals.png "Search verticals on USA.gov")

The new format clusters all options to narrow, broaden, or change the scope of the results together, and places these options directly above the search box. It also shows up to three options with ability to show More &hellip;. The old format placed verticals in the left-hand column below the box and the option to search on related sites in the right-hand column above the box.

## Videos

Eye tracking studies have shown searchers gravitate to video thumbnails. Snippets are also very important to increase clickthru rates. Searchers are more likely to view a video if they understand how it is relevant to what they're looking for. Here's the before and after for a search on *careers* on USA.gov.

![Video search result for careers on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-video.png "Video search result for careers on USA.gov")

The new video format shows one video plus a clearly labeled "More videos about ..." link. It also shows the video's source (in this case YouTube), the length of the video, and a short snippet. The video is now separated from basic search results by thin grey lines. 

Searchers now see inline videos from the past 13 months only. (It used to be forever.) There's a spike in video views at around one year so this time period allows searchers to see recent inline videos for annual events like tax season, national health observances, and holidays.

## News

Here's the before and after for a search on *tornadoes* on USA.gov.

![News search results for tornado on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-news.png "News search results for tornado on USA.gov")

The new news format now matches the look of the basic search results to provide a more seamless experience. Searchers now see news from the last four months only. (It used to be forever, which showed stale content from several years ago in some cases.) Very recent news (less than five days) shows above the top of the basic search results. Less recent but still timely news (greater than five days and less than four months) shows below the basic search results. The old format always showed news results after the third web result.
<commit_msg>Few edits<commit_after>---
layout: post
title: "Our Redesign: Before and After"
category: blog
tags: ux about-us
---

[Bing](http://techcrunch.com/2013/09/17/bing-reveals-its-redesign-and-latest-improvements/){% external_link %}, [Google](http://www.fastcodesign.com/3027704/how-googles-redesigned-search-results-augur-a-more-beautiful-web){% external_link %}, and [Yahoo](http://mashable.com/2013/06/05/yahoo-redesigns-its-search-page/){% external_link %} have all rolled out major redesigns to their search results pages in the past year.

The last time we did a major redesign of our results page was in January 2012. It was long overdue for a facelift.

So, we've redesigned our search results page. We've kept an eye on best practices in the search industry and what media websites (like NPR.org and NYTimes.com) are up to, But, we're not simply following the leaders. We've also [analyzed our search data](http://www.digitalgov.gov/2014/05/07/analyzing-search-data-in-real-time-to-drive-decisions/) to make data-driven decisions that, ultimately, aim to make searchers' experience better on your site.

Below are some of the highlights.

## Basic Search Results

We started with the basic search results because they're the meat of the page. They also have the highest clickthru rate among the various items shown on the page. Here's the before and after for a search on *passport* on USA.gov.

![Search result for passport on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-search-result.png "Search result for passport on USA.gov")

We've done away with the underlining on the title. The snippet is wider and has more space. Clicking or touching anywhere on the snippet (not just the title) opens the link.

## Spelling Suggestions

Spelling suggestions have the second highest clickthru rate so we focused on those next. Here's the before and after for a search on *manual noriega* (sic) on USA.gov.

![Spelling suggestion for manual noriega (sic) on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-spelling.png "Spelling suggestion for manual noriega (sic) on USA.gov")

We've done away with the wordiness and boldface. The suggestion and its corresponding option to override the automatic correction now use plain language and are shown on two lines. We now only use boldface to highlight keyword matches for searchers' queries.

## Search Verticals

Through [usability tests](http://www.digitalgov.gov/resources/digitalgov-user-experience-program/digitalgov-user-experience-program-test-support/), we found that searchers didn't see the options to change the scope of their results in the left-hand column. Data also supports this finding as very, very few searchers clicked on these options. Here's the before and after for a search on *jobs* on USA.gov.

![Search verticals on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-verticals.png "Search verticals on USA.gov")

The new format clusters all options to narrow, broaden, or change the scope of the results together, and places these options directly above the search box. Searchers see up to three options and have the ability to show More &hellip;. The old format separated them, showing the option to search on related sites in the right-hand column above the box and verticals in the left-hand column below the box.

## Videos

Eye tracking studies have shown searchers gravitate to video thumbnails. Snippets are also very important to increase clickthru rates. Searchers are more likely to view a video if they understand how it relates to what they're looking for. Here's the before and after for a search on *careers* on USA.gov.

![Video search result for careers on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-video.png "Video search result for careers on USA.gov")

The new video format shows one video plus a clearly labeled "More videos about ..." link. It also shows the video's source (in this case YouTube), the length of the video, and a short snippet. The video is now separated from basic search results by thin grey lines. 

Searchers now see inline videos from the past 13 months only. (It used to be forever.) There's a spike in video views at around one year so this time period allows searchers to see recent inline videos for annual events like tax season, national health observances, and holidays.

## News

Here's the before and after for a search on *tornadoes* on USA.gov.

![News search results for tornado on USA.gov](http://f22818b4dfc10241d8a3-f1564c64756a8cfee25b6b19953b1d23.r31.cf2.rackcdn.com//redesign-news.png "News search results for tornado on USA.gov")

The new news format now matches the look of the basic search results to provide a more seamless experience.

Searchers now see inline news from the last four months only. (It used to be forever, which showed stale content from several years ago in some cases.) Very recent news (less than five days) shows above the basic search results. Less recent but still timely news (greater than five days and less than four months) shows below the basic search results. The old format always showed news results after the third web result.

{'fraction_non_alphanumeric': 0.06950207468879668, 'fraction_numerical': 0.041870992078460956, 'mean_word_length': 4.631970260223048, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3609140', 'n_tokens_mistral': 3327, 'n_tokens_neox': 2980, 'n_words': 1405}