Empower clients.
Increase average project revenue.
Reduce website development overheads.

We set ourselves the task of scaling our agency output, with an increase in margins, without the additional expense of new staff or other overheads. We identified that like many other agencies, our website creation process included a large number of tasks that were repeated on each project that required a lot of hands-on, skilled developer time and put us in a position where we were required to maintain client sites with small updates and low-value mini projects.

We identified that the largest overhead was the development team. It turned out developers were spending laborious amounts of time solving problems that really could be solved at the design or planning stage.

A typical approach we’ve seen widely adopted is the following: arbitrary sizes are given as guidelines to a designer for e.g. the most common ‘Desktop’, ‘Laptop’, ‘Tablet’ and ‘Mobile’ sizes. That should cover all of your bases right? Sadly not! We can look at usage stats for common screen sizes, and optimise for those, but it’s misleading to think this way and neglect thinking about how we get from A to B. How does the design gradually transform with the size of the screen? We found this is where a lot of that extra development time was being spent! Fixing bugs thrown up in device testing or even having to re-work entire sections of designs.

In order to scale up in a world where good developers are in high demand, we needed to reduce developer workload. Counter-intuitively, this began with giving our dev team more time to spend on each project. We changed our approach. Instead of just solving what was in front of us on a per-project, client-specific basis, we devised more general solutions and ways to educate our designers to think responsively.

We needed a way to relay our ideas to our whole team, and to our clients, so we took inspiration from Brad Frost’s Atomic Design (which we encourage prospective clients to read up on). We began breaking down each website design into its basic elements and components. We sat developers down with designers and came up with a design system – a flexible set of layouts and components that work in a variety of contexts.

The solution: Our custom layout builder, was born. It made it next to impossible for a design to be spoilt – impossible to deviate from brand guidelines and difficult to break. At the same time it empowers clients and support staff to begin rapid prototyping of new pages, built to brand and fully functional without requiring constant developer input.

The results: Designers were happier, as they now had a framework through which to understand responsive development, letting them make designs that pleased developers as well as clients. Developers were more productive, since they were taking advantage of good coding practices, repeating themselves less and able to focus on other areas. We simplified so much of the process that we were able to hire support staff from less technical backgrounds to help us build site content.