nbme hero

Interactive Timeline Showcases 100-year History

In honor of their centennial year, National Board of Medical Examiners (NBME) prepared to celebrate and showcase their achievements. They came to Mad*Pow for help refining and presenting their story in an online, interactive timeline that was both informative and engaging. Through collaboration and rapid prototyping, we created a purpose-built interface for the timeline, resulting in a mouse-and-touch capable site that ultimately influenced the design of additional NBME properties.

Project Highlights

  • Rapid prototyping to develop and refine the solution
  • A unique interface designed and coded to share key stories
  • Built on XML/HTML for excellent performance on PCs and tablets

A Design to Show and Tell

Our goal was to simultaneously show an overview of NBME’s rich history, and tell their many stories. We began with research – and 100 years of history provides a plethora of research! We sifted through a wealth of material, both from stakeholder interviews and supporting content: documents, newsletters, annual reports, and videos. The key to success lay in developing a timeline interface that allowed users to explore details while also viewing the bigger picture. We focused on mouse-and-touch interactions that let users determine how they enjoyed the experience.

The Project that Influenced an Entire Brand

The NBME timeline drew users into a rich history in a way they could experience and control. But beyond that, the timeline’s look and feel influenced the next-generation of NBME properties. The color palette and interaction style Mad*Pow designed, established a new design baseline, and the chosen XML/HTML5 technology solution assures great performance for future brand assets using the platform. Our work together began to showcase NBME’s history, but it will continue to support and influence their future.

Fusing Design, Content and Technology

Collaboration was crucial to the success of our project. To this end, we challenged a diverse selection of NBME’s staff to sketch themes ranging from “how a doctor becomes a doctor” to “the science of testing.” The Mad*Pow team turned these sketches into several possible directions via rapid prototyping and critique, with the timeline structure being one of the many ideas. From here the UX and content strategy team evolved the timeline into a set of wireframes that told a story. Together we moved from the initial rough sketches to a structured plan which we then designed and coded into a prototype website.

Backend Simplicity, Frontend Sophistication

Our timeline design called for a design that readers would find easy to navigate, and authors would find simple to use. For the readers, each story, photograph, and video clip needed to fit into the timeline, and appear categorized by date and topic. With HTML5 technology, we provided a rich set of visual gestures to draw the reader into the story: eras would slid in, and vignettes would rise up to fill the screen. Meanwhile in the back end, to make the authoring process as easy as possible for NBME, we coded a program for creating new timeline stories that mirrored the timeline interface. In addition, the coding assures fast load time and quick response for front and back-end users, giving the website the look and feel of a native application.

Check out the NBME Centennial Website.

Want to offer your customers a better experience?

Let's work together: Contact Us Today

Interactive Timeline Showcases 100-year History


NBME Centennial Website
Paul Kahn Experience Design Director   Contact Paul
Andrew Klein Principal, Visual Experience Design   Contact Andrew

Newsletter Sign Up

Mad*Pow HQ

27 Congress Street
Portsmouth, NH 03801

Office: 603.436.7177
Fax: 603.386.6608


179 Lincoln Street
Boston, MA 02111

Office: 617.426.7177


Complete Sale Inquiry Form


Sales: solutions
Press: communications

Get in Touch