Projects

Project Overview

Zurf is a mobile Social-Fi app on Lens Protocol — an aggressively playful, animation-heavy feed that became the community hub for Lens-sponsored in-person launch events. As the sole designer on a one-month sprint, I designed the full cross-platform system and the animation-handoff pipeline that later became the foundation for Vibra.

Built for a Web3-native community of builders, artists, and meme-lords, Zurf turns the typically dry, technical Social-Fi environment into a vibrant, animated playground — bridging complex blockchain social interactions and an experience that actually feels fun to use.

The Challenge

  • Aggressive go-to-market: the entire app — complex UI interactions and a cross-platform design system — designed and handed off within a one-month sprint.
  • Content adaptation: forcing varied, traditionally horizontal or static content (plain-text posts, multi-ratio images) into a strict, full-screen vertical scrolling feed.
  • Wallet gamification: reimagining the traditional, spreadsheet-like crypto wallet as a community-driven "Social Wallet."

How I Solved It

1. Adaptive Vertical Feed & Ambient Motion

To deliver the high sensory stimulation users expect from mainstream giants like TikTok, I designed an adaptive vertical layout system.

  • Content-specific logic: rather than forcing all media into one box, the UI applies distinct architectural rules for images, videos, and text — all unified within the same scrollable vertical container and reaction overlay.
  • Dynamic text posts: to keep plain text from feeling static in a video-first environment, I added ambient motion backgrounds, so the interface stays constantly "alive" and maximizes continuous visual engagement even when the content itself is static.

2. The Social Wallet — social proof injected into DeFi

To fold social dynamics into DeFi mechanics, I redesigned the standard token asset list by injecting social proof directly into the UI. Blending financial balances with community rankings, leaderboards, and friends' token activity turned the wallet into a tool for speculation, discovery, and community-driven virality rather than just a storage utility.

Engineering & Animation Handoff

An animation-heavy interface for a React Native cross-platform app needs a highly structured, developer-friendly handoff. As the sole designer working with the frontend lead, I tailored the delivery of every micro-interaction to its specific technical requirement:

  • High-complexity animations: prototyped in After Effects, exported via Rive and Lottie for lightweight, native integration.
  • Micro-interactions & UI motion: prototyped in Figma and Jitter, then translated directly into coded animations with CSS or Moti to protect app performance.
  • Static fallbacks: extremely complex visual loops were exported as highly optimized media to guarantee performance on lower-end devices.
Zurf compositions in Figma
Zurf compositions in Figma

Outcome & Proof

Zurf shipped inside the one-month sprint and became the community hub for a series of in-person events sponsored directly by Lens Protocol — a Web3 product that pulled its community off-screen and into the room. Its real compounding value is structural: the design system I established for Zurf became the direct foundation for Vibra, its successor. Two shipped Social-Fi products on one evolving system is the proof that it was built to be reused, not rebuilt.

What this demonstrates: shipping an animation-heavy, cross-platform product solo under deadline — and establishing a design system durable enough to seed the next product.

Links & Documentation