LOOPY: A Post-Mortem

Loopy GIF

Loops changed my life.

Three years ago, I picked up a copy of Donella Meadows' Thinking In Systems. The core idea of her book is this: we humans tend to think of the world in linear cause-and-effect – X causes Y, Y causes Z, and so on. But the world is not linear, it's LOOPY. X affects Y, but Y also affects X! This is why, in the real world, small changes can snowball out of control, large changes can undo themselves, and most things can't be predicted for jack diddly squat.

AN INTERACTIVE EXPLANATION OF FEEDBACK LOOPS:
(no seriously, you can play with this!)

A mind-blowing shift in thinking. Still, at the time, it seemed like an intellectual curiosity. But over the years, this seed of an idea germinated in the manure of my mind, and blossomed into all areas of my life.

I saw bitter political conflicts as just people being trapped in a bad loop. I saw seemingly-unreachable success as just people who've found themselves a good loop. And – when I later learnt about cognitive behavioral therapy – systems thinking helped me find my crappy mental feedback loops, "debug" them, and build better mental loops in their place. (Later we'll see a personal example: I had a short bout of mild depression after finishing this project. Why? You'll find out.)

That's why I wanted to make LOOPY – to share systems thinking, that seed of an idea that profoundly changed my life, with my friends, my fans, and random strangers passing by.

Here's the nitty-gritty on how I tried to do just that.

. . .

LOOPY: DESIGN CHOICES

drawn on paper

1) Are You FEELING It Now, Mr. Krabs?

Before I made LOOPY, I just drew feedback loop diagrams on physical pencil and paper. Like a chump.

These loops are a frequent part of my sketchbook-slash-diary. I would record my life's events & lessons not just as linear words, but as loopy pictures. And it's always been painfully obvious that I wanted to – needed to – make those drawings come to life.

However, I didn't want to lose that tangible, natural FEELING of drawing circles and arrows. So that's why I didn't do drag-and-drop. Drawing also provides new affordances that ol' drag-and-drop can't: I could more quickly and precisely define the curvature of my arrows, and the position + size(?) of my circles. (more on circle size later)

Besides, drag-and-drop is too mainstream. [hipster sounds]

But most importantly, just as I went from analog to digital, I wanted users to go the other direction, from digital to analog. I want you, after playing with LOOPY, to draw loops outside of LOOPY, on a whiteboard, in your diary, in your mind.

I think that is the crucial test for a new tool of thought – can the tool go beyond itself, and become part of how you think? [mcluhan sounds]

2) No “Hidden Figures”.

Just like in the movie, important figures shouldn't be hidden. (Bam, pop-culture reference)

For a visual tool to become part of how you think, there needs to be a 1-to-1 mapping of what you can see and what is important. That is: SEEING === UNDERSTANDING. So, I just needed to turn a set of complex, dynamic feedback loops into a simple, colorful visualization. Easy, right?

Yeah, well, turns out I had a really hard time deciding how to visualize a bunch of circles. I tried nodes changing color. I tried nodes shifting in opacity. Somehow it didn't even occur to me to use size to represent quantities until I watched this TED-Ed talk. (that's where the above picture comes from!) But even then, I had another problem: I wanted to represent positive and negative quantities – and how the heck do you draw a "negative size"? To represent "negative", I tried circles inverting their color. I tried circles turning from solid to outlined. And – worst design choice – I tried ignoring it completely, and hoping users don't bother asking what's happening under the hood.

Eventually, I came to terms with the hardest (yet most obvious) lesson in design:

IF YOU HAVE IT, SHOW IT.
IF YOU CAN'T SHOW IT, DON'T HAVE IT.

Therefore, if I couldn't easily show positive & negative, then I shouldn't have positive & negative. I threw that out, made all the nodes positive-only, and LOOPY was so much better for it.

Inversely, I shouldn't show what doesn't exist. Remember when I said you could use drawing to define circle size? I cut that out of LOOPY. You used to be able to draw nodes of different sizes! But it didn't actually represent anything, so the varying sizes confused people since it implied data that wasn't there. So, I scrapped that too.

All that is to say, when you design a visual tool, you should try your best to think like a baby. That is:

IF YOU CAN'T SEE IT, IT DOESN'T EXIST.

sine wave

3) slowwwwwwww dowwwwwwwwn

That's a GIF of an early version of LOOPY. On top of the positive/negative thing, I also wanted the tool to generate smooth sine waves, escalating exponential curves, all the cool stuff the grown-ups are doing. However, that meant I had to make LOOPY's model continuous, that is, instantaneous.

That was a disaster for helping people learn.

It may be obvious in hindsight, but when people learn a new thing, they first have to see it broken down, step-by-step. Only after you understand how to do the dance steps, can you understand how to do the dance. (This also explains why I got polarized feedback on the original, instantaneous version of LOOPY. People who already knew about the quantitative models loved it, but people who didn't were lost. And those who did know quantitative modeling assumed I was using models like Lotka-Volterra, which I was not.)

My solution? Throw out the quantitative modeling altogether. If you can't show it, don't have it. It's all qualitative now, baby! I re-purposed my visualization of neural networks from Neurotic Neurons, where "signals" travel down "wires", to visualize how cause-and-effect in LOOPY happens, step-by-step.

And for the cherry on top, I added a "simulation speed" slider at the bottom, so that, once you understand each step, you can turn it up to a rapid, near-continuous speed – and watch the system dance.

text

4) Text: The Medium of Last Resort

Dance! Music! Pictures! Play! All sublime mediums of expressivity. By avoiding the verbal, you can bypass your conscious brain, and make ART that speaks directly to a deeper level, your lizard brain, your emotions, your soul.

Yeah but try making an interpretative dance of that last paragraph. Sometimes, you actually need to use words.

