January 2013 – February 2014

Endsleigh Insurance

<p>Endsleigh is a student insurance provider in the <abbr>UK</abbr> and I worked with them to develop a framework capable of supporting their vast array of products and services, focusing specifically on object-oriented <abbr>CSS</abbr> and web performance. The goal was to hand over a design system and web app that could be maintained by their internal team of developers, designers and project managers.</p>

Project Goals

  • An easy-to-read codebase with object-oriented CSS.
  • Make the website accessible for as many customers as possible.
  • Create a performance budget.

As a front-end developer I worked closely with the head of design at Erskine and the lead front-end developer to break down the design mockups into an ellaborate system of components and templates. Throughout the project we discussed ways in which to cut down on the number of components and re-use them as much as possible. We also constantly discussed ways in which to change the design in order to improve the performance of the website (such as stripping out unnecessary images and replacing them with inline SVGs).

That feedback loop between design and development ultimately taught me an awful lot about how a team ought to collaborate and work together in the future.

Starting the Design System

First we took a look at the high-fidelity mockups, printed them out and plastered them over the wall, closely examining how we might break them up into tiny blocks of CSS and HTML. This was a new method of working on front-end development for me and seeing a website in this manner but after just a few minutes it was possible to spot the similarities and differences between everything.

By taking a step back and looking at all the templates and components together before we started building anything was crucial in order to figure out what we should build and in what order.

It was around this time that we also set rigorous performance budgets and talked with the design team often when particular components needlessly hindered the frame rate or slowed the website to a crawl. A small part of this performance work was ensuring that our Sass code didn’t bloat the compiled CSS output, but our main focus was spent on ways in which to reduce the total number of images on the site.

Serving SVG assets and high resolution images was important because of the growing number of mobile devices that were being used to access the site, but we also took steps to protect users from downloading multiple versions of each asset in order to keep our performance budget intact.

Project Review

This was one of the first large-scale projects that I ever worked on and it taught me how to think in systems and relationships when it comes to writing a lot of CSS. It made me deeply concerned and excited about usability, mobile design, and web performance, too.