The project focused on redesigning the website to better reflect the product, with a particular emphasis on creating a dynamic, responsive design that incorporated animations to showcase the platform's AI capabilities.

Embed provides real-time AI recommendations for on-chain actions through a single API. It combines on-chain and off-chain data to deliver high-quality content streams such as wallets, feeds, and agents, with built-in moderation, scalability, and low spam.

Brand refresh without rebranding: The website had to feel modern and engaging while retaining existing brand elements.

Responsive, multi‑mode design: Building a site that automatically adapts to light and dark modes required a comprehensive design system with CSS variables and SVG tokens for every visual asset.

Complex product explanation: The product’s core value, AI filtering of on‑chain data, needed to be communicated intuitively through animation.

Platform choice: Choosing a no-code platform to keep the website maintenance under design & marketing team.

Stakeholder alignment: Coordinating feedback on feature priorities and visual tone from brand stakeholders while keeping the project on schedule.

I was the principal designer and front‑end architect for the project. My responsibilities included:

Conducting stakeholder workshops to identify key product benefits and required website sections.

Sketching wireframes in Figma and establishing a design system with tokens for color, typography, spacing, and imagery.

Building reusable components (buttons, cards, navigation) in Framer with full light/dark support.

Designing and implementing a frame‑by‑frame animation that visualizes how the tool ingests on‑chain data and delivers curated content.

Adding a minimalistic blog section with CMS items and hidden “future screens” for upcoming features.

Handover and ongoing collaboration with the product team on feature sections' design.

Discovery & Feedback Gathering – Interviewed brand stakeholders to list the main benefits and desired sections.

Wireframe & Design System – Created high‑fidelity Figma prototypes, defined CSS variables and design tokens for every visual element.

Framer Migration – Ported Figma assets to Framer, built a component library, and enabled light/dark mode via the token system.

Animation Development – Crafted a custom component animation in Framer that illustrates data collection from the blockchain and AI filtering.

Content Integration – Added a sleek blog section with CMS items for better content management.

Review & Launch – Iterated with stakeholders, resolved hand‑off issues, and released the dynamic website.

Post‑Launch Collaboration – Continued to support product redesigns and feature proposals based on user and stakeholder feedback.

Delivered a fully responsive, dynamic Framer website that preserves embed’s brand identity while showcasing the product's AI features.

The redesign attracted two new prospects who praised the site as “sick,” leading to additional inquiries.

Ongoing partnership with Embed’s product team, working on broader product redesigns and feature roll‑outs.

The animations effectively communicated complex filtering, predictions and personalization features to non‑technical audiences.

A robust design system with tokens is essential for rapid, cross‑mode deployment, especially when every asset must adapt to light and dark themes.

Framer can serve not only as a prototype tool but also as a production‑ready platform when combined with a well‑structured component library.

Visualizing data pipelines through animation bridges the gap between technical functionality and user understanding.

Maintaining brand continuity while modernizing a site can be achieved by focusing on feature‑centric design rather than a full rebrand.

Ongoing collaboration between designers and product teams ensures that design decisions align with evolving product strategy.