It was two weeks before LOOPY was due to be released, but something was still missing. You could make & simulate all these simulations – which you could feel by drawing, had no hidden figures, and slowly revealed themselves step-by-step... but it needed something more. It needed a way for a user to give more context, to clarify information, and to add their own personal touch.

Solution: words. You could now slap on text labels anywhere in LOOPY.

These labels are like "commenting your code". It's not just helpful for whoever else reads your code, but for you yourself. It helps you clarify your own thinking. Furthermore, by being able to embed text in LOOPY, the simulations could go from being a visual aid in an explanation, to being the full explanation itself.

Also, text labels meant you could now add emoji. 😜

urls

5) URLs: The Poor Man's Filesharing

...not that, uh, emoji doesn't come with its own problems. As I learnt the hard way when I made Simulating The World In Emoji, sometimes, Unicode just SUUUUUUUUUCKS.

Really, encoding & decoding data in general just sucks. In S.T.W.I.E, I let players save & load from a database I rented. A few problems with that: 1) it costs money, 2) now I'm relying on someone else, 3) now my players are relying on me relying on someone else, 4) it's harder for programmers to remix the open source version, coz now you have to get your own database with exact same API, and 5) it won't work offline.

So this time, I went for a solution that I don't see others use often, but I wish they would! It's a solution that's – yeah, a bit janky – but it works, it decentralizes your tool even more, and it'll remain useable offline, long after all your servers shut down, get scrapped for parts, and turned into kitschy trinkets on Etsy. [hipster sounds]

And that solution is: don't save & load from a database, just CRAM IT ALL into a URL, which people can then share.

Obviously, this won't work for huge amounts of data – any URL above 2048 characters gets risky – but for a small simulation? A custom level design? Any tiny chunk of user-made content? I'd love to see more developers try out this janky-but-portable solution!

Now, this whole last section may seem too tech-focused, irrelevant to the design of LOOPY, but it's absolutely crucial. By giving you a robust, portable, decentralized way to share loops with each other – to learn from each other – we can go from thinking in systems, to talking in systems.

And seeing how loops changed my life... I wonder what'll happen when our whole culture learns to think and talk in loopy systems.

. . .

TL;DR

For all you budding designers out there, here's the stick-it-on-a-post-it-note version of what I've learnt while making LOOPY:

  1. Add FEELING with a direct user interface, such as drawing.
  2. Show what's important. If you can't show it, don't have it.
  3. First show the steps at slow speed, then show the dance at full speed.
  4. Sometimes you just actually need words.
  5. Unicode sucks Give a way for users to learn from each other.

AW;TNA

Actually wait; that's not all.

My design Tipz N' Trix™ don't mean anything by themselves. They need to be in service of a core idea, a core purpose. And that brings me to a more personal recent event:

After I finished LOOPY, I fell into a short bout of depression.

Thankfully, nothing too serious – and actually, that's probably thanks to LOOPY. As I mentioned before, the seed of systems thinking has grown its roots into every part of my life, even the mental & emotional. So when I felt that sudden pang of emptiness after releasing LOOPY, I didn't ignore it or escape it, I wanted to understand it... by drawing circles.

Thus, let me present to you, Nicky Case's Interactive Simulation of Why It's a Bad Idea to Use Unfinished Goals and Projects as a Primary Source of Motivation:

Making this model gave me so much emotional clarity. To paraphrase John Dewey, “a problem well-stated is a problem half-solved.”

But only half-solved. I now knew that "unfinished goals" was a terrible source of motivation, but what should I replace it with? Gratefully, the answer came to me soon – in the form of all the models people made with LOOPY.

You see, the praise and hype and retweets and Hacker News points LOOPY got – that didn't move me at all. (if anything, attention makes me nervous.) But seeing a scientist use LOOPY to model biochemical reactions in cancer? A public policymaker use LOOPY to understand how to help their community? A fan use LOOPY to gain insight into the economics, politics, and media around them? And all of their simulations helping me learn something new as well?

That makes me smile. That puts a big dumb grin on my face.

So, let me turn a negative feedback loop into a positive feedback loop:

I'm starting to realize that what really means the most to me is helping people. Actually wait, that's not quite right. It's helping people help themselves. It's not just giving them a fish, but teaching them how to fish. It's not just giving them cool ideas, but giving them the (mental) tools to create their own cool ideas. Which, in turn, I can learn from. And then share with others. And the virtuous cycle repeats.

My various Interactivez N' Gamez™ don't mean anything by themselves. They need to be in service of a core idea, a core purpose.

Loops changed my life. But what loop is my life? For now – and this will totally change in the future – but for now, maybe it's this:


LOOPY: DESIGN SKETCHES

The very first sketch of LOOPY, on Dec 18th 2016, just a week after I released my previous project. Also, note the Arrival alien in the bottom-left. Arrival was a 2016 film about aliens who think and talk in a non-linear language. I absolutely adored that film, and – heh – I guess it must've inspired LOOPY.

After designing the "playable" part of LOOPY, I needed to design the "editable" part of LOOPY. Here's the first sketch of the editor. Note how there isn't even an Eraser tool – I was originally going to make people scratch out things with the Pencil tool in order to delete them.

This is a sketch NOT done by me. I was showing off an alpha version of LOOPY to my friends at HARC, back when LOOPY was still "quantitative". The above was a sketch of what we thought LOOPY was going to be. An Alternate Universe LOOPY, if you will.

Dec 18: first design sketch
Jan 19: first prototype (sent to a few friends)
Feb 23: first beta (sent to Patreon supporters)
Mar 23: LOOPY RELEASED!

Again, the book that got me started years ago: Thinking In Systems

And if you haven't seen it yet, here's my new project, LOOPY!