White House: Homepage Redesign

The+new+White+House+landing+page+on+launch+day
homepage_before_afterThe White House homepage is one of the most consistently highly trafficked White House pages, receiving millions of visitors a month.

In April 2015, Ashleigh and team released the first-ever responsive White House homepage. The WhiteHouse.gov landing page now displays content in a consistent way, no matter which device you’re using, helping visitors find the most relevant content as quickly as possible.

This redesign was a landmark change in a series of improvements to the White House online platforms to make them more accessible, user-friendly, and in line with modern best practices.

Before the redesign

  • multiple areas of the White House homepage were underperforming, with rotating and tabbed content hidden to most users
  • the second largest image was in the bottom-right of the page, out of site for many
  • the old mobile homepage theme only loaded on phones and served highly reduced content

After the redesign

  • the homepage features only the most important, curated White House content, making it a one-stop destination to find out the priorities of the administration
  • the images reinforce importance, with the largest at the top and the smallest near the bottom
  • content can easily be grouped as a collection and titled or presented as individual items
  • the same content is served on all devices
  • each piece of content featured sees higher click-through rates and engagement

The+White+House+homepage+header+has+a+flexible+design

Flexibility

The Obama White House homepage was updated multiple times a week or day. With these frequent updates come changes in tone, content, and medium that call for different formats.

The redesigned White House homepage accommodates these changes with ease. For example, the header allows for flexible placement of titles, descriptions, buttons, images, and videos without breaking the responsive template and while staying on brand. All while working seamlessly across breakpoints and devices.

More Emotive Communication

In updating the homepage over time, the in-house design team has grown to lead with their thoughtful selection of photographs. Most of the photos are from the official White House photo office collection and are selected to bring the site visitors behind the scenes with the President, First Lady, Vice President, White House staff and guests. This simple method helps communicate the transparency and openness of the administration, while providing human interest and inviting visuals to website guests.

Below is an array of homepage images used in late 2015 and early 2016.

Select+tout+image+for+White+House+homepage

Select+tout+image+for+White+House+homepage
Select+tout+image+for+White+House+homepage.jpeg

Select+tout+image+for+White+House+homepage

Select+tout+image+for+White+House+homepage

Select+tout+image+for+White+House+homepage (5)

Select+tout+image+for+White+House+homepage (6)

download

Veterans

D7_tout_trade_weekly2

Feedback

In conjunction with the release of the new White House homepage, an online form was promoted to take feedback from the public. The vast majority of respondents stated that the experience and look of the updated page was “much better” than the previous experience. Here are some highlights:

I love it. You all have done a great job of making government accessible to us, the people. Keep up the great work.
— Brady, frequent WhiteHouse.gov visitor

At first glance, the homepage appear[s] so much better. I visit WhiteHouse.gov quite often and this is the best homepage I’ve seen thus far. The appearance, easier to view photos, schedules, etc., makes it a lot more user friendly.
— Patricia, frequent WhiteHouse.gov visitor

This is my first time visiting WhiteHouse.gov. I feel very impressed and very informed. So, I will visit the website frequently.
— Carmen, first-time WhiteHouse.gov visitor

News Highlight

The Verge: The White House modernizes its homepage with new responsive design


CLIENT/EMPLOYER
The White House

DESIGN
February 2015

DEVELOPMENT
March-April 2015

LAUNCHED
April 9, 2015

TEAM
WHITE HOUSE

  • Ashleigh Axios: product direction, creative direction, design, content strategy, promotion
  • James Hobbs: UX & product design
  • Amanda Stone: project management & training facilitator
  • Jillian Maryonovich: development & technical product management
  • Acquia Team: development & technical product management
  • Acquia Team: development & technical product management
  • Nathaniel Lubin: review & internal project promotion
  • Daniel Pfeiffer: project approval

SUPPORT FROM

  • Kit Rodofla: traffic insights