How to perfect your websites with marginal gains

Ben Moss.
January 30, 2015
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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…