Elli.eco

Scaling a fragmented product into a modern design system.

How I used UX strategy and AI workflows to reduce design friction, align with Webflow, and establish the Elli 2.0 visual direction.

Scroll to explore

The Problem

A fragmented experience slowing down product evolution.

Elli was growing quickly, but the product's UX wasn't keeping up. The existing experience lacked a structured design system, resulting in inconsistent UI patterns, mismatched button hierarchies, and typography that didn't scale. Every new page required redesigning components from scratch, and severe misalignment between design and Webflow development was slowing down feature delivery. This wasn’t just a visual issue—it was a structural bottleneck.

The Approach

System-thinking accelerated by AI workflows.

To move forward, the focus had to shift from designing screens to building systems. I audited the existing components to define a clean, scalable token system (spacing, typography, color). To accelerate this, I leveraged Figma MCP and Claude Code workflows to rapidly generate documentation and component variations, drastically cutting down manual design time. Finally, I mapped this new Figma system directly to Webflow constraints, ensuring a seamless, frictionless handoff to development.

The Impact

From friction to flow.

The design system didn’t just improve visual consistency—it fundamentally changed how the product is built. It enabled much faster design-to-development handoff times, eliminated repeated design work, and established a scalable foundation. With the system in place, it unlocked the ability to explore Elli 2.0—a more modern, cohesive, and tech-driven product direction.

Key Wins: