The Interledger Foundation Community

Cover image for The Ad-Free Web for Designers
sophie for Prototypr

Posted on

The Ad-Free Web for Designers

The Source logotext, with Sophie Clifton Tucker avatar

The Source is a fortnightly letter from Prototypr for its community of ~600k viewers. Written by Sophie Clifton-Tucker, The Source tackles taboo topics, exposes unseen truths, and gets the scoop on the latest in the tech and design sphere.

We’re hit with it daily: it feels like every three swipes on Instagram or flick of the thumb on Facebook takes us to yet another creepily targeted ad, both making us a bit paranoid (OMG a Colgate ad – did Insta really eavesdrop on my toothpaste conversation?), and disrupting the user experience.

Our Twitter and Instagram timelines used to be about the people we chose to follow – people we know and care about. But we find ourselves hijacked by algorithms that feel designed to suck us down a black hole of doom-scrolling through dopamine-pumped content, ultimately to show us more ads. I came to see 1 picture of my mum’s dog, and reemerge an hour later with 5 new TikTok dances memorised:

At least Twitter recently announced a u-turn on this model.

If it’s not unethical ads, it’s walled content – remember the days where you could innocently scroll a blog without having half of it sucked behind a paywall? Where you could get through a whole video without an ad being shoehorned in the middle of it? When you were able to simply enjoy the internet?

How we’re building a more humane web

In the midst of dark patterns like privacy zuckering, and dodging shady UI copy that aims to trick us, there’s a growing community of us web custodians, who are actively building alternative business models that would make for a healthier, more inclusive web.

At Mozfest (an online gathering of web humans fighting for a more humane digital world), amongst projects tackling important issues such as misinformation and disinformation, neurodiverse wellbeing, or digitizing culture and language, a fledgling topic that’s rapidly gaining traction to tackle the shady corporate web is ‘Web Monetization’.

What’s Web Monetization?

In short, Web Monetization is the process of converting website views into revenue using open technology. Sound simple? Well, it isn’t, but it is an excellent way to combat the clogged-up ad-heavy subscription-saturated internet that we’re faced with today, whilst still monetising your content.

The process of making money against a content that’s informative, helpful and unique shouldn’t include these compromises on both, the creation and the consumption ends. – Veethika for Prototypr.

The successes of platforms such as Patreon or Twitch are proof that people are willing to pay creators for content that they enjoy, which is precisely what Web Monetization sets out to do. Creators get paid for their content in a way that doesn’t inhibit the reading, watching, or listening process, in a way that is open and accessible to all.

Open Source Prototypr 😃

As awardees of a flagship grant from Grant for the Web, our MO is to help contribute to this fairer, open web by developing Prototypr as an inclusive, Web Monetized publishing platform for designers.

We’ve just launched a microsite on how our new platform is being built, and how you can create your own! Check it out:

👉 https://open.prototypr.io/

open.prototypr.io - building the new web monetized, open source  Prototypr

We’re working on a new platform that can earn you rewards as you read and write!

Sign up to get updates banner

By providing openly accessible, quality content from designers across a vast array of cultures, we’re taking our first steps towards democratising design content – all whilst rewarding our contributors.

decorative section divider

The evolution of advertising

As opposed to earning money from garish advertising, sneaky subscriptions, data mining or paywalls, Web Monetization uses a browser API that streams micropayments to a website’s digital wallet as you read, watch, and listen to content. As put by the Artist Rescue Trust, it’s a “financial fist bump made between creators and their audience.”

What we experienced as a society was the rise of free social platforms that collected our personal data to then turn around and place targeted advertisements in our news feeds. – Ken Melendez

As Ken Melendez puts it, this way of earning revenue is considered by some as “unethical and intrusive to the user experience” – and I would tend to agree.

We’re hit with it daily: it feels like every three swipes on Instagram or flick of the thumb on Facebook takes us to yet another targeted ad.

AdBlock - the most popular extension for Chrome and Safari

