top of page

SX

JOHN F. KENNEDY

Presidential Library and Museum

TEAM

Liberty Concepts

MY ROLE

UI/UX Design

TIMELINE

Jun 2017 - Jul 2018

JFK-cover.jpg
Problem

The original JFK Library website was built years ago. In today's online environment, the appearance of the site was outdated. The website lacked audience engagement and therefore needed to improve its browsing and searching experience. In addition, in recent years, reaching the younger generation audiences and providing them with a more friendly online experience has become an increasing need for the JFK Library. 

 

The client provided us with some preliminary designs from the Small Army. Based on the style guide, we planned out a website redesign project.

jfk-old.jpg

Previous JFK Library Website

Goal

The overall goal of the website redesign project including the following:

  • Increase awareness of the JFK Library

  • Enhance audiences engagement

  • Grow site traffic

  • Provide responsive web experience to reach the younger generation

  • Raise funds and increase donation

Based on the overall goal, the team decided to focus on three primary design goals:

  • Provide audiences with a smoother browsing experience that allows them to easier access the complex content.

  • Provide audiences with a more powerful search function that enables them to find more accurate results.  

  • Design a visually appealing website that matches the brand guideline.

Challenge

As the restructured Information Architecture the client provided has 5 levels of depth. Moreover, the digital archive of the JFK Library contains different types and categories of content. How to design clear navigation across the site for both mobile and desktop experience, and how to provide audiences with a useful search function that allows them to easily find accurate results are the primary challenges.

Who Do We Design For?

The JFK Library has broad audience groups, and the main audiences can be divided into four groups: 

  • Students

  • Teachers

  • Researchers

  • The general public

Their primary motivation for visiting the site including:

  • Learn more about President John F. Kennedy's life and work
     

  • Learn more about Ernest Hemingway’s life and work
     

  • Browse and plan visits for the events and exhibits 
     

  • Find research resources
     

  • Learn and participate in programs and awards from the JFK Library

DIGITAL EXPERIENCE

JFK LIBRARY: SITE NAVIGATION DESIGN

In order to simplify the site’s navigation, global navigation contains only first and second level menu items. For the first level menus with more than eight sub-menus, use a mega menu structure to group and divide the sub-items for quick browsing. In the interior pages, audiences can browse the card content or sidebar to visit deeper pages. Since this is a large site containing five-levels of information structure, the team added breadcrumbs to help the audience be aware of where they are on the site.

Five-level depth navigation experience

JFK-desktop-navigation.jpg

Mobile experience

Same as the desktop’s experience, global navigation on mobile devices contains two levels of menu items. We designed a sub-navigation button at the top of all interior pages. Once the audiences navigate to the second level page, they can use the sub-navigation to access the third level page, and then repeat the process until they reach the deepest level.

JFK LIBRARY: SEARCH EXPERIENCE DESIGN

The audiences have two primary information needs for the search function in the JFK site:

A.   Navigate to a particular page or information

B.   Find specific resources or documents

To meet the different information needs and ensure audiences have smooth search experience, the search function needs to include the following elements:

  • Provide filter and sort options

  • Keep search query after audiences click the search button

  • Provide date range option and advanced search for more accurate search results

  • Provide effective autosuggest for search results 

  • Show the number of resources under each filter category

  • Show the number of search results

  • Provide the Items per page option

  • Using icons for different category results to help the audience more easily recognize and find accurate results

  • Show Your Selection on filters and provide clear all features to deselect all filters

In order to provide a smooth and effective search function to meet the information needs of two different audiences, and at the same time not to overwhelm audiences by providing too many filters. We decide to display only four most useful filters and collapse all other filters. In addition, the advanced search option is hidden by default.

Search Results

Search results.jpg

No Results

Search-no results.jpg

DESIGN DECISION

HP-DD.jpg
JFK-DD.jpg
What Did I Learned?

  • Use prototyping to test design ideas as early as possible which serves as a solid foundation for the final solution.

  • Always fight for a better user experience. Enhance the mobile search experience maybe the next tasks.

  • Constraints always exist in every project. Focus on the key experience first, but also try to provide a good user experience on the secondary experience.

bottom of page