Blue Horizon Developments

Aug 31, 2015

I was approached by Caroline Rowley of Blue Horizon Developments to create a website for them in which they could showcase their latest housing developments in prestigious areas of Northern Ireland.

Caroline, who would be maintaining and managing the website needed a simple solution to add details of new housing developments on both the homepage and on another (Developments) page. With the nature of their business, Blue Horizon Developments felt it was important to have areas on the homepage that would make use of big imagery.

The Developments page was the main area of the website after the homepage, here Caroline wanted to list all developments that Blue Horizon Developments were selling, or developments that were coming onto the market in the near future. Each development needed to show the following:

The Solution

Bearing in mind what Caroline had outlined in the brief, she also had a very specific idea in terms of the layout of the website - so it was up to me to just design around that idea and brief.

To give as much flexibility as possible regarding the use of big images on the homepage, I opted to implement a carousel on the homepage.

This carousel was designed strictly for images only, there was no option created for Caroline to add text. I took this decision because I am not a huge fan of the use of carousel’s on websites for many reasons, but the main reason behind that is - that many users do not interact with anything past the first slide.

After taking the decision to not allow text on the carousel, I felt it was important to add a section below which would help drive users to the developments page. I opted for a 4 module section which Caroline would have full control of. Each module let Caroline add the following:

In the image below, you can see the UI of the 4 module section which Caroline is able to edit as and when she needs to.

Blue Horizon Developments - Homepage UI

The next stage was to look at designing the UI for the developments page. It had been requested that the design would be familiar to the users, so after some research looking at competitors and other property websites I came up with following.

Blue Horizon Developments - Developments UI

This worked well as I felt it would be very familiar to users in the property market, and it would’t need to much thought from them in terms of where to go next. Another strong point about this design, was that I felt this would be a very easy design to build ‘Mobile First’.

Along side this UI element, the only other thing needed in the developments page was the ability to add multiple developments onto one page. To help differentiate between each development, I introduced a colour scheme (taken from the brand colours) and applied the colours onto the title & buttons. This worked well as the developments followed the same UI throughout, apart from the title & buttons - they took their colours from the newly introduced colour scheme.

CMS

The CMS used in this project was Couch CMS. This was the first and only time that I have used Couch CMS to date. Overall I was generally happy with the CMS as I did not have anything too technical to implement for Blue Horizon Developments.

The repeatable fields came in really useful for the developments page and made implementation quick and easy. I built a custom contact form which sends the email direct to Caroline’s own email address so she can react quickly upon any enquiries.

Final Thoughts

Overall, I was very happy with the outcome of the design and development of the website. Caroline was delighted with the finished product and was very happy with the ease she could update and maintain the website.

Work Completed September 2014

Website: bluehorizondevelopments.com