A designer who makes complex systems feel obvious.

I'm Robert Van Liew, a designer who builds. I design interfaces, then write the code, motion, and semantic architecture that make them feel right in the browser. I specialize in end-to-end experiences for financial products and SaaS platforms, using motion and transitions to make complex workflows feel cohesive. I take designs from low-fidelity flows all the way to production deployment, with a focus on interaction craft and accessibility. My work is grounded in building tools across finance and consumer experiences that reduce friction and increase confidence in how people think, decide, and feel when using products.

Based

New York, NY

Discipline

Creative Development · Product Design · Interaction Design

Status

Open to Product Design and Creative Developer roles · New York or remote

Profiles

LinkedIn · GitHub · Resume · PDF

Tools

Figma · Semantic HTML · Modern CSS (Grid, Custom Properties, :focus-visible) · React · TypeScript · Tailwind · GSAP · Framer Motion · WebGL shaders · Schema.org · Claude · Gemini

Strengths

Fintech SaaS · Ecosystem Patterns · Systems Thinking

Recognition

AWS re:Invent 2026 All Builders Welcome Grant

Practice

WCAG Accessibility · Semantic UI · Information Architecture

Work, filed under things I'm proud of.

Selected work

Designed and engineered end to end, from brand and interaction to state, checkout, and scale.

Your message, hidden here.

Press to light the flame

Lily's Secret

Brand site · Interactive demo · Six-language i18n · Arabic RTL

Design and build for a UAE candle brand whose product hides a personal message under the wax, readable only once the candle has burned down. The site solves an invisible product with a candle you can light on the page, ships in six languages with full Arabic right-to-left, and routes every order to the studio in English no matter which language the customer wrote it in.

Why, how, what broke

Why: The product's whole point is invisible until the candle burns down, so photos couldn't sell it.
How: Static HTML, CSS, and JS on Vercel with no build step. A candle you light on the page reveals a hidden message. Six languages, including full Arabic RTL, and every order reaches the studio in English.
What broke: Orders ran through pre-filled mailto links, which silently fail on many phones and webmail setups. When the client asked for Apple Pay, a bigger problem surfaced: a bespoke product with no fixed price can't be charged instantly.
Next time: Settle the pricing model and use a real form endpoint on day one instead of mailto.

View Case Study →

DMC Canada '26

UI/UX design · Custom code on Squarespace · E-commerce · Brand system

Sole designer and developer for the Canadian division of the DMC World DJ Championships, shipped in a 1-week sprint. The client runs on Squarespace, so I designed the full brand system and built it as custom code on top of the platform: a dark competition theme, injected hero, contact panel, and live ticker, with the shop and ticketing wired to Stripe, Apple Pay, and Google Pay.

Why, how, what broke

Why: The event needed ticketing, merch, and registration under one dark, competition-ready brand before a hard deadline.
How: The client runs on Squarespace, so I reskinned the whole site through custom header code injection: dark theme, Bebas Neue and Barlow, DMC red, an injected hero, contact panel, and ticker. Payments run through Squarespace checkout with Stripe, Apple Pay, and Google Pay connected. Shipped in about a week.
What broke: Working inside Squarespace means fighting its markup. Every custom element sits on top of a template I don't control, so selectors can break when the platform updates.
Next time: Push for a custom build the client owns, so the design isn't at the mercy of the platform.

View Case Study →

Take Me Back Bingo

Editorial identity · In-browser game · Event & FAQ schema · Share & inquiry systems

A live-events brand that had to keep converting during the dark periods between announced calendars. I built the whole site as one state machine: every primary CTA carries its live behavior in data attributes, and a single feature flag rewrites the entire site between "Buy Tickets" and "Get Notified" with no duplicated markup. Also shipped a free in-browser 5x5 game, a share flow that works around an iOS Safari user-activation constraint, and Event plus FAQ schema tuned for People Also Ask.

Why, how, what broke

Why: The brand had to keep converting in the gaps between announced event dates.
How: Built the site as one state machine. A single feature flag flips every CTA between “Buy Tickets” and “Get Notified” with no duplicated markup. The free bingo game shuffles cards with Fisher-Yates, detects wins, and crossfades audio between two decks.
What broke: I first built the game as song-recognition bingo. The client meant artist-recognition (you mark an artist when you hear any of their songs), so the card and play logic needed a full rethink. Separately, the share flow failed on iOS Safari because of its user-activation rule, so I restructured it.
Next time: Pin down the game rules with the client before writing any logic.

View Case Study →

Jersey Club Radio

UX/UI design · Wireframing · Audio streaming · React · Vite

Sole designer and engineer on a 24/7 live radio streaming platform for Jersey Club music. From hand sketches and Figma wireframes to a production Beta. Persistent mini-player, animated waveform, accessible playlist, and a WCAG-accessible dark UI. Three months in development, currently live in Beta at jerseyclubradio.com.

View Case Study →

More work

Product tools, archives, and editorial builds.

smartdeductions.app

Tax Profile & Preferences

Configure your business entity to improve deduction engine accuracy.

Business Entity Structure

Sole Proprietor

