Building an Engaging Interactive Timeline Website with NCSBN

We partnered with NCSBN to design and code an immersive timeline experience celebrating their important contributions to nursing.

In conjunction with the National Council of State Boards of Nursing (NCSBN) website redesign, the NCSBN team asked Sparkbox to rejuvenate the design and user interface of their historical timeline to correspond with the celebration of NCSBN’s 40th anniversary. We partnered to design the experience, code the user interface, and support them as they integrated the code with their content management system (CMS).

The design of the NCSBN Timeline homepage hero

The Need

The NCSBN’s original interactive timeline lived on a page of their website and had been built before the widespread adoption of mobile devices. This meant that it was not responsive and was bounded within the confines of a 1024 pixel width. NCSBN wanted a modern, experiential, and engaging timeline that would live as a microsite but be still managed by their CMS. They also wanted to reuse the existing content architecture, copy, images, and videos and simply add the more recent milestones to follow the existing content strategy.

User Experience & Design

Our team reviewed the existing interactive timeline, taking note of the information architecture, identifying common content sections, and assessing the amount of information and assets in each. Their original timeline started with the current year and worked back in time—but because of their robust history, we proposed an approach that would have a homepage to introduce and show highlights from each time period. Visitors could quickly get a fuller sense of NCSBN’s contributions to nursing and dig deeper into the content that most interested them (or all of it!).

Writing on the wall with printouts of the existing site
Printing out the pages of the existing timeline site gave us a better overview of the content and informed us as we re-structured the site to help it flow better.

We brainstormed modern ways to experience the information with scrolling and animations and developed navigation concepts for the timeline website that made use of the full-screen width of the page. We created low-fidelity mockups to illustrate what we were thinking, and NCSBN chose the direction that best met their needs.

Wireframe options for the website Website design process Overview of the website interactive prototype design
Top: Initial wireframes showing a few different directions we considered for structuring the site. Middle: Design explorations. Bottom: An overview of the final design direction and interactive prototype.

From there, the design team applied NCSBN’s new brand and crafted a look that was sophisticated and encouraged exploration through clear navigation and animation. We wanted NCSBN’s visitors to easily access six major time periods and be able to jump around in time to see the accomplishments of their colleagues and peers and the major milestones of the organization. For this, we used an elegant timeline that ran along the left side of the year pages.

The sidebar navigation of the NCSBN Timeline website
The sidebar navigation on the time period pages allows users to quickly navigate between pages.

But because it is an interactive timeline, we also wanted to provide a way to page through from one period to the next and experience the story of NCSBN as it happened. For this, we added next and previous navigation at the end of each time period so users could page the timeline like a book.

The footer navigation
The large navigation items at the bottom of time period pages encourage users to continue browsing chronologically.

To encourage movement through the timeline, we created subtle animations. From a bouncing arrow on the homepage encouraging visitors to scroll for more to images and copy as the visitor moved down the page, we used a light touch so that the content was at the forefront.

Development

We built the timeline to be mobile-friendly using modern CSS and JavaScript best practices. Knowing that many of NCSBN’s visitors would use this website at work, and because web analytics showed a large proportion of Internet Explorer 11 users, we made sure that the same animations and modern browser features (such as sticky headers) worked for these users. And we took a progressive enhancement approach to optimization to ensure that most visitors would have a great experience regardless of their connection speed and chosen browser.

Once we completed frontend coding, we provided NCSBN’s team with templates. Their team integrated the frontend code with their CMS, and we supported NCSBN’s team along the way, making tweaks and adjustments to components and styles as needed. NCSBN’s team then migrated their content to the CMS and built out the timeline website.

A look at the new NCSBN Timeline design

Results

Newly refreshed, this beautiful timeline website celebrates NCSBN’s accomplishments and contributions to nursing. We’ve enjoyed our long partnership with NCSBN’s team, and we are always excited about opportunities to create engaging and interactive ways to experience content on the web.

See The Timeline Site