Nikos Karakatsianis - Digital Product Designer
NS&I-laptop-mockup.jpg

NS&I Corporate Site

 
NS&I-laptop-mockup.jpg

NS&I Corporate Site

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 their push to move to an all-digital future, and with an openness to creative ideas, NS&I wanted an updated corporate site.

 

The Challenge

Update and modernise the NS&I Corporate Site with an emphasis on clear communication, while incorporating the fresh, clean NS&I brand. We approached this site design from both an analytical and creative point of view to create a corporate site that was more visually engaging than the average and was experiential as well as informational. To do this we wanted the site to be fully responsive, make use of all the available screen space rather than be restricted to a narrow grid and utilise colour in a meaningful but unobtrusive way. 

 

Workshops

war room 1.jpg

In the beginning of the process we set up a 'War Room' in which we broke down all the different requirements for the corporate site and arranged them in a site map.

 

User Testing

Screen Shot 2018-03-07 at 16.12.57.png
Screen Shot 2018-03-07 at 16.14.07.png
Screen Shot 2018-03-07 at 16.13.48.png
Screen Shot 2018-03-07 at 16.14.26.png

We conducted a series of rounds of user testing to get feedback about how the wireframes were progressing. This really helped us in understanding user-behaviour and how it differed between users who were current or potential customers, journalists looking for information for stories and financial advisors looking for information to help clients. 

 

Components

NS&I-components-mockup.jpg

The site is going to apply a lot of information design and reuse this information, as well as it's constructs, across various areas of the site. With this in mind, working in Sketch, a components-based system was created to facilitate the re-use of design elements as well as streamlining the design process for further screens.

 

Design

NS&I-devices-mockup.jpg
NS&I-page-mockup.jpg
NS&I-desktop-mockup.jpg
NS&I-iphone-mockup-1.jpg
 

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