Gig worker or freelancer without formal incorporation.

Single-Member LLC

Registered LLC defaulting to pass-through taxation.

S-Corporation

Corporate tax structure with payroll requirements.

Ecosystem Integration: This entity selection automatically configures which tax filing format best fits your needs (Self-Employed vs Business Schedule C).

Cancel

Save Profile

EXPENSE BREAKDOWN

Top Categories

TOTAL OUTPUT

$1,397.76

Insurance

Utilities

Shopping

Groceries

Other

Dining

Financial SaaS: Smart Deductions

Systems thinking · Fintech dashboards · Data fluency · Local-first architecture

Sole designer and engineer on Smart Deductions, a local-first expense tracker for LLC owners and 1099 contractors. Drop in any PDF bank statement and get an IRS-ready, auto-categorized CSV export in under 5 seconds. Zero servers. Zero accounts. Complete privacy. Designed and built end-to-end with 9 Schedule C categories, dual chart views, and a command palette.

Why, how, what broke

Why: Small business owners and 1099 contractors lose deductions because they don't have tax expertise. I built it with Julie, who brought the operations and finance side.
How: Local-first, zero servers. PDF statements parse in the browser into IRS-ready, auto-categorized CSVs in under five seconds, across nine Schedule C categories.
What broke: Every bank formats PDF statements differently, so a parser that works for one bank can misread another.
Next time: Build a test set of real statement formats first, then write the parser against it.

View Case Study →

The Jersey City Sound

Information architecture · Static generation · Schema & AEO · Editorial standards

Founder, designer, and engineer on a permanent encyclopedia-archive of Jersey City music culture. 248 entries, 247 of them generated by a single Python script that writes every entry page, the A to Z index, the Legends memorial wing, the sources bibliography, the search index, and the sitemap from one data file. Static HTML with no framework and no database, because the requirement is that it still loads in twenty years.

Why, how, what broke

Why: Jersey City's music history had no permanent home online.
How: One Python script generates all 248 entry pages, the A to Z index, search, and sitemap from a single data file. Static HTML, no framework, built to still load in twenty years.
What broke: Generating everything from one script means one bad rule spreads everywhere. URL formats drifted between canonicals, internal links, and the sitemap, and one artist's chart credit was wrong: a Billboard 200 album listed as a Hot 100 single.
Next time: Add a validation pass that checks URLs and facts before the build writes any pages.

View Case Study →

NYC · Violinist · Producer

Julie
Schatz

Weddings · Private Events · Corporate Galas

View Case Study →

Julie Schatz Music

Editorial design · SEO & schema · Booking flow · Local-first state

Two-week rebuild of a NYC wedding musician site. Started from a placeholder domain with no design, no SEO, and no booking flow. Shipped an editorial visual system, a deep schema build covering LocalBusiness, MusicGroup, Events, Reviews, and FAQ, and a ceremony picker that drafts across pages into the booking form so couples arrive at the inquiry with their music already chosen.

View Case Study →

Systems & Craft.

Demonstrating scalable design tokens and accessible component architecture built for enterprise environments.

Design Tokens

Thematic Scalability

Built entirely on CSS root variables, so the UI adapts to different product ecosystems without altering the underlying markup. Try swapping the ecosystem theme in the top navigation bar.

                DateDescriptionAmount
              

Mobile View$42.62

Collapses gracefully via CSS Flex/Grid

Graceful Degradation

Responsive Architecture

Components are engineered to adapt flawlessly across viewports. For example, complex data tables collapse into highly legible mobile cards using modern CSS flex and grid logic, so a component ships once and holds up on every screen.

Before · WCAG fail
Secondary label
                  Ratio 2.8:1
                  
                
After · AA pass
Secondary label
                  Ratio 6.1:1
                  
                

Accessibility Audit

WCAG by Design

Every interactive component is audited against WCAG 2.1 AA. Contrast ratios are tested at both default and hover states. Focus rings use :focus-visible with a 3px offset to avoid false positives on mouse users. Motion is wrapped in prefers-reduced-motion, not as an afterthought, but as a first-class token applied globally. These aren't retrofits; they're baked into the design system from the first commit.

julieschatzmusic.com · JSON-LD graph

                @type: LocalBusiness
                #business
              
                @type: MusicGroup
                #business
              
                @type: Person
                #julie
              
                @type: Service × 8
                provider → #business
              
                @type: Event × 14
                performer → #julie
              
                @type: Review × 10 + AggregateRating
                itemReviewed → #business

SEO & Structured Data

Discoverable by Design

Search visibility is a design surface, not an afterthought. The Julie Schatz site carries 17 JSON-LD blocks wired together through @id references, so Google reads one connected entity instead of seventeen disconnected ones. LocalBusiness and MusicGroup share an identity. Eight Service entries point back to the business. Fourteen Event entries point to the Person. Ten Reviews drive an AggregateRating computed from real counts, never fabricated. Schema markup is a contract with the search engine, and treating it like a token system means the contract holds at scale.

