How to perfect your websites with marginal gains

A little over a decade ago, British competitive cycling was nowhere. With a couple of notable exceptions — Tom Simpson in the ‘60s and Chris Boardman in the ‘90s — no British cyclist had made a significant impact on a sport dominated by France, Belgium, Italy, Spain, and Australia.

Then, in 2003, British cycling appointed Dave Brailsford as performance director, who introduced marginal gains. Marginal gains is a philosophy that — rather than focus on sweeping change — identifies small improvements which when aggregated, result in significant progress.

Subsequently, at Beijing in 2008 the team took 17 Paralympic, and 8 Olympic golds. Four years later in London they took 8 Paralympic, and 8 Olympic golds. The achievement was capped by back-to-back victories in the 2012 and 2013 Tour de France, the first British victories in the history of road cycling’s premier event.

“If you broke down everything you could think of that goes into riding a bike, and then improved it by one percent, you will get a significant increase when you put them all together.” — Dave Brailsford

Marginal gains in web design

Since the British cycling team shocked the nation by not falling off their bikes, marginal gains has become something of a rallying cry for business. But whereas businesses typically need to restructure, and drive this change from the boardroom, it’s a philosophy that dovetails neatly into existing web design practice.

Marginal gains is an iterative approach to problem solving, as favored by lean startups. Through the use of design patterns, most websites perform broadly similarly to their competitors; that being the case, even a minute improvement is sufficient to make a website stand out.

1% is, of course, not a literal figure. It’s impossible to quantify a design improvement in terms of a percentage. And even when a percentage can be found by measuring conversions, or performance, it’s not always desirable to do so. The key point, is that marginal gains focuses on small improvements.

Finding 1%

Adopt the mindset that there is a 1% improvement to be found in every element of your website. The benefit of 1% is that it’s an attainable target.

Naturally some elements of a project have greater scope for improvement than others. Areas that tend to lend themselves to marginal gains, are the elements that are often ignored by a traditional waterfall process.

For example, error messages are commonly not copy written, and rarely designed, because they’re invented by the development team during coding. That tends to result in human-friendly messages such as Error 427: Expected data.

To find 1% improvements, teams need to adopt a multi-disciplinary approach. Every element needs to be planned, designed, and engineered. And processes must not be put into silos. That’s not to say that every designer needs to understand OOP, or that every developer needs to be able to adjust tracking. But a collaborative effort, in which roles overlap, will prevent elements falling down the cracks.

Copy that is generated by code; UI elements that aren’t predicted in style tiles; interactions that are added post-build; these are all areas rife for improvement.

The easy 1%

The key to a marginal gains approach is that everything can be improved, and that every incremental step is worthwhile when viewed as part of a whole.

[pullquote]we want the 1%, but we don’t want to pay for it[/pullquote]

When optimizing an image, there is a tendency to save in accordance with default application settings: commonly we’ll save a JPG at 60%, then try and drop it to 40%. If the resulting quality is too low we revert to 60%. But we only need to find 1% so try saving your JPG at 59% quality. In a few quick tests I found that dropping 1% off the quality resulted in an average 3% reduction in filesize — the benefit is disproportionate to the cost.

Never use a webfont that you can’t subset. Minify CSS and JavaScript. If you’ve got a 2 minute video on your site that’s 2880 frames, cut 29 of them, just over a second, and you’ve found your 1%.

There are substantial improvements to be found if we invest time and effort. For example, replacing JavaScript libraries with vanilla JavaScript will reduce your site’s footprint. However libraries such as jQuery bring benefits like simplicity, and maintainability, that outweigh their cost.

The key to success with marginal gains is that the cost of implementation is negligible: we want the 1%, but we don’t want to pay for it.

The essential 1%

We’ve known for a long time that users don’t read websites. Whilst we carefully craft content, our users are extracting everything they need to know from a couple of button labels. Whether they scan in an ‘F’ pattern or click around until they hit something that looks interesting, users focus on extreme details.

That’s why micro-copy is such a big deal. It may be a hint, or an error message, a score we share on Twitter, or the labels on our menu; users spend more time with micro-copy than anything else on our sites. However, micro-copy is also the copy that is least likely to be designed, or provided by a client. Micro-copy is too often an afterthought that exists in the cracks.

We all create passwords, most of us create them daily. So most of us have experienced the red asterisk that lets us know that our suggested password has not met with approval: we submit an account creation form only to find that we needed 8 characters; try again and we need less than 12; try again and we need a number; once more, we need uppercase and lowercase; try again and we need punctuation; try again, and we need different punctuation. It usually takes me about three attempts before I start to wonder if I really want the account after all.

We have to write the error message to tell the user they’re wrong anyway, micro-copy alongside the form, clearly stating the rules, helps them get it right first time and has a negligible implementation cost.

The perfect 1%

If there’s one area that fully embraces marginal gains, it’s typography. Finding the correct measure, the optimal leading, and making use of advanced features such as smart quotes, ligatures and small caps provides a measurable improvement in readability.

[pullquote]There is no downside to good typography[/pullquote]

Typography is as much science as art, with precedents created by the way the human eye and brain, process written language. As such, there are rules that define how we use it, meaning sweeping changes are rarely desirable. Typography is all about finding multiple 1%s to improve the whole.

If you’re looking for 1% in your design work, focus on typography. Not only is it 95% of web design, it’s also a discipline that’s perfectly aligned with marginal gains. There is no downside to good typography.

The value of 1%

1% is an easy figure to bear in mind, but it‘s plucked from the air. What matters is making small improvements that carry a negligible cost.

Any improvement to an already refined website is incrementally harder. Finding a 10% performance boost will introduce unwanted side-effects such as loss of quality. If we can find 1% in ten different areas we can make the same 10% performance boost with no pay off.

1% improvements have little benefit on their own, but taken as a whole marginal gains is a process that will make your websites stand out.

Featured image, teamwork image via Shutterstock.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.