In June 2018 ii.co.uk launched a new public website. The primary purpose of this new website is to acquire and retain customers through both marketing and content driven SEO.
The website which was replaced had the same goal but went about achieving it in a very different way.
While the old site focused on link building and vast numbers of text heavy pages, the new site was an opportunity to heavily rationalise both site width and depth. In so doing simplify both the conversion funnels and the customer journeys .
The particular challenge of this project was to make our marketing stakeholders see the light!
Setting the scene for a new paradigm
The previous website was architected in such a way that a Drupal 6 CMS controlled not only the page content but also the templating and page rendering.
For this reason it is perhaps unsurprising that the marketing footprint within it felt a lot like a series of blog posts with secondary content sidebars.
The new site by contrast was built with Drupal 8 only serving as a content repo. A React JS app would now sit on top controlling the templating and rendering. This new stack gave us a clean slate to deliver a different direction for marketing page structure...
The old & proposed new structures
The proposal I took to our stakeholders was to move away from the previous method of laying out pages using a primary content column (typically 2/3 width) and a secondary content sidebar. In favour of using rows within internal structures to suit the content in question. I also wanted to approach journey creation with a storytelling mindset.
Given the "non-digital" disposition of a number of our stakeholders I was struggling to bring them along with just words and a digital presentation...So I changed my language and went more analogue.
Firstly I started referring to the web pages as being made up of "full-width sections" and set about getting the team thinking in terms of what the purpose, or "intent" of each section within a page might be. I also sketched up a number of basic section layouts then cut them out as cards to pass around.
Section template cards
The penny dropped
Getting the marketing team focused on the intents of each page and thinking about the best way to display the content for each intent was a watershed moment.
What followed was some impromptu visual card sorting and the spark of a framework taking shape...
Workshop card sorting concepts
Marketing page framework concept
Before we moved forward we needed to access technical feasibility of our plans. The crux was for the marketing team to be able to build and publish pages without engineering intervention.
As the designer I wanted to ensure consistency and page aesthetics, while at the same time enable the marketing team to meet their content goals.
Fortunately engineering were confident they could deliver so we just needed to complete our specs.
Building the library
Before we start implementation we needed to design the range of section templates as well as their responsive behaviour. This was done by first putting our a request to the team to individually build a mood-board of other marketing site layouts they liked.
We also assembled a list of candidate section intents for various key pages. From these two lists we workshopped a suitable range of section layouts.
Section layout workshop sketches
Based on this initial set of rough sketches we ended the session by thinking of what our homepage might look like if we thought in terms of intents and appropriate sections...
This was followed by the creation of the full range of section templates as responsive wireframes in collaboration with one of my design team colleagues. Some examples are shown below.
Selection of responsive section template designs
Art direction
Although not what I would call my "day-job", I was also asked to do art-direction on this project and to seek an external creative agency to work with. After a short selection process we began a rapid engagement with two goals in mind:
1. Critique & refine our initial set of section template designs.
2. Create an initial set of illustration assets to support the site launch.
Thankfully only small tweaks were needed on the templates, with minimal engineering impact.
For the illustrations my starting position was to use isometric vectors to produce a flexible and scalable asset set which could potentially remove the need for the ever-present and tired use of stock imagery in our industry.
Early illustration ideas
Early illustration mockup
From these early illustration ideas we quickly established the groundwork for two motifs that we would use to refine and evolve our direction:
1. The concept of "platform" or screen in both the horizontal and physical dimensions that could serve as a physical representation of our business being a digital gateway to investing.
2. The idea of people and/or places being manifest in a way to suggest a goal or objective.
We took these motifs and built out the beginning of a set for our launch. One development with our stakeholders did impact us here...
We were told that for launch all of the large shout assets were going to be photographic. I was personally disappointed by this but understood the nervousness. Ultimately I conceded that a mix of photographic and vector assets might deliver better aesthetic balance.
Illustration set for launch
Bringing it all together
Following the development of the framework and with consensus on the art direction, we needed to finish the project by deciding page depth, choosing page layouts, creating content and deploying a navigation pattern to link the top level pages together.
On page depth, after much arbitration the team settled for a set of around 80 marketing and quasi-marketing pages. Although I felt this was a high number, we were able to rationalise and put in place re-directs for 285 pages from the old site, which was a great result.
For navigation and IA more generally, the MVP site was to be pretty lean so I was able to combine both into a single representation for logged out and logged in variations:
Logged in MVP nav
Logged out MVP nav
When it came to page layout, due to the volume of pages I had to put my faith in the marketing team. However to set them on the right track I sketched some suggested layouts using the "section + intent" approach for three of our key landing pages:
The outcome of this project was a credible initial set of marketing pages which could then be put through conversion optimisation and multi-variant testing.
Although we were not able to entirely move away from stock image use, and there are still a number of bugs in evidence, overall the team and our stakeholders were pleased with the outcome.
About a month after the launch the team attended a Platforum industry conference where it was great to see our site called out as being:
"An example of a progressive approach and a breath of fresh air in our industry, from a company that clearly cares about building experiences with input from their customers".
Source: Platforum conference speaker
Conference slide calling out our site
