Sequence is a national estate agency network with over 300 branches across the UK and is one of the biggest brands under the Connells Group umbrella.

Sequence trades under 11 well-known brands such as Bagshaws Residential, Barnard Marcus and Brown & Merry. Most of the Sequence brands share the same web platform, and some of the websites get up to 19,000 visitors a day.

My role when working on the front end of this project was to convert static designs created by an external agency to a fully functioning and responsive code.

I was given just under 70 designs in desktop, tablet and mobile views. This project was the biggest project I have worked on so far.

Why I was needed

The project began long before I started working at Connells Group. At that time Connells Group had no front-end developers, so the team naturally chose Bootstrap as their primary tool for building front-end of this website.

As the team quickly learned, Bootstrap was too restrictive and not flexible enough for a highly complicated design provided by the agency. Connells Group IT department needed a skilled front-end developer for this project, so they hired me.

How I did it

The very first thing I did was to remove Bootstrap from the front-end of the website. Even though it is excellent for the standard layout apps and websites, Bootstrap, in my opinion, was way too restrictive for a creative project like this. I kept the framework for the admin only.

Since I am a big fan of reusable code, the next thing I did was to apply Atomic Design Principles very early in the front end code writing process. A system like this helps to keep code DRY, maintainable and easy to read, and UI elements consistent throughout the website.

Connells Group IT team did not use any of the CSS preprocessors yet, so I introduced SASS to the team. SASS works very nicely when paired together with Atomic Design Principles. Since then it became the standard in all team’s front end projects.

The supplied design used all colours from Sequence logo in a variety of scenarios, so the next thing I did was to create different themes which could then be applied where needed.

With solid foundations set in place, I then used the mixture of HTML5, CSS3, JS and jQuery to build a front-end for Sequence website.

Few months after I started, another front-end developer was hired to support me, and I became a lead for the project and the front-end team.

Results

• The inherited codebase was entirely rewritten to match all designs.
• We have created over 100 reusable components for easier code management.
• Custom code replaced Bootstrap.
• Javascript was reorganised and partially rewritten to improve scalability.

By doing all of the above, I managed to make the previously messy project much easier to handle. I have also significantly reduced front end assets size, which then helped to speed up website page loading times.