Inside Housing

 

The Inside Housing website provides the latest breaking news on everything in the social housing world. Online forums and blogs allow housing professionals to share opinions and advice, plus there are in-depth articles and briefings, as well as the latest job vacancies in housing and related fields. 

The Inside Housing magazine has a weekly circulation of 35,512 (ABC average net circulation July 14 - June 15), with a total readership of more than 100,000. With revenues of more than £3.5m per annum and visits to the site at 1 million.


Results

16% increase in readership numbers

12% increase in subscriptions

£1.2 million revenue increase

£300k new revenue stream through features added

The facts

100,000 in readership numbers

£3.5 million annual revenue stream

1 million unique website visitors per month


My role

Working as a Senior UI/UX with digital and editorial teams on insidehousing.co.uk to redesign the structure of navigation, articles and content. Supporting the Lead UX/UI Designer I was responsible for the the front-end visual look and feel (with the lead developer Adam Millington) while improving the customer journey throughout the site.

The challenge

The current problem of the site was the navigation, as there were a lot of links that were no longer needed. This resulted in a three tier navigation to find content, which was a pain point. Also the branding used was not consistent for a digital platform. Plus being introduced was a brand new subscription model meant the site required a UX /UI revamp. 

 
  The website before the redesign

The website before the redesign

 

Before the redesign

The current experience of the site was going to be the main importance. The feel, look and ease of the subscription model should show insidehousing.co.uk was ready to take the next step. We re-designed the visual look of the site while assisting Emma Maier (IH editor) to correct the site navigation. Through the UCD process and using insights from customer research we was able to redesign the site through 3 phases and iterative test each phase across the digital landscape (desktop, tablet and mobile).

Insidehousing.co.uk had 1 million visits per month to the site already and with the introduction of the subscription model. It needed to be ready to increase in readership and subscription numbers.

Process

My first task was to produce a series of flow diagrams, until this point all user journeys were ‘happy path’. When flow diagrams were produced various pain-points became easily recognised and could eliminated or at least streamlined from the process.

I now moved on to creating a series of Personas, as the existing ones did not have any mobile usage data, with these in place it was relatively easy to establish an interaction design process based around mobile reading needs.

 
  Persona's created

Persona's created

  Persona's in more detail

Persona's in more detail

 

Competitor analysis

We evaluated direct or indirect competitors by placing them in strategic groups according to how directly they compete for a share of the customer's pound. For each competitor or strategic group, we list their product or service, its profitability, growth pattern, marketing objectives and assumptions, current and past strategies, organisational and cost structure, strengths and weaknesses, and size (in sales) of the competitor's business. This enabled us to answer questions such as:

  • Who are your competitors?
  • What products or services do they sell?
  • What is each competitor's market share?
  • What are their past strategies?
  • What are their current strategies?
  • What type of media are used to market their products or services?
  • How many hours per week do they purchase to advertise through the media used in this market?
  • What are each competitor's strengths and weaknesses?
  • What potential threats do your competitors pose?
  • What potential opportunities do they make available for you?

We looked into 4 of these competitors, The Guardian, The Times, The Independent and The Telegraph

Sketches

We sketched initial wireframes quickly on paper to gather all our thoughts before going on to the computer.

 
  Initial sketches of improvements

Initial sketches of improvements

  Series of sketches detailing page make-up

Series of sketches detailing page make-up

  Analysis of the site before redesign, the site showed inconsistencies i.e. ease of use, information hierarchy, branding, typography etc.

Analysis of the site before redesign, the site showed inconsistencies i.e. ease of use, information hierarchy, branding, typography etc.

 

Heuristic analysis

The site evaluation was completed by an in depth heuristic analysis, to refine the wider user experience, which again was fed back into the build process.

  • Is the system as simple as possible but not too simple?
  • Is there a good balance between brevity and comprehension?
  • Is the core value proposition the primary focus?
  • Where is more important than who, is this balance reflected in the UI?
  • Is the system status clearly visible? Do the system terms and features match their real world counterparts?
  • Are controls and options obvious? Is there consistency in both controls and layout across the systems?
  • Can errors be avoided?
  • Does the system help users recognise, diagnose and recover from errors?
  • Are the system controls easily recognisable rather than learnt?
  • Are the aesthetics of minimalist design?
  • Is help documentation easily found?

Creating assets

Created site assets in Photoshop and Illustrator ready for prototyping in Marvel. It was important to show the improvements that could help, the result of this was a black and white prototype to view and interact with. This allowed the Stakeholders to concentrate on the UX rather than the style of the UI.

 
  Black and white wireframe of the site to show stakeholders

Black and white wireframe of the site to show stakeholders

 

Taxonomy

The underlying site structure and navigation was the next step. Together with the Lead UX/UI we developed the taxonomy and reconstructed the content map, making it simple, more manageable and logical.

 
  Navigation that was restructured.

Navigation that was restructured.

 

Using open and closed card sort exercises to both test the existing structures and naming conventions and also to see if there were any patterns in user perception that we hadn’t predicted. As usual the user testing threw up a few wildcards, the term analysis, for instance, was simply not as familiar as first assumed, but if we added analysis with ‘data’ there was no confusion at all. The more obvious results were used to refine the final testing prototype(s) so we could see if variants showed a similar pattern with different users.

A series of rapid prototypes, including mobile versions, were created and tested with the results feeding back into my designs to ensure that user requirements shaped the new site structure and interface design and also ensuring that changing business needs were continuously met.

 
 Homepage redesign

Homepage redesign

 

As the wireframes became closer to the final iteration we started working with the Editorial Team to construct a real High-Fidelity prototype and with the Development Team to produce Functional Specifications, marrying the graphics to the interaction and content and then on to the code, a mixture of HTML5, CSS3 and JQuery. This was some what compromised due to using the existing system which was a content management system. So constant iterations continued through the final weeks up to launch.

 
  Topic page update showing updated styling.

Topic page update showing updated styling.

  Article page showing improved typography.

Article page showing improved typography.


IH16_Real-world-iPhone-mockup-thumb.jpg

The result was delivered in September 2016.

www.insidehousing.co.uk


Award

 Inside Housing’s website was crowned best digital service of the year at an awards ceremony

Inside Housing’s website was crowned best digital service of the year at an awards ceremony

 

The award follows a year in which Inside Housing has substantially updated its web service, including the introduction of a daily live blog and the ‘IH50’ series of expert comment and opinion pieces.