Smithsonian Dashboard

Format: Interactive Data Visualization Platform
Date: 2014-2015
Clients: Smithsonian Institution, Office of the Chief Information Officer (OCIO)
Skills & Technologies: Drupal, JQuery, Highcharts, Bootstrap, Masonry, CSS FLIP, JSON, Responsive, Google Maps API, Branding
URL: http://dashboard.si.edu/
(The Smithsonian is currently in the process of switching their internal metrics  to the Tableau platform and as such they are not currently maintaining this site or the SharePoint lists it ingests. Some of the data may be out of date and the site functionality impaired as a result.)

The Smithsonian is the world’s largest museum, education, and research complex. More than just its 19 well-known museums and 9 research centers, there are over 200 Smithsonian affiliates across the United States and internationally. Along with over 154 million artistic and scientific items in its holdings and an operating budget around $1.2 billion, the Smithsonian has the gift and the curse of being large, of containing multitudes, of being almost too big to comprehend.
But that’s where we came in.
Homepage: The Homepage includes a curated selection of metrics from across the site which link directly to the detail page for that metric
Working with Smithsonian’s OCIO Director of Strategic Initiatives, I and my team at Quotient came up with a design and a plan to take a tool for internal auditing and use it to help the Smithsonian tell their story to the public, through data.
Research Page: Metrics are organized into thematic categories and then divided into sub-sections. Users have the ability to display charts from a list of options including bar, stacked bar, and line graphs. Where data is available, users have the ability to filter metrics down to individual units.
The Smithsonian Dashboard started off as a humble internal tracking tool for Smithsonian staff to monitor a variety of metrics such as traffic to Smithsonian destinations (both online and real world), progress on the efforts to digitize the massive Smithsonian collection, and the breakdown of annual budgets. The foundation was already there, we just needed to reinvent the presentation for an audience of non-experts.
Card flip animation powered by CSS animations.
We designed the Dashboard for interested learners first and foremost. The vibrant colors don’t just make for attractive charts, they tap into the Smithsonian’s spirit of optimism. The use of “cards” leverages familiar design schemas established by titans like Google, while the use of animation to present relevant information on both sides adds a tactile sense of familiarity that reminds visitors of board games and flashcards.
Special Interactivity: In addition to metrics and charts, some data is available to be viewed through unique platforms such as this interactive map showing the locations of Smithsonian Affiliates.
Where data is sufficiently granular, users can even filter the metrics by subgroups, display the data in a variety of chart formats and tables, and even download images or .CSV files for use in presentations and spreadsheets.
Museum Pages: Included are overview pages for the Smithsonian Museums & Zoo that include a collection of metrics related to the museum as well as additional narrative information.
The dashboard is easy for administrators to use, leveraging the existing Sharepoint lists they were already familiar with to import the data that fuels its many charts and metrics. The site is fully responsive for mobile devices and pulls in data regularly, several times a day, to ensure people see the latest figures when they visit the site.
About Page: The About page includes details on data collection methods as well as information categorization of metrics.
Since its launch the Smithsonian Dashboard has quickly become one of the most visited Smithsonian web properties and the premiere location to get relevant, current data on “the nation’s attic” and the world’s largest collection of academic treasure.

You may also like

Javenir Original Typeface
Graphic DesignPrint DesignTypography
Mixed Signals Guerilla Marketing
AdvertisingGraphic DesignStreet Art
National Geographic TV Work
Print DesignMotion Graphics
Smithsonian Online Virtual Archives
BrandingWeb DesignWeb Development
Logo Designs
BrandingGraphic DesignTypography
Unitec Electronics Redesign Wireframe
Web DesignUI/UXInteraction Design
Sherman's March and America
Motion GraphicsInteraction DesignEditing
Copyright & Wrong presented by AIGA-UMBC
Graphic DesignIllustrationPrint Design
Wikipedia Article Feedback v5
UI/UXWeb DesignWeb Development
Quotient Inc. DrupalCon 2017
Web DesignWeb DevelopmentBranding
Back to Top