Rethinking the creative web: Our journey to reimagine ‘web publishing’ for the social web

For image credits, see prototype in part 2.

In early 2017, we began an ambitious piece of work for a small group of Mozilla stakeholders. This project — which came to be known as Hopscotch by Firefox — was unfortunately shelved in early 2018. But in the spirit of making the web a better place, we’d like to share some of the research, concepts, and future facing ideas that led to the project. (Big thanks to Mozilla for allowing us to publish this).

  • In this, the first of three articles, we explore key research and insights that led to the concept,
  • Part 2 describes the product’s key design principles, the content it enabled users to create, and key behaviours related to sharing on the open web,
  • And part 3 looks towards a future inhabited by new tools, behaviours, and standards that champion user agency and creativity on the open web.

“A vision of a future that we yearn to achieve is an important influence upon our day-to-day tactical work. It’s the star that we steer by. A personal concern of mine is that we are severely lacking in this sort of long-term visions of “the web”. — Allen Wirfs Brock

Part 1: What is the web (still) good for?

In the summer of 2016, we were asked by a group of Mozilla stakeholders to consider future trajectories for the browser in a world characterized by rapid technological change, the exponential growth of mobile, and the ad-hoc adoption of large centralized platforms, as primary gateways to the internet, and the web.

This initial engagement led to the release of a number of high level concepts and recommendations, which were then shortlisted, and further iterated on. Eventually, a final candidate emerged, which was tested with a group of users. While we can’t share the product of these early ideation phases, we’d like to dig into the research that led to the insights we uncovered, and explain how they led to Hopscotch by Firefox (Hopscotch) — the product Mozilla ultimately chose to pursue.

The research

Our ideation phase drew on a body of pre-existing industry research, a round of desk-based guerrilla ethnography that explored how people use popular mobile platforms, and a review of user studies by Mozilla research. In this section, we’d like to call out two pieces of research that we feel most informed to the conclusions we reached.

The first was a global research initiative by Mozilla that explored how people use the web in everyday life to get things done. Spanning four countries, the research uncovered a series of common (and we came to suspect, near universal) patterns of behaviour during day-to-day web use.

  • Ad hoc workflows: Study participants used small, immediate, and well understood tools such as text messages and screenshots to string together larger tasks that leverage the web.
  • Task continuity tools: Text messages, screenshots, and email were some of the most common task continuity strategies.
  • Satisficing: Study participants were generally satisfied with their current task continuity workflows, even when they knew they weren’t efficient.

The diagram below illustrates this process — from spontaneous (i.e. social, location based) or task related (e.g. holiday planning, product research) discovery of a thing you decide to save — to its capture (‘active hold’) — to its future re-acquisition to review, share, or further customize.

Task continuity diagram. Source: Mozilla Research

Same same, but different

The simplicity of this pattern belies the diversity within it. Mozilla researchers found that, while the choice of tools was often similar (and driven by what was readily available) users mixed and matched a variety of personal, often ad-hoc processes to achieve the results they wanted. The root need however, appeared quite consistent:

  • We capture things that have meaning to us,
  • further customize them (through editing, annotation, or saving them in a folder called ‘Hawaii trip’),
  • then later revisit and (quite often) share the resulting artifact with others.

Internally, Mozilla transformed these insights into incrementally useful micro-tool experiments such as Firefox Screenshots — but our goal was slightly different.

How might we tap into these findings to create something entirely new? Something that wouldn’t seek to replace existing behaviours, but complement them, providing pathways to utility and creativity using the web as a material?

To do this, we needed to better understand why people turn to the web to begin with.

For this, we drew on the finding’s of a Microsoft Research series that presented findings from a four day, 24-person diary study of web use that sought to uncover “how the web was used for non-work purposes, with a view to understanding how this is intertwined with everyday life”.

“Rather than focusing on particular activities (e.g. fact finding or information gathering), or the use of particular tools (e.g. search engines or bookmarks), these modes are grounded in the idea that web use is an integral part of wider practices. It can be peripheral to, interrupted by, layered upon, or interleaved with, other doings.” — Microsoft research

The resulting insights led the Microsoft team to identify five common modes of web use (paraphrased — but you can read full findings here and here [PDF]).

  1. Purposeful: a resource for action to get something done in the moment (e.g. check opening hours, look up a topic of conversation on Wikipedia)
  2. Opportunistic: a leisure tool “to spend time rather than save time” (e.g. browsing news while in a queue or waiting for a friend)
  3. Orienting: a way to orient the day (e.g. check mail, your bank balance, the weather)
  4. Respite: a brief escape from another activity (e.g. browsing news or social media)
  5. Entertainment: media consumption

While some web activities might appear pure consumption oriented, the research revealed that even these often led to sharing. For example, grabbing screenshots of a key moment within a news clip, or Twitch broadcast, then augmenting it, to then post the resulting artifact on Instagram or Facebook. While we did question how long the web might remain the most useful conduit for some of these behaviours (one could argue it’s already lost the long-form entertainment battle), we did wonder how this might change if users had better tools with which to pivot web based activities into the creation of a wider, and richer range of artifacts for personal or public consumption (especially artifacts that leveraged key web superpowers: indexability, universal rendering, and the freedom to augment an experience using hyperlinks).

Insights, and glimpses of a product

