Designing Better Mobile Experiences: From Responsive Heuristics to AI-Powered Layouts
Product design | Wix STUDIO & WIX HARMONY
Creating websites in a freeform editor gives creators maximum design freedom, but it also introduces one of the biggest challenges in responsive web design.
Layouts that look great on desktop often break on mobile. Elements overlap, text becomes unreadable, spacing collapses, and websites require extensive manual adjustments.
This initiative explored two complementary approaches to improving responsive design: heuristic-based automation and AI-assisted layout generation.
Mobile heuristic in action
Project 01 · Mobile Heuristics
Problem
DIY creators often skip mobile editing altogether. Without manual adjustments, desktop layouts frequently produce broken mobile experiences with overlapping elements, inconsistent spacing, and poor readability.
Goal
Improve the default mobile experience by automatically cleaner, more readable, and accessible mobile layouts -giving creators a strong starting point without requiring responsive design knowledge.
My Contribution
Mobile Heuristics was a long-term, cross-functional initiative involving multiple designers and product teams, working both collaboratively and independently to improve the default mobile experience in Wix Studio.
My contribution focused on establishing some of the project's foundational building blocks. Through visual research, I identified recurring layout and typography patterns, surfaced the key challenges the heuristic system needed to solve, and helped define the principles that informed both the mobile heuristics and the responsive typography system.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Research
Mobile Layout Patterns
By analyzing layouts, spacing, composition, and content hierarchy, we identified a small set of recurring mobile structures that became the foundation of the heuristic system.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Mapping responsive typography patterns
Responsive Typography Research
I also mapped how typography behaves across responsive websites to define a scalable text system. The resulting rules preserve visual hierarchy while translating desktop typography into readable mobile scales through a simple and predictable model.
Text heuristic rulles
Project 02 · Responsive AI
Improving Responsive AI
Responsive AI bridges the gap between freeform design and structured web layouts. With a single click, it analyzes a freely designed section and transforms it into an editable layout structure using Wix Studio's native layout tools. This allows creators to design freely without thinking about responsiveness upfront, while still ending up with a structured layout they can understand, edit, and build upon.
As one of the first AI-powered capabilities introduced into the Wix Studio Editor, Responsive AI represented an early step toward AI-assisted website creation while keeping creators in control of the final result.
One focus of this project was improving the quality of the generated layouts.
Through extensive experimentation, we refined the layout engine by simplifying the available layout primitives. Rather than relying heavily on CSS Grid, we prioritized layout tools that users naturally understand and adopt more easily, while defining clearer rules for when each layout type should be applied.
This work led to a 40% increase in Responsive AI adoption, measured by the percentage of users who accepted and kept the generated layout instead of modifying or replacing it.
LLM Exploration
To explore the future of Responsive AI, I built a playground powered by an external LLM.
The system receives a freeform canvas composed of absolutely positioned elements and reorganizes it into a structured hierarchy of stacks, grids, and standalone components according to responsive design principles.
The playground allowed rapid experimentation with prompt engineering, layout heuristics, and reasoning capabilities beyond the existing internal model.
Enter component positions in JSON format
Send JSON to generate layout structure
Get the layout root and structural hierarchy—displayed visually
