Case study – ISO website design

The Insurance and Savings Ombudsman required a new brand, and with it, a fancy new website. I was part of this project from the very beginning and designed both the website and other brand collateral, such as Annual Reports and stationery. 

I worked closely with the lead UX designer, creating wireframes together. I then designed the site, and worked in collaboration with the developers to realise it. The design of the site is clean and simple, using a lot of white space.

The brand had already begun to be created. The logo had been made and the primary colour palette chosen. The first thing I did was choose Proxima Nova as the primary brand typeface – a modern, friendly sans-serif. I only used the Bold and Light weights, as I liked their contrast. I also wanted to use the same font on and offline, and Proxima Nova is available for both.

Because I was to be the primary designer for the brand, I needed to be conscious of the design decisions eventually affecting the brand print materials. As I expanded the colour palette, I used Pantone colour tints that would work online as well as in print. I made sure all of the colours used were web accessible to WCAG AA standard. When designing, I periodically change the system view settings to greyscale to check the contrasts of my colours.

   Home page    The use of New Zealand flora gives a fresh, welcoming look, while also serving to differentiate between sections. The home page simply acts as a welcome message, explaining what the ISO do, and navigating users to their core functions. 

Home page
The use of New Zealand flora gives a fresh, welcoming look, while also serving to differentiate between sections. The home page simply acts as a welcome message, explaining what the ISO do, and navigating users to their core functions. 

 
   Header    I began the design of the site with a minimal approach. I wanted to maintain as much white space as possible throughout the site. I began the site design with the header, and decided to make it white, rather than a solid colour. This meant I'd need to separate the header from the content. To do this, I used a simple light blue line.    The UX designer and I were not fans of busy dropdown menus. We kept the navigation simple, with only top level pages linked in the main nav bar. I gave the ‘About Us’ and 'Contact Us’ a different style, as these items had a different type of content, for a different purpose.     At first, I had the idea of the navigation collapsing onto three rows for use on mobile. Unfortunately, the Account Manager was not a fan of this, so I ended up using a more traditional mobile menu.

Header
I began the design of the site with a minimal approach. I wanted to maintain as much white space as possible throughout the site. I began the site design with the header, and decided to make it white, rather than a solid colour. This meant I'd need to separate the header from the content. To do this, I used a simple light blue line.

The UX designer and I were not fans of busy dropdown menus. We kept the navigation simple, with only top level pages linked in the main nav bar. I gave the ‘About Us’ and 'Contact Us’ a different style, as these items had a different type of content, for a different purpose.

At first, I had the idea of the navigation collapsing onto three rows for use on mobile. Unfortunately, the Account Manager was not a fan of this, so I ended up using a more traditional mobile menu.

 
   Landing page header    The landing pages on the site have a secondary navigation, which allows users to dig deeper into the site. I quite that the style of these is kept different to the main navigation. Housing the secondary menu inside the section header is a cue that you are exploring deeper into that section.   When I later designed the  ISO Annual Report , I used this secondary navigation style for the contents lists.

Landing page header
The landing pages on the site have a secondary navigation, which allows users to dig deeper into the site. I quite that the style of these is kept different to the main navigation. Housing the secondary menu inside the section header is a cue that you are exploring deeper into that section.

When I later designed the ISO Annual Report, I used this secondary navigation style for the contents lists.

 
   Breadcrumbs    Probably my favourite detail of the site. The bar expands as the breadcrumbs grow longer. When I designed this, I thought the developers were going to hate me, but they got behind the idea, even naming the <div> classes after Hansel and Gretel, e.g. Gingerbread House.

Breadcrumbs
Probably my favourite detail of the site. The bar expands as the breadcrumbs grow longer. When I designed this, I thought the developers were going to hate me, but they got behind the idea, even naming the <div> classes after Hansel and Gretel, e.g. Gingerbread House.

 
  Find a Participant  Possibly the most important function of the site is the Participant search. This was a major reason for ISO requiring a new site, as the old search function was difficult to use and unreliable. Participant information is organised into business card-like tiles. Users can search for a Participant by either picking the first letter of a name, or using the search bar.&nbsp;

Find a Participant
Possibly the most important function of the site is the Participant search. This was a major reason for ISO requiring a new site, as the old search function was difficult to use and unreliable. Participant information is organised into business card-like tiles. Users can search for a Participant by either picking the first letter of a name, or using the search bar. 

 
  Contact Us  I like the style of the forms on the site. I went with a minimal print form style.

Contact Us
I like the style of the forms on the site. I went with a minimal print form style.

 

The outcome of the redesign was immediate and overwhelmingly positive. ISO’s customers were very pleased with the new site and found it much easier and enjoyable to use. 

When I later designed the 2014 Annual Reports for ISO, I used the web design to inform their style. This taught the value of a designer seeing a project through from inception to completion. In doing this, you understand the project in its minutiae, so will be able to effectively roll the style out into other mediums.

I learned a lot from the process of designing this site. I worked very closely with the UX designer and developers. We all felt an ownership of this site, and I think we all felt proud of the finished product. I learned that passion for a project can be infectious.

I think the thing I'm least happy about is the home page. It doesn't quite work aesthetically the way I imagined, possible due to the icon style used. It does however, function the way it is meant to – as a welcome message and navigating users to the most important areas of the site. 

View the live site here