Designing Serendipity

Augmenting Human Curiosity

My bookshelves are filled with happy accidents. I've come to think of stumbling into 'Aha!' moments — where you suddenly realize a connection between ideas — as a gift. There's something revelatory about accidental discoveries. They impart truths in a way that being told what to think never can.

For a while, I've had this vague concept in my head for an app. The idea was to employ AI-augmented left and right swipes to enable a kind of low-friction information foraging¹ through Wikipedia pages. Users would be able to skim through vast swaths of information until they stumble into something that piques their interest. Until now, it's just been an idea.

As a designer-developer hybrid, I've been keen to explore approaches to designing a mobile app that is anchored around AI. (My toolkit for this project included React Native, Python, OpenAI's API, and Figma.)

Principles

The App had a core driver from the beginning: I wanted users to learn things they didn't know they wanted to learn. In addition to the main mission, there were a few other principles I wanted the app to imbue:

• Deemphasize AI. AI should be in the background, subtly working on behalf of users. Users needn't know about it.
• The UI should be fast and it should feel infinite. I want users to just swipe away with little or no friction, for as long as they like, with no dead ends.
• The AI should augment the user experience, but not dictate what the user can do. Users can browse Wikipedia in my app as they normally would, but can also enlist AI features whenever they like with a swipe.
• The app should be healthy for users to use long-term². The same forces that make serendipitous discoveries thrilling are likely the same that make conspiracy theories alluring. I want everything users find to be factual to the extent possible. Therefore, Serenwikity is a layer on top of Wikipedia, and only points to Wikipedia pages or summarizes them.

Challenges

A BIG CONTRADICTION

There is a fundamental contradiction in the idea of Serenwikity. Design is sometimes described as being intentional about what users experience. I wanted users to experience serendipity, which inherently cannot be willed into existence; it manifests when people make a connection between ideas that were hitherto unforeseen.

NON-DETERMINISM

What's more, Serenwikity is anchored around prompt engineering, which is something of a dark art: LLM output is not always easy to predict. And to compound the problem, each swipe would be used to modify the next prompt. What would the user experience be like after two or three swipes right? What about 10? What about a combination of left and right?

Simulations

SIMULATION ONE: CONCEPT VALIDATION

Because of the challenges inherent in the project, I had doubts whether the idea would even work.

Before I wrote any code or sketched out ideas, I created a Python-based simulation to see if swiping through Wikipedia pages would yield a coherent and interesting experience. The simulation was fairly straightforward: I wrote LLM prompts for left and right swipes, then Python code to run simulations of users swiping.

FROM J.S. BACH TO 12-TONE MODERN CLASSICAL

One simulation was particularly encouraging. It started with a page about J.S. Bach, then right swiped to The Well-Tempered Clavier, one of Bach's most famous works, which was intuitive and appropriate.

The simulation then veered to a page about an Austrian pianist, Friedrich Gulda, who's 1950's recordings of The Well-Tempered Clavier are well-regarded. That swiped to a contemporary pianist, and eventually modern classical and the 12-tone technique.

SIMULATION TWO: CODE PERFORMANCE AND THE USER EXPERIENCE

This is exactly what I was envisioning. It also got me to define what a "good right swipe" meant. A good right swipe should be both logical and surprising, i.e., serendipitous.

I created my next simulation in React to help me explore approaches to pre-loading Wikipedia pages. I needed to figure out how to make the UI feel fast and simple to the user, when in fact, there is a lot going on in the back ground.

Designing the UX

INTERACTION DESIGN

Once I had confidence in my idea, I tackled swipes, which were core to the app's concept. I started with a quick sketch that conveyed key swipe interaction sequences, then went directly to code. I was especially interested how the swipes would feel in my hands, so I created a prototype in React Native and started experimenting and refining.

I worked in rapid, iterative cycles. My workflow went from exploring animations and gestures in code, to sketching ideas in Figma, and back to code. This back-and-forth helped me create ergonomic interactions and explore fun concepts, such as having right-swipe pages zoom-in and left swipes zoom-out.

Getting The Right-Swipe Prompt Right

Once I got the app working with real data, two problems with right swipes began to emerge: One, they tended to repeat. Leonardo da Vinci would lead to Mona Lisa which would lead to Leonardo da Vinci. Two, when I added code to prevent URLs from repeating, the LLM would make up Wikipedia pages.

The solution I came up with works like this:

1. The app takes the current page, say the Mona Lisa, and it extracts all of its URLs, which lead to topics like sfumato (the painting technique da Vinci used), Florence, portrait painting, etc.
2. It then takes AI-generated summaries for the previous Wikipedia pages the user has right swiped through (from say, the Italian Renaissance, Renaissance Art and da Vinci) and compiles a prompt.
3. The compiled prompt basically says, "These Wikipedia page summaries are in order and create a narrative. Read through these URLs and find one that would offer a logical continuation of the summaries". The actual prompt is much longer, but that is the gist of it.

A MOVING NARRATIVE

Let's say the user has swiped from da Vinci to the Mona Lisa. The app extracts all of the links from the Mona Lisa Wikipedia page and has the AI choose a link that continues the sequence. In this case, it takes the user to sfumato, a painting technique da Vinci used to create subtle gradients. That leads to another painting method, chiaroscuro, a technique used by Caravaggio.

The new right prompt creates cohesion as it connects each page to the last logically. The result is an open-ended, AI-assisted journey through logically connected ideas. It works something akin to a moving average — users can swipe right as long as they like, and the AI will sit in the background, acting as a subtle guide that weaves a constantly-emerging narrative.

INTENTIONAL NARRATIVE DEVIATION

Another problem with right swipes arose: they could be too predictable (i.e., boring).

I introduced a second prompt that works just like the first, with one small change. The second prompt has the LLM find a logical next page that "most people would find surprising or counterintuitive". The app uses this prompt periodically at random.

FROM BACK TO THE FUTURE TO... ANIMAL WELFARE?

The deviating swipes seemed to get the right-swipe narratives out of their ruts. They could also be entertaining: In the 80s sci-fi classic, Back to the Future, Doc Brown, a mad scientist, put his Catalan Sheepdog into a jury-rigged time machine and launched it one minute into the future. Apparently a few people in test audiences in 1985 expressed concerns about the dog's welfare, and saw the demo as a kind of animal testing. You have to admit, they have a point.

AI-Augmented Wayfinding

Everything in this app orbits around the right swipe. The right swipe is the functionality that allows users to skim through vast information spaces until something strikes them. But what if the user does not like where the app is taking them? I created several features that allow users to course-correct when things are not quite right:

1. Left swipe: When a right swipe leads to something that is not intriguing, the user can swipe left and go to a broader, related subject.
2. Undo: If they swipe right and don't like the page it takes them to, but like the narrative path they've been on, they can click undo.
3. Random: If they want something totally new, they can click the random button.
4. Search: If they have a subject in mind they want to explore, they can search.

All of these features allow for a low-friction way to course-correct based on the user's immediate intuition about what's interesting to them. It's a kind of wayfinding that is semi-free-form: it's part AI-generated and part user-influenced.

LAYERED Contextualization

Serenwikity essentially layers features ontop of Wikipedia to enable augmented information foraging.

EPISTEMOLOGICAL CEILINGS

When users keep swiping left a problem arises: you can't logically keep expanding to broader subjects forever. The left swipes hit a kind of epistemological ceiling and the app starts repeating itself, usually around very high-level concepts like ethics or cosmology. When this happens, a message appears offering the user ways to course-correct.

Thoughts On Design And Code

KEEPING THE LOOP TIGHT

When working on my self-directed projects, I find myself doing much of the design in React. Here are a couple of thoughts.

1. Any value designers create only reaches users through production code. Keeping design tightly coupled with code keeps the design close to what users will actually experience.
2. When designing an app with prompt engineering at the core, there is a lot of very fast back and forth between coding and design. I might alter a prompt, then modify the UI. Keeping these iterations tight is critical.
3. Our use of the word fidelity in design is peculiar. Its literal meaning is "the degree of exactness with which something is copied or reproduced". Going from high fidelity Figma file to code means the thing that delivers value to users (production code) is lower fidelity (i.e., a copy) than the Figma file. How design manifests as production code should be our focus, not Figma files.
4. The final touches in the visual design process were always in code. I think this is the way. Designers shouldn't create refined designs in Figma, and then go through the ritual of being disappointed with the production version that reaches users.

At The Threshold Of Change

WHERE NEW PARADIGMS AND UX PATTERNS EMERGE

I believe we are at the threshold of fundamental changes in how users interact with computers. The ability to explore ideas and be creative in code will be where new paradigms and UX patterns emerge.

Think about how an app like this might have been created 10 years ago, or even five. It would have needed a data science team, who would have needed months to ingest data and train it. What's more, the team would have needed to dedicate time and money to a vague concept (Wikipedia with dating app-like features).

In other words, the app would have never existed.

In this new world we are in, designers who can code and know something about prompt engineering, can think of an idea, then effectively conjure an app that a data science team had been working on for months. It's pretty crazy when you think about it.

Key Takeaways

In building Serenwikity, I learned that the boundaries between design, engineering, and AI are increasingly blurred in interesting and exciting ways. Here are a few takeaways:

1. Simulations of the user experience are useful and should be in the UX design toolkit.
2. Designing an AI app requires tight coupling between design and code. Frameworks like React enable hot reloading, which make design-to-code iterations nearly instant.
3. Prompt engineering could easily be called prompt design, and UX designers should learn to do it³. For AI apps, prompt engineering will likely sit at the center of the whole creative process for the foreseeable future.
4. Designers should code. I've gone back-and-forth on this one for years, but it feels like the tide has shifted.

The future of how products and apps are created is changing profoundly, and designers who code will be at the center of it.