Nikos Karakatsianis - Digital Product Designer
MacBook-Mockup-v16.jpg

NS&I Heritage Timeline

 
MacBook-Mockup-v16.jpg

NS&I Heritage Timeline

Lead UI Design

dia.jpg

NS&I is one of the largest savings organisations in the UK which traces it's roots back to 1861. Both a government department and an Executive Agency of the Chancellor of the Exchequer, all their savings are backed by HM Treasury.

In order to highlight their rich history, as part of their corporate site redesign, they wanted to create an interactive timeline.

 

The Challenge

NS&I Has a vast archive of photographs, documents and other artefacts stretching back to their founding in 1861. We needed to sift through all this and identify the relevant information in order to plan out and represent it clearly and concisely, while also creating a site that was engaging and felt interactive.

 

Research

NS&I-collateral.jpg

Weeks were spent painstakingly pouring through over 100 years of photography, artwork, documents and collateral to use in the timeline. Once we had identified what was important and what could be left out, a UX Designer put together a set of functional wireframes which were then used as the basis for the UI and Interaction Design.

 

Components

NS&I-Timeline-Components.jpg

Several panel types were developed to account for different content types in different situations.

 

Design

The key theme of the design was this continuous line, drawing the user through the experience and bringing them to key aspects of the timeline.

Periodically through the site, when a major event or time period was encountered, a fullscreen image or video background would scroll into view and panels would scroll over the top of it. This lends a sense of gravitas to that particular portion and adds interest.

NS&I-Heritage-Timeline-mockup.jpg
 

CREATIVE LEAD: KARDO AYOUB
UX DESIGNER: JAMIE STANTONIAN
DEVELOPMENT: SIMON MORGAN