We first developed a website for Notting Hill Housing (NHH) in February 2011. The web moves fast and a lot has changed since then. The website had begun to look dated so we were tasked with coming up with a new design and making technical improvements to aid SEO.
The new design was to be an evolution of the existing site, keeping the same basic structure and content.
Mobile first
As part of a previous project we had retrospectively created a responsive design for the Notting Hill website. This had been a major step for the old site and had made a big improvement to the user experience on mobile devices.
However, retrospectively making a site responsive wasn’t without problems. Many elements of the existing templates simply didn’t work on mobile devices and had to be removed on smaller screens. Breakpoints for particular screen sizes were defined but the layout was fixed between breakpoints at higher screen sizes. Finally, a responsive layout was not sufficient to make the site fully mobile friendly.
The latest update addresses these problems.
The redesign took a mobile first approach which considered the needs of mobile users from the beginning. The clearest example of this is the use of large hit areas for links across the site which make navigation easier. This has the added benefit of improving the user experience on desktop devices as well by removing the need for precision mousework when following links.
A cleaner, simpler design
Much of the content which had previously been hidden in the first responsive design was removed entirely as part of the redesign. The ease with which some page elements could be removed for mobile users indicated that they weren’t essential to the function of the page. Removing these elements resulted in a less cluttered page for desktop users and a smaller, and therefore quicker, page to download for mobile users.
Before and after - Notting Hill Housing homepage
Updated codebase
It’s not just web design which has come along way since we last developed a website for Notting Hill Housing. Approaches to web development, best practice, and the tools available to developers have changed a lot as well.
As part of the work on updating the Notting Hill Housing website we rewrote most of the codebase, including migrating the site to BoomCMS to improve the experience for content creators. Features which were no longer required were mercilessly removed leaving a leaner system which will be easier to maintain.
It may seem academic but a clean and modern codebase is an important part of the user experience of a website and something that shouldn't just concern developers. Good code makes it harder for bugs to creep in and easier to add new features.
Despite the massive changes which happened to the backend of the Notting Hill Housing website the new site was launched with no downtime and minimal interference to the work of content editors.
More appealing property pages
The changes that we are happiest with are to the Homes for Sale section of the website.
The Sales section lists two types of properties which are sold by NHH – resales and new builds. Previously the pages for the two different types of properties looked very similar. However, while smaller images are available for resale properties, the new build properties have higher quality CGI images available. We’ve therefore updated the new build property pages to better take advantage of these larger images.
Before and after - property search results page
Before and after - new build property page
Importantly this significant change gives a better representation of the properties Notting Hill Housing build and manage, improving the customer experience and helping more people find an affordable home.