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.

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.

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.

Eventually ended on this theme as I have a lot of things I want to do and its easy to get some really cool photos of amazing things like Mont Blanc. The demo is split into two parts, ‘Done’ and ‘To do’ as I wanted a way to separate interesting things I’ve already ‘completed’. For the ‘Done’ section I have tried to add photo’s of the item that I’ve taken myself but for some I couldn’t find any (Lance and Ronaldo). On the ‘To do’ list I have included a target date to try and push myself, I’ve already failed one by not seeing the Northern Lights when I visited Iceland.

Things I changed

• Images used obviously
• tweaked the parallax effect
• Changed the navigation dot image to a CSS version
• Added more layers to some of the panels
• Added a second navigation for stuff ive got to do
• Changed and improved the CSS

Click here to check out my bucket list

Example image of the parallax demo

Based on a tutorial and Jquery plugin from Ian Lunn.

The eventual prototype was 25 separate pages taking an end user through both success and failed journeys, the work supported browsers from IE7 upwards as well as latest versions of Chrome, Firefox and Safari. I built the grid and base styles using the latest Twitter Bootstrap system and applied a theme to style the pages according to my PSD brief.

The system allows an end user to search for a patient and view their details, it also allows for them to register a new patient as well as a new birth, providing address details, baby details, hospital information etc.

Likes

• Working on something different

Dislikes

• Final stage of bug fixing
• Requirement for IE7 support

Lessons learnt

• If end users are mostly using IE7 build the application in this browser first (in my defence I wasn’t told at the start )

The other point of the pages was to pull in excerpts of latest npower news (which took a fair amount of customisation for the dated CMS) and link to energy videos and the latest blog updates as well as showcasing all the awards the IandC team have won.

Likes

• Removing the integration with DOT NET code, makes the page a lot faster
• Setting up the logic in the CMS to pull in the latest stories automatically.

Dislikes

• Deploy process, 3 servers, multiple style sheets, templates, fragment files, config setting etc
• Couldn’t support mobile…yet.

Lessons learnt

• How to deploy complex code through the CMS correctly.

visit the Energy News here

The board is also used as part of a review process in the digital team to check requests were coming in correctly and to then filter them to specific teams.

The charts were built using Easy Pie Chart‘ by ‘Rendro’ and this is an update to an earlier dashboard post.

Likes

• Data
• Even more data
• Deploy process

Dislikes

• Want more data

Lessons learnt

• PHP is good

Likes

• Working on something bigger than one page of content
• Responsive
• High visibility across npower

Dislikes

• Last second updates

All responsive as more and more users of the npower website are accessing it through mobile devices and a campaign like this needs to be visible to as many users as possible.

Likes

• Working on a new layout style
• Being involved in something others were privy too
• Responsive

Dislikes

• Long drawn out process due to business owners

Lessons learnt

• You can add transcripts to a YouTube video on YouTube itself

visit the page here

The Developer Challenge was updated and completed on time and I made sure it was responsive too even though the original wasn’t and I wasn’t requested to do so, sometimes it just feels not making something mobile friendlier when it can be so easy.

The website makes use of a countdown to the competition date, accordions, and a new area for blog updates which I helped implement through our CMS.

Likes

• Working on something different
• Short time frame meant i had to focus 100% on this
• Responsive
• Quick delivery from me receiving the brief to going live

Lessons learnt

• I’m pretty awesome

visit the page here

I also suggested the use of a parallax design to make the “one pager” a little different or to stand out a bit more, this was after seeing websites such as unfold and the original Nike Better World website.

The micro site also makes use of a Twitter feed hooked into the npower business account as well as data capture for users to ask questions at the event and to also register to come along. The micro site is also responsive to a degree so mobile users shouldn’t be deterred from navigating the site.

Likes

• Working on something like nothing else on npower.com
• Parallax
• Resposnive

Dislikes

• Seriously last minute updates
• Broken Twitter feed after Twitter changed the rules

Lessons learnt

• We are actually capable of creating something a bit different on npower.com

Visit the Energy Debate here

I began by manually pulling data out of our workflow tool, stats on how many requests have been completed, by who, user satisfaction etc etc. I then styled them up as per my design and with elements such as satisfaction i felt it would look better as a chart which is when i stumbled upon the ‘Easy Pie Chart‘ by ‘Rendro’.

To get the data onto my actual page i used Jquery to pull the information from our CMS, looking for a specific XML file and then specific sections within this data, at this point this is a manual process but it could easily be updated to pull in LIVE data from our workflow API’s.

As this data was to be presented and with a number of team iPads floating around the office i felt it could be useful to make the page responsive, due to the Windows layout i had chosen from the start this was incredibly simple to set up, simply changing a few of the widths and margins and it fit exactly onto the iPad screen.

I also added a jquery scroller so with a simple swipe all of the monthly based data could be changed to the previous months for easy comparison.