❜embed website design and Framer dev
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.
The company
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.
Challenges
- 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.
My Role
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.
Process
- 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.
Results
- 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.
Takeaways
- 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.