AdBlock – the most popular extension for Chrome and Safari

  • It’s Complicated: Sean McGowan describes the partnership between UX design and advertising as a union that is “not just useful – it is necessary for both fields” in his article Advertising and UX: A Complex Relationship.

  • Monetising on YouTube: YouTube UX lead Javier Bargas-Avila reveals that user experience guides everything they do – their first priority is to show the right ads to the right users at the right moment. “When we achieve that, video ads aren’t intrusive – they’re part of the experience.” Added to this, the video sharing giant have announced their upcoming plans for 2022, which will dip a toe into the world of Web3, blockchain, and NFTs and “allow creators to build deeper relationships with their fans” and “further monetise their YouTube content.”

  • Designer Usability Mistakes: Among the most hated online advertising techniques are modal ads, ads that reorganise content, and auto playing video ads, as confirmed by a survey that presented participants with 23 wireframes for different types of ads and encouraged them to rate their dislike on a scale of 1-7. Interestingly, ads tend to be more negatively received on mobile devices than on a desktop, which is unsurprisingly given the lack of real estate.

Desktop and mobile wireframes with a modal advertisement side by side.

Most hated online advertising techniques | NNGroup

Further reading:

decorative section divider

The Grand Web Monetization Experiment

Mozilla Festival (AKA MozFest) took place last week between 7th-11th March, seeing designers, developers, artists, and activists come together for the annual event. Many of the recorded sessions (which are available online until 25 June with an on-demand ticket) were centred around Web Monetization (see a full schedule of related events here), whilst introducing a ‘tipping experiment’.

Mozilla's online chat space - 4 digital cube spaces for digital people to gather
Spatial Chat Zine Fair at MozFest 2022

In conjunction with Coil and Mozilla, Interledger held this Mozfest-wide experiment which granted all ticket holders a free Coil account prepopulated with $10 USD of credits. These credits could then be used to ‘tip’ single amounts as well as stream micropayments, in order to acclimatise attendees to the Web Monetization realm, as well as supporting content supporting the free, open web.

Here’s a peek of what this tipping might look like using the Coil browser extension:

For more information and to access the resources, visit the Mozfest 2022 Landing Page.

decorative section divider

Play/Learn and Earn

The ‘Play and Earn’ or ‘Learn and Earn’ models do exactly what it says on the tin – earn rewards (typically crypto assets) for playing an online game or for interacting with other web-based content.

One such game is Axie Infinity. This video game, built on the Ethereum blockchain, is comprised of virtual creatures (‘Axies’) which are used to fight opponents in a Pokémon-style battle. But these aren’t your average game creatures – they’re also NFTs. You will be the sole owner of your Axie, and even all the in-game items and assets you acquire are crypto.

The Learn and Earn model works on a similar concept – watch videos or read articles, and as an incentive receive crypto assets as a reward.

decorative section divider

Our chance to impact the web

Web Monetization can be a tricky field to navigate, what with it still being in its fledgling stages. The technology is still developing, and the terminology and user experience can feel fragmented. However, as designers and developers, we have an invaluable opportunity to shape the web – but this has to be done in a user-friendly manner.

If you want to get involved with creating this ad-free web, we can start by learning from designers and developers who have gone before us.

For example, Uchi, developer advocate and founder of Chimoney, advises that in order to make the consumer’s journey as fluid as possible, every step along the way should be explained in easy-to-understand, accessible terms. E.g. ‘Web-Monetised’ content might instead be referred to as ‘User-Supported’ or ‘Ad-Free’ content.

To make web monetization accessible and easy to break into, consumers’ user journey needs to be concise and easy to follow.– Uchi Uchibeke for Dev.to

Here’s his recommendations on where the customer journey for Web Monetization can be improved:

Phase Status Recommendation
Discovery ⚠️ For consumers, rebrand Web Monetization around consumer benefits (i.e., Reader-supported content, Ad-free content?)
Evaluation ⚠️ Create customer-centric, content-driven landing page and newsletter of web-monetized content
Decision Coil handles this well. Affiliate program for providers in the system?
Opt-in Improve documentations around Puma browser and the Web Extention because for someone new to extensions, it is hard to install and setup
Retention Create browsing tools that highlight Web monetized content in realtime from search results

Table above highlighting some areas of the content consumer journey and recommendations for improvement – By Uchi in Dev.to @uchibeke

For a full list of Web Monetization resources, take a look at this library made up of WM providers, digital wallets, video streaming sites, social media platforms, tutorials and much more. You might even spot some familiar faces, such as freeCodeCamp and Hackernoon.

And to round this letter off on a happy note, check out this tweet from Mural Stories – a tool for visual sorytelling – proving that Web Monetization truly works. Welcome to the future.


Sign up to the Prototypr newsletter to join us on our journey!

Follow us on Twitter - Prototypr, Sophie, Graeme, Mimi, and Ann

Discussion (0)