# Generative Design
## Shaping a More Adaptive Web
James O'Toole | 2024-12-09
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.
wrote a blog too:
https://www.cbmdigital.co.uk/blog/generative-design-shaping-...
# Generative Design ## Shaping a More Adaptive Web
James O'Toole | 2024-12-09
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.
[read more](https://www.cbmdigital.co.uk/blog/generative-design-shaping-...)