“We’ve invested so little in empowering users compared to what is invested in exploiting them.” — Allen Wirfs-Brock

Every day, billions of people publish content to the web. They are not ‘bloggers’ or ‘web publishers’ in the historical sense of those terms. They don’t own a domain, pay for hosting, maintain a blog, or tweak and customize templates. While not downplaying the effort or intent that can go into a Tweet, Instagram post, or Facebook live stream — the very language around these activities makes them feel throwaway; just one out of a hundred records in your feed (and many thousands produced that very second on many large platforms).

It’s therefore been easy for us (as an industry) to dismiss this activity as something very different in shape, value, and intent as the more serious job of ‘publishing’.

There are all kinds of “site building” tools that let you pick a template and publish. Professionals have authoring tools or content management systems for maintaining big, serious websites. But these days, there are very few tools you could just use on your computer (or your tablet, or your phone) to create a web page or web site from scratch.” Anil Dash, The missing building blocks of the web

This bias has in our opinion resulted in the lack of true, mass-market web tools. Tools that anyone can use, and that offer more open alternatives to those offered by the very platforms that are slowly strangling the web. This pattern also seems unlikely to change at the hand of platforms themselves.

It would be disingenuous to suggest that platforms such as Facebook haven’t played a pivotal role in growing the number of people who routinely access, and create content for the web. The tools they offer provide excellent usability, high degrees of reliability, a wide network with whom to share, and are (crucially for many users) free to use. But in choosing them, users often surrender a degree of ownership, privacy, and control over the content they create. Sidestepping recent revelations about privacy and abuses of trust, we believe this pattern has a deeply damaging knock on effect for the open web:

  • People weave the web in and out of activities they perform every day.
  • The web often serves as a building block, a source of artifacts that users leverage to complete tasks, share opinions, and express their creativity. And to share these artifacts, users often turn to platform environments.
  • (Rather unsurprisingly) platforms do little to assist or enable these behaviours. They are happy to offer proprietary ‘Story’ or platform-optimized creative formats that suit their current engagement and monetization models — but helping users make better use of the web rarely figures into their plans. In fact, making more meaningful use of the web’s best (but far messier) features — declarative styling, universality, and portability — are often actively discouraged.
“Nearly every social network now treats a link as just the same as it treats any other object — the same as a photo, or a piece of text — instead of seeing it as a way to make that text richer. You’re encouraged to post one single hyperlink and expose it to a quasi-democratic process of liking and plussing and hearting: Adding several links to a piece of text is usually not allowed. Hyperlinks are objectivized, isolated, stripped of their powers.” — Hossein Derakhshan, The web we have to save
“Twitter and Facebook are like AOL in the old pre-web days. They are run by companies who are committed to provide a safe experience. They make tradeoffs for that. Limited linking. No styles. Character limits…Think of them as Disney-like experiences. The web is not safe. That is correct. We don’t want every place to be safe. So people can be wild and experiment and try out new ideas. It’s why the web has been the proving ground for so much incredible stuff over its history.” — Dave Winer

What happens next is at the root of many of the behaviours uncovered in Mozilla’s research. Restricting formatting and input doesn’t mean users won’t try to add that additional bit meaning on their own. And this results in some of the user-led hacks, workarounds, and adaptations shown below.

Annotation screenshots is a common way to add personal context to an artifact.
There’s a whole subculture of long-form blogging within Instagram comments, without the benefit of text formatting, line breaks, URLs, blockquotes, or other common signifiers of intent.
This is such a great example! Within the Twitter app, the bees are positioned above the image, and creatively angled to look as if they are flying towards the boy. But as Twitter doesn’t consider the possibility that the text and image might be a composition, we lose the author’s true intent once displayed in a new context.

City planners call manifestations such as these desire paths. Visible trails of intent left by people hacking the prescribed path — and doing their own thing. Twitter has a strong track record of leveraging desire paths (the most well know being hashtags and tweetstorms) but in closed platform environments, the most interesting paths are often actively discouraged, or banned altogether.

People deserve better.

The web that Tim Berners Lee created was for everyone. Not just for everyone to use, but for everyone to create. This is where we saw the opportunity. An opportunity to look forward, rather than back.

To create tools that are inherently built for the small, frequent, and deeply creative bursts and streams of content people create every day — but that embrace (and illuminate) the benefits of publishing to the open web.

A world where spinning up a new ‘site’ with a bit of content that interested users can subscribe to, and consume wherever they happen to be (including within aggregation silos such as Facebook and Twitter) is as easy for users, as it is for developers (strike that — easier — because to be fair, we expend a great deal of time making things easy for developers, and they can still be pretty hard).

The final pitch…

To which…we ended up with this high level pitch:

“…a creative toolkit, that empowers people of any skill level to create and remix bite-sized, visually rich content for the open web (and beyond) using their mobile device.”

In late 2016, we went on to test an early prototype of this concept with a group of users in Vancouver. The results were positive, and this led Mozilla to assemble a small team — consisting of ourselves to head up interaction and product design, Steamclock Software to build the mobile client, &Yet to construct the API, and web component, and Variable to create the generative artwork used within the app.

In part 2, we delve into product use cases, the design of the Hopscotch client, the content it enabled users to create, and key functionality related to sharing on the wider web.

If you enjoyed this article, check out our newsletter for a weekly selection of tidbits and research about our evolving relationship with technology.