ENGAGE — biomanufacturing talent platformENGAGE01ENGAGEBiomanufacturing talent platform & brand Voice Pay — voice-first agentic paymentsVoice Pay02Voice PayVoice-first agentic payments PRiME — precision-medicine site, revampedPRiME03PRiMEPrecision-medicine site, revamped Lumora — studio CRM for photographersLumora04LumoraStudio CRM for photographers BHN — biotech training platformBHN05BHNBiotech training platform R-Trade — adaptive trading interfaceR-Trade06R-TradeAn adaptive trading interface Uptick — paper-trading simulatorUptick07UptickPaper-trading, zero risk ₿₿₿Sat Stacker — Bitcoin DCA savings trackerSat Stacker08Sat StackerA Bitcoin dollar-cost-averaging tracker — live price, an animated stack & goal ring, and an on-device AI “Ask” that explains your own numbers.Design-led buildExpo · TSDesign system + app PSW Care — home care, locally ownedPSW Care09PSW CareHome care, locally owned Film & motion — corporate film, brand & event workFilm10FilmShowreel & motion — Telly-winning

Ruilin Yuan

Creative Director  ·  Designer  ·  Engineer

Two decades shaping products, brands & the films that move people.

Creative Director · Designer · Engineer

Ruilin
Yuan

Two decades shaping products, brands & the films that move people.

Selected Work2004 — 2026
The IndexEight Projects
Next.js ◆React ◆TypeScript ◆Tailwind CSS ◆GSAP ◆Lenis ◆Framer Motion ◆Three.js ◆SwiftUI ◆Jetpack Compose ◆Prisma ◆PostgreSQL ◆Node.js ◆Python ◆Vercel ◆Figma ◆After Effects ◆Blender ◆Stripe ◆Firebase ◆
01 / 09Brand · Product · Film

ENGAGE

A talent platform and brand connecting Canada’s biomanufacturing sector to the people it needs.

Design & buildGSAPMotion-led brand
View case study →
ENGAGE
02 / 09Agentic AI · Voice · UX

Voice Pay

A voice-first concept for agentic payments — the agent narrates each step, you confirm by voice, and a spoken one-time code executes.

Concept & prototypeWeb SpeechVoice-first flow
View case study →
Voice Pay — agentic voice payments
03 / 09Brand · Web · Motion

PRiME

A full revamp for U of T’s Precision Medicine Initiative — 23 events, one living system.

Design & buildNext.js · GSAP23 events migrated
View case study →
PRiME
04 / 09Product · SaaS · Analytics

Lumora

A studio platform for photographers — with a shipped marketing-intelligence dashboard: lead-channel quality, conversion funnel, and revenue by client, from live data.

Full-stackNext.js · PrismaMulti-tenant SaaS
View case study →
Lumora — Marketing Intelligence dashboard
05 / 09Product · Platform · Web

BHN

A biotech training platform — courses, cohorts and credentials for the next wave of biomanufacturing talent.

Full-stackNext.js · PrismaAI match engine
View case study →
BHN
06 / 09Product · Fintech · UI

R-Trade

An adaptive trading interface that reshapes itself around how you actually trade.

Design & buildVite · TSAdaptive layout
View case study →
R-Trade
07 / 09Product · iOS · Web

Uptick

A paper-trading simulator with live Level-2 market data — native iOS, Android, and a web demo.

Architecture & buildSwiftUI · TSBit-exact engine
View case study →
Uptick
08 / 09Product · Mobile · Fintech

Sat Stacker

A Bitcoin dollar-cost-averaging tracker — built design-system-first, with a live price, an animated stack, and an on-device AI “Ask” tab.

Design-led buildExpo · TSDesign system + app
View case study →
Sat Stacker — Bitcoin DCA tracker
09 / 09Brand · Web · Local

PSW Care

A locally owned home-care practice — real PSWs, published rates, no quote-on-call.

Brand & buildNext.jsTransparent pricing
View case study →
PSW Care
Capabilities

Design, research & build

16 — Capabilities
Drag / scroll
ResearchDiscovery

User Research

Interviews, surveys, and field studies synthesized into clear, actionable insight.

ResearchTesting

Usability Testing

Moderated and unmoderated tests that catch friction before it ships.

DesignFigma

Wireframing & Prototyping

Low- to high-fidelity flows and clickable prototypes that de-risk decisions early.

DesignSystems

Design Systems

Reusable components, tokens, and guidelines that keep products consistent at scale.

Interaction designA cursor taps a UI element; accent ripple rings radiate and the element toggles to an active accent state.
DesignInteraction

Interaction Design

States, transitions, and micro-interactions that make interfaces feel obvious.

DesignIA

Information Architecture

Navigation, taxonomy, and content structure organized around how people actually look.

DesignWCAG

Accessibility

WCAG contrast, keyboard, and screen-reader support designed in from the start.

DesignMobile-First

Responsive Design

Layouts that hold from small phones to ultrawide — mobile-first, always.

Aa
DesignIdentity

Visual & Brand Design

Typography, color, and identity systems with a strong editorial point of view.

MotionAnimation

Motion Design

Purposeful animation and scroll choreography — always reduced-motion aware.

ResearchJourneys

Personas & Journey Maps

Personas and end-to-end journey maps that align teams on the real problem.

BuildHandoff

Design-to-Code

Pixel-faithful translation from design files to production front-end.

BuildReact

Front-End Development

Production React & Next.js in TypeScript — accessible, fast, and maintainable.

BuildIteration

Rapid Prototyping

Working prototypes in days, not weeks, to test ideas with real users.

BuildFull-Stack

Full-Stack Development

End-to-end product builds — databases, auth, APIs, and deployment.

BuildLLMs

AI Integration

LLM-powered features designed to be reliable, explainable, and genuinely useful.