Schedule C · category tokens
--cat-subscriptions#a78bfa
--cat-utilities#4fc3f7
--cat-shopping#818cf8
--cat-groceries#34d399
--cat-dining#ff6b7a
--cat-insurance#fb923c

Semantic Color Tokens

Color = Category. Always.

The Schedule C category colors are a design system, not a theme. Each token is referenced exactly once, in the token file, and consumed across the donut chart, bar chart, transaction badge, CSV export column header, and tooltip. "Purple always means Subscriptions" becomes internalized within a single session. Color works as grammar: the user learns it once and reads it everywhere.

Motion tokens · ease-fluid

                --dur-micro
                150ms
              

                --dur-macro
                250ms
              

                --dur-stage
                400ms
              
--ease-fluid
cubic-bezier(.22,.68,0,1)

Motion System

Named Easing, Purposeful Duration

Three duration tokens: micro (hover lifts), macro (card transitions), staging (staggered entrances), share one named easing curve: ease-fluid (cubic-bezier(.22,.68,0,1)). It produces a snappy initial response with a soft settle, avoiding the mechanical feel of ease-in-out. All motion is wrapped in prefers-reduced-motion: reduce at the token level, so no individual component needs to handle it.

Cross-surface draft · ceremony picker

                01
                /wedding-ceremony-songs/ · pick
              
                ↓
                localStorage · julieschatz.ceremony.v1
              
                02
                / · inquiry drawer · surface
              
                03
                capture-phase submit · attach
              
                04
                success only · clear

Local-First State

State without a Server

Draft work should follow the user across pages without requiring an account, a sync layer, or a database round-trip. On julieschatzmusic.com a couple builds their ceremony song selections on one page and the draft surfaces inside the booking form on any other page through one namespaced localStorage key. A MutationObserver watches the inquiry drawer for the active state, reads the draft, and renders it inline. A capture-phase submit listener serializes the draft into a hidden field before the form handler reads FormData. The draft only clears on confirmed submission success, so validation errors, network failures, and disposable-email rejections all leave the work intact. The pattern generalizes to any flow where the cost of losing user input is higher than the cost of carrying it.

/ DMC Canada '26

DMC Canada '26

UI/UX Design Custom Code E-Commerce

Sole designer and developer for the Canadian division of the DMC World DJ Championships. Designed and shipped the full site. Brand system, ticketing, merchandise, and event info, in a 1-week sprint. The client runs on Squarespace, so every custom section, transition, and style override was written by hand as code layered on top of the platform, from Figma to production.

Role

Designer · Lead Engineer

Partners

Event producer (requirements + brand approval) · DMC Canada organizer (stakeholder review)

Stack

Squarespace · Custom CSS + JS (code injection) · Stripe

Timeline

1 Week Sprint

Year

2026

01 · The Challenge

dmcdjcanada.com

Desktop · live site scroll · dmcdjcanada.com

Fragmented Legacy Platform

The DMC World DJ Championships needed a full digital overhaul for their Canadian division. The legacy system was fragmented and didn't perform well on mobile devices, leading to cart abandonment during high-traffic ticket drops. The goal was to unify the brand and checkout experience in one site the organizers could keep running themselves on Squarespace.

02 · The Solution

Dark-Themed, Competition-Ready UI

I designed a dark-themed, glassmorphic UI system with stark red contrasts to evoke competition and energy, then built it as custom CSS and JavaScript injected site-wide through Squarespace's header code injection. Bebas Neue and Barlow, full-bleed imagery, an injected hero, a contact panel, and a live ticker set the tone for an event that's all about performance and precision.

Mobile · responsive scroll · hover to preview

03 · E-Commerce Overhaul

Friction-Free Purchase Funnel

Most ticket buyers arrive on a phone, so the shop, product pages, and cart were restyled mobile-first: larger touch targets, a clearer product hierarchy, and a short path from the event page to the cart. All of it is custom code on top of Squarespace's commerce templates, so the organizers still manage products and tickets in the tools they already know.

Desktop · full event page with ticketing

Mobile · optimized checkout flow

04 · Checkout Friction & Payment Routing

Payments Left Where They Can't Break

Squarespace doesn't let custom code touch its checkout, and for a ticket drop that is a feature: the payment path is the one part of the site that can't be broken by a design change. I connected Stripe as the payment processor and turned on Apple Pay and Google Pay, so buyers on a phone can pay without typing a card number. My custom code stops at the cart; checkout stays on the platform.

05 · Outcomes

Sprint Results

Delivered under a hard event deadline. Stakeholder sign-off in a single design review. No revision rounds on visual direction.

Sprint Duration

6 days

Figma to production deploy

Lighthouse Score

94 / 100

Performance · Accessibility 100

Revision Rounds

Stakeholder sign-off in first review

06 · Deliverables

Unified Brand + Commerce Platform

The final platform integrates ticketing, official merchandise, event information, and competitor registration under a single dark-themed brand system. Every element, from hover states to micro-interactions, was designed to feel cohesive, premium, and razor-sharp for an event built on precision.

Say hello, the tab is open.

Open to Product Design and Creative Developer roles in New York or remote. Recruiters and hiring managers, I reply within one business day.