Generative Design
Shaping a More Adaptive Web
James O'Toole
2024-12-09
A chameleon changing colour
For decades, online experiences have followed a familiar script: users land on websites that, while visually engaging and occasionally personalised, remain largely static. Even when websites attempt to adapt—perhaps with tailored recommendations or dynamic content—the changes are often based on broad assumptions, applied to predefined user segments, and limited in their responsiveness. What if we could move beyond this paradigm? What if a website could continuously evolve, in real time, to meet the unique interests and behaviours of every individual user?
This question arose during a conversation with Dr. Stuart Mills, a behavioural economist whose insights often focus on how digital environments shape human decision-making. Dr. Mills suggested combining the principles of website morphing—a concept introduced by John Hauser and Glen Urban—with the adaptive potential of large language models like ChatGPT. The idea was deceptively simple: instead of merely predicting user preferences, why not enable a site to dynamically reconfigure itself, moment by moment, based on how users interact?
Around the same time, I attended Glenn Jones's talk at UX Brighton. His presentation explored how large language models could go beyond content generation to actively create and modify UI components in real-time. Glenn's demonstration was compelling, illustrating how an AI could receive user inputs, craft interface elements, and seamlessly integrate them into a live experience. Inspired by Stuart's challenge and Glenn's practical insights, I spent a weekend building a prototype to explore what this could look like in practice.
From Concept to Reality
The prototype leverages two key technologies: generative AI and real-time behavioural data streaming. As a user navigates the site, their actions—scroll depth, interaction frequency, dwell time—are captured and fed into a generative AI model. This model interprets these signals and returns structured instructions to modify the site's layout and content. These instructions, formatted as JSON Patch operations, enable the site to:
- Dynamically generate interactive elements like quizzes, polls, and mini-games based on the user's engagement patterns and interests, creating "hook points" that maintain attention and encourage deeper exploration
- surface relevant images that match user interests, using AI to analyze engagement patterns and continuously refine the visual experience
- Weave together relevant facts, anecdotes, and contextual information into an evolving narrative thread that adapts to the user's curiosity and learning style
Each modification is seamlessly applied to the DOM, styled with Tailwind CSS, and animated to ensure a smooth, visually appealing transition. The result isn't merely a personalised website but an experience that feels alive and responsive. The interface adapts continuously, creating an engaging flow that blends the addictive, "just one more scroll" dynamic of platforms like TikTok with educational depth and entertainment value.
The Promise of Adaptive Design
This approach offers a profound shift in how we think about web design. Rather than delivering a fixed layout or relying on periodic updates, the website becomes a collaborative experience. The user's actions and interests guide the AI's decisions, which in turn reshape the site's presentation and content. Every journey through the site is unique, co-created in real time by the user and the AI.
While the prototype is an early experiment, its implications are broad. Imagine an ecommerce site that adjusts its product displays dynamically based on subtle cues, such as how long you pause over certain categories. Or an educational platform that tailors its lessons in real time, offering more examples or simplifying concepts based on how the learner interacts. This approach builds on website morphing principles to create more dynamic and responsive web experiences.
Building on Established Foundations
In their seminal work, John Hauser and Glen Urban introduced the concept of website morphing, which involves dynamically adjusting a website's design to align with the cognitive styles of individual users. By analyzing user clickstreams, they employed Bayesian updating to infer user preferences and applied dynamic programming to balance exploration and exploitation, thereby optimizing the user experience in real time. Their pioneering study, "Website Morphing", set a foundation for adaptive technologies that significantly enhance engagement by tailoring experiences to segmented audience groups.
Dr. Stuart Mills, whose work explores the intersection of behavioral science and technology, has expanded on these ideas. In his article "The Future of Nudging Will Be Personal", Mills examines how digital environments can shape decision-making. During our conversation, he suggested combining website morphing principles with large language models to create dynamically reconfigurable sites that respond to user interactions in real-time. His insights emphasize how behavioral data can create environments that feel intuitive and deeply personalized.
Glenn Jones's recent UX Brighton talk showcased a collaborative whiteboard interface, reminiscent of Miro, where users could interact with an AI agent through a chat interface. In one compelling demonstration, he requested a tool for ASCII art creation - the AI agent responded by dynamically generating and integrating a new component that could convert images to ASCII art directly on the board. This practical example illustrated how large language models can not only understand user requests but actively craft and deploy new UI components in real-time, highlighting the transformative potential of conversational AI in creating truly adaptive interfaces.
A New Frontier for the Web
This adaptive model holds immense potential. It offers a way to break free from the constraints of static interfaces and limited personalisation, enabling websites to act as dynamic, responsive companions rather than rigid tools. Yet, it also raises important questions. How do we balance user delight with ethical considerations, ensuring these systems respect privacy and avoid manipulation? How do we design for accessibility and inclusivity within such fluid environments?
These challenges are worth tackling because the potential rewards are significant. A truly adaptive web could transform how we shop, learn, and explore online. It could make the internet feel less like a repository of fixed pages and more like a living, breathing space tailored to our individual journeys.
Experience It for Yourself
The prototype is live and ready for exploration. It's far from finished—a starting point rather than a polished product—but it offers a glimpse of what might be possible. As you navigate, watch how the site evolves, responding to your actions with new elements and insights. This is not just a new feature; it's the beginning of a fundamentally different way of experiencing the web.
I invite you to try the demo and imagine where this approach might lead. Together, we can shape a web that is not merely functional but adaptive, engaging, and alive.