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 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!).
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.
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.
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.
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.
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.
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.