Benjamin,

Front end developer.

Make a claim step for policy details.

Background to the ‘make a claim’ journey

I started at HomeServe in early May with the existing digital team wanting to move towards a responsive website as soon as possible, as a complete rebuild of a website takes a lot of time it was decided to build anything new as mobile first and full responsive, the first of these projects is the online make a claim journey.

One of the reasons for an online version of the journey was the increase in mobile traffic over the last few years, latest stats show (taken from Google Analytics) that HomeServe users access the website using mobile 20% of the time and tablets 21%. The current website doesn’t cater to them at all and while you may be able to navigate around and complete actions to a degree, a mobile first approach would improve things immensely.

tweaking stuff just days before code deploys is never good

Me from bottom of this post

Why bootstrap

When joining HomeServe i needed to find a framework which could be used to build everything going forward, i decided upon the Twitter teams Bootstrap framework for a few reasons but the main one being the community support (plugins, help etc), in the same way a lot of people use WordPress, because of the potential help you can get if needed.

It also helps that it is one of the most widely used frameworks around which means that any bugs or issues have been stumbled upon before or already fixed.

The build

The front end build took a good couple of months to complete, mainly because this was the first piece for HomeServe in a new style (mobile first and responsive), i didn’t want to build the application using existing templates and styles knowing at some point this would all have to be updated. Building things in the new template now would mean less work later… hopefully.

I started by building the complete application in HTML and CSS using the framework, this was simple enough, creating the basic structure of columns, call to actions, form inputs etc etc, finally nailing down finishing styles such as buttons, calendars, mobile menus took a lot longer and were constantly being tweaked. For example the ‘Burger’ icon seen on a lot of websites to pull in off canvas navigation was at some point ‘Menu’, ‘Navigation’ ‘+’ amongst other things.

The build was a very iterative process, every time i showed the app to someone within the team or outside it some more feedback was given and changes were made but only for the better. Sometimes when working on a piece of code for so long you can miss some pretty basic issues as you’re used to getting through the journey anyway.

During the front end build i was constantly testing code across multiple browsers (Chrome, Firefox, IE etc) but also devices such as my personal phone (Nexus 4) or the team iPhone 4 and iPad Air. One of the benefits of using a framework like Bootstrap is that you know it has been very thoroughly tested and as long as you’ve implemented it correctly and not steered too far away from their original code most code will ‘just work’.

Mobile view of make a claim.
Mobile view of make a claim.

Summary

All in ‘Make a claim’ was a very interesting piece of work to be involved in, working closely with BA’s, Sitecore developers, designers and the wider business really opens your eyes when in a new environment which is good.

Things i would have done differently would have been to nail down a design much earlier, tweaking stuff just days before code deploys is never good and i think a signed off visual would have helped with this. Axure prototypes could have been used in the very initial stages to demo the journey to stakeholders as well.