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

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…