UX Designer • Design Systems & Accessibility

Where modern code meets clean, timeless craft.

What I do

I live in the deep space between design and engineering.

Most teams lose something between mockup and merge, but I operate on both sides of that line. Decisions made in Figma are reflected in production.

  • UX & product design

    Research, flows, information architecture, and testing that settles arguments. A location-first rebuild of a clinical-trial signup cut form abandonment from 65% to 37%.

  • Design systems

    Tokens, components, and the governance that keeps them honest. LINEAR runs ~266 tokens and ~75 components from one source of truth, rendered in both Figma and Webflow, with 360 brand skins from five theme axes.

  • Web development

    Webflow, WordPress, SvelteKit, and Three.js when the brief calls for it. I write the code, so the prototype isn't a promise someone else has to keep.

  • Brand & identity

    Strategy first, logo second. Vedara Ventures, a $100M+ holding company, got a complete brand in 14 days.

  • Accessibility & MX

    WCAG 2.2 AA is my floor, but I also structure sites AI agents can read with llms.txt, agents.json, and clean semantic markup.

About Me

Your Friendly Neighborhood Design Archaeologist

Select to learn more

Contact Me

Let's build the damn thing.

Looking for a partner or "sidekick" with capable hands to get you through a complex website or mobile app project? Or are you hiring for a UX or systems-related role? Shoot me a message.

Nonprofit Website

Kevin Popke Foundation Gets a Purpose-Driven Headless CMS

PageSpeed 98 / 100 / 100 / 100

Redesigned the Kevin Popke Foundation's website around the namesake's story and built a custom headless WordPress CMS on a $2,000 budget. Scores 98–100 on PageSpeed and allows the team to log new grants without a developer.

Problem
The old site was built to check a box: it buried Kevin's story behind the organization, and every single update needed a developer.
Solution
I reordered the site as person, then purpose, then programs, and built a custom headless WordPress CMS whose fields map directly to the page design.
Impact
Launched August 24, 2026 on $2,000, scoring 98 desktop and 95 mobile for performance, with new grants logged in a couple of clicks and no developer.
Client
Kevin Popke Foundation
Role
Lead designer + developer (solo, AI-assisted development)
Timeline
Concepts in week one; launched August 24
Open case study

Design System

LINEAR 2.0: When a 15,000-Line Stylesheet Becomes a Tokenized Design System

1,990 classes → 266

Turned VYNE Creative's rigid Webflow template into a fully tokenized design system spanning Figma and Webflow. Slashed 1,990 classes and variables down to a lean 266, introduced dark mode and five corner-radius themes, and brought 100% of color pairings up to WCAG 2.2 AA compliance.

Problem
LINEAR was VYNE Creative's internal Webflow template, but it was extremely inflexible: a single exported stylesheet (15,209 lines of CSS) with no dark mode, no theming, and breakpoints that only scaled down.
Solution
Turned it into a fully tokenized design system spanning Figma and Webflow, so everything designed in Figma maps to working Webflow classes.
Impact
Slashed 1,990 classes and variables down to a lean 266, introduced dark mode and five corner-radius themes, and brought 100% of color pairings up to WCAG 2.2 AA compliance.
Client
VYNE Creative
Role
Lead designer & engineer (solo), VYNE Creative
Timeline
8 weeks
Open case study

Client Website

Location-First Design Cut Clinical Trial Abandonment From 65% to 37%

Form abandonment: 65% → 37%

Redesigned a clinical-trial recruitment site for a Fortune 100 research organization by putting trial locations ahead of the medical screener. Form abandonment fell from 65% to 37%, and the client reused the system on two more studies.

Problem
Across four prior trial sites, 65% of people quit the screener, because they had to share health data before learning whether the trial was anywhere near them.
Solution
I put a searchable city directory ahead of the screener and saved facility matching for after qualification, so people could answer "Is this near me?" first.
Impact
Abandonment fell to 37%, verified participant matches rose 23%, and the client replaced its old template with this system on two more studies.
Client
SAD Clinical Trials
Role
Sole UX/UI designer (Lead Designer)
Timeline
6 weeks
Open case study

Client Website • Design + Development

From Phone-Only to 8–19 Web Requests Daily

Created the first website for a commercial truck repair shop on Chicago's South Side. Once paid and social traffic started to roll in by month 2, the site was getting 8–19 additional estimate requests a day. 37.3% of requests became paid service orders, and 59% of people who started the estimate form submitted it (measured: HubSpot, first 60 days).

Open project

A $14,000 average order, and no website

312 Truck Body Repair & Painting on Chicago’s South Side had new owners, a $14,000 average service order, and no website. Every quote happened by phone or walk-in, leaving the shop invisible to fleet managers looking for vendors online. I had six weeks to change that and bring in new estimate requests the shop’s marketing team could convert into service orders.

Four decisions behind the build

1. Design for the task, not the average

Mobile-first is the default, but what matters is what people come to the site to do. These visitors came to request an estimate on a commercial truck: VIN, make, model, year, fleet size, damage photos. I designed the site to be responsive, with the media galleries, service details, and estimate form flexing down to mobile portrait.

2. Proof before the pitch

Nobody approves a $14,000 repair from a paragraph of copy. Before-and-after galleries and a facility tour sit above the service copy. Heavy media and fast pages pull against each other, but the site held a 2.3-second load time through its first two months.

3. A complex form that’s easy to finish

A shop can’t quote a truck repair without the vehicle type, its age, whether it’s part of a fleet, and the damage. I worked closely with the client on a form with conditional logic, so each person only sees the fields that apply to their earlier answers, plus file uploads and fields for VIN, make, model, year, and fleet size. Over the first 60 days, 59% of people who started the form submitted it, against the 35% floor I’d set.

4. One lead, two teams

Every request lands in HubSpot as a lead and goes to two places: the service department, to build the estimate, and marketing, where the lead joins an email sequence with a first-timer discount. The shop quotes and nurtures in parallel, so a fleet manager comparing three vendors hears back from both teams, not just one.

What didn’t work

I first set up the CMS almost like a storefront, with services, service categories, specialties, and certifications, all cross-linked. That was a lot of IA for a catalog nobody needed: fleet managers aren’t browsing collections of sub-services between meetings. I cut the structure back to the main services and service categories and let the estimate form do the work.

Results

At launch, the client’s marketing team started paid ads targeting the South Side and sent social traffic to the site. By month two, the site brought in 8–19 additional estimate requests a day on top of phone and walk-in quotes.

+8–19 requests a day 59% form completion 37.3% close rate
On top of phone and walk-in quotes, by month two Of people who started the estimate form (35% floor) Of requests became paid service orders

Measured in HubSpot over the first 60 days. The site is still live, and about 60–70% of it is unchanged from my build.

Takeaways

The agency moved me to a new project at day 60, so the numbers stop there. Next time, I’d build the client a HubSpot dashboard before handing off (requests, close rate, and lead source, split by channel) so they could see which ads were actually paying off. I’d also add device tracking from launch, so the desktop-first call rests on their own traffic, not an industry assumption.

Brand / Website

Zero to One for Vedara Ventures' $100M Portfolio

Brand + site in 8 weeks on $7.5K

Designed the brand identity and website for Vedara Ventures, a $100M+ holding company with 40+ businesses that had no real branding or online presence. Launched in 8 weeks on a $7.5K budget.

Problem
A holding company with 40+ businesses worth over $100M had no logo, no brand guidelines, and no website, with Q4 investor conferences weeks away.
Solution
I designed the brand in two weeks, then built the site in six on WordPress, Bricks Builder, and ACF, so the owners can add businesses without help.
Impact
Launched on time and on budget with a 1.9-second load time, and the client now adds a company page in 3–5 minutes with zero training.
Client
Vedara Ventures
Role
Lead Designer
Timeline
8 weeks
Open case study

Mobile App

Never Alone Recovery Mobile: An Empathy-First Digital Companion

Designed a recovery companion for a nonprofit organization built on access, encouragement, and positive reinforcement. In a 35-person pilot, 46% were still using it at day 120 despite no incentives being offered.

Open project

Never Alone Recovery, a nonprofit supporting individuals with mental health and substance use disorders, wanted to build a digital companion for their community. They needed an app where users could locate nearby support groups, track their recovery, and journal, while leaving room for ambitious future features like sponsor linking and 24/7 chat support.

I designed an empathy-driven mobile app built around access, encouragement, and positive reinforcement, shifting the focus away from clinical micromanagement and toward genuine user support.

What I did

  • Data-driven encouragement: Designed features that cross-reference user milestones with national data to deliver highly motivating insights—like calculating exactly how much money a user has saved on alcohol since their sobriety date.
  • Empathy-first verbiage: Replaced rigid numerical scoring in the “Sobriety Tracker” with qualitative status indicators (e.g., “Stable,” “Cautious,” “At Risk”) after testing revealed that numbers felt too much like a stressful grading system.
  • Location-based support: Built a GPS-enabled tool to help users seamlessly locate nearby support group meetings, laying the architectural groundwork for future geotagged attendance verification.

Results

46% retention Forward-looking foundation “Gentle” experience
At day 120 during 35-person pilot With scalable architecture ready for phase 2 As described by users

Although the client had to pause development just short of a wide release due to shifting subsidy funding, the successful pilot proved a crucial point: approaching recovery tech with empathy and positive reinforcement is exactly what drives genuine user engagement.

Concept App • Solo Project

A Calendar That Says No So You Don't Have To

A self-initiated concept app for anyone struggling to balance work, personal, and family calendars. 4 of 4 testers used the wizard to time-block their schedules in under five minutes.

Open project

An empty calendar doesn’t mean free time

I freelance, and more than once a client call landed on the same day and at the same time as a doctor’s appointment. Every calendar was accurate on its own, but my work calendar had no idea the afternoon was spoken for. Four of my colleagues had brought up the same annoyance with me. They needed something that knew which hours belonged to which part of their life.

Constraint: people’s calendars already live in Google, Outlook, Notion, and more. Schedually had to sit on top of them and unite them, not replace them.

Three decisions behind it

1. Blocks are protected, and changes are negotiated

Most calendars color-code your time and let anything book over it. That’s how I got double-booked. In Schedually, an event that lands outside its block triggers a conflict. You pick an open slot inside your rules, and Schedually sends the event’s owner a request to confirm the new time. Nothing moves on their schedule without their sign-off, but nothing lands in the wrong block on yours. One tester put it best: “It’s not me saying no, it’s my schedule saying that that time is already allocated.”

2. Connect calendars before drawing the week

The wizard connects Google, Outlook, or Notion before you draw any blocks, so you draw around events you can already see. That makes it a recognition task, not a memory test: nobody has to remember that Thursday has swim lessons. The cost was a permissions screen right at the start, which is where onboarding usually loses people.

3. Tap to place, drag to adjust

Dragging blocks across a week grid works on desktop. On a phone, the drag fights the scroll and fails on small targets. A tap places a block, and a double-tap unlocks drag handles for fine-tuning the start and end. It’s an extra step for people who’d rather drag everything, but it’s why a whole week fits in one sitting.

What didn’t work

I assumed the week view would be the home screen, since that’s where calendar apps usually open. But once the blocks are set, the week view barely changes. What people needed to see first was what’s coming up next and what still needs a decision. I replaced the calendar view with a dashboard for today’s blocks, upcoming events, and unresolved or pending conflicts.

Results

I ran moderated think-aloud sessions with my four peers, who shared their screens and talked through each step.

4 of 4 3:03 median 4:51 slowest
Testers time-blocked a full week To block out a whole week Still under five minutes

It’s a small, friendly sample, so the results are directional. The request-to-confirm flow also went untested from the other side (the person receiving the request).

Takeaways

Next, I’d recruit testers outside my own circle and wire up the confirmation side for the event’s creator. It’s also worth testing whether a counter-offer only works if it doesn’t come off as rude.

Web Application

ClienTell: A Custom Client Intake & Contracting Platform

A secure, PIN-protected web app built for my consulting business that lets clients seamlessly complete creative briefs, review modular scopes of work, and sign contracts directly in the browser.

Open project

Onboarding freelance clients used to be a fragmented nightmare spanning online forms, scattered email chains, and clunky PDF documents. I needed a streamlined, professional way to handle intake and legal agreements under a single roof for my consulting business, so I built ClienTell: one dashboard for modular creative briefs, customizable statements of work, and browser-signable contracts.

What I built

  • Frictionless client portal: Clients access their documents with a simple, secure 6-digit PIN. The UI features a visible 30-second autosave countdown and a self-serve PIN reset flow, essentially eliminating “I’m locked out” support emails.
  • Dynamic brief builder: A modular intake system where I can spin up reusable brief templates with customized input types (rich text, restricted fields, media uploads) and track completion status in real time.
  • Automated contract drafting: As a client completes a brief, ClienTell pulls specific answers directly into pending contracts, creating an instant starting point for the Design Services Agreement, SOW, and optional NDA.
  • Bulletproof data architecture: Strict deployment safeguards protect active projects. Client PINs are securely encrypted, schema changes ship safely as additive D1 migrations, and destructive push commands are blocked by default to prevent accidental data wipes.

Results

Unified onboarding flow Zero-friction onboarding Scalable intake
Replaces messy platform-hopping With self-serve client access Briefs that adapt to any project scope

Engineering ClienTell forced me to balance a powerful admin backend with a simple client frontend that’s easy to use, showing that good UX can also mean protecting your time.

Web Application • Solo Design + Development

Contour: Mapping the Shape of a Designer's Skills

Designed and built a self-assessment tool for designers to assess their skills and have them mapped to a visual shape (I, T, Pi, M, or X), with a growth guide and exportable charts. Launched in approx. three weeks.

Open project

Not every designer is T-shaped

“T-shaped” became the default way to describe a designer’s skills: deep in one thing, broad across the rest. But plenty of careers don’t look like that. Some people go deep in two or three areas, and some connect disciplines more than they specialize. There are a number of different designer “shapes,” and I wanted a tool that could show someone theirs.

Two decisions behind it

1. Honesty is the policy

With free sliders, anyone could rate every skill 10/10, and the shape of the chart would mean nothing. That’s a ceiling effect, and it turns every result into the same flat blob. So only one skill can score a 10, one a 9, and one an 8; everything from 7 down is unrestricted. You can’t claim to be world-class at everything if you want to understand your shape. It’s the only way the shape means anything.

2. Nothing leaves the browser

People rate themselves differently when they think someone’s watching, so all scoring and storage happen in the user’s browser. Contour logs no usage and has no database storing or analyzing results. The trade-off: no cross-device sync, and with only basic analytics, I can’t tell you how many people have used it. For now, I feel it’s the right call.

How Contour reads a shape

Contour reads your ratings as a profile and looks at three things: how many peaks there are, how far the ratings spread, and where they flatten out. One deep peak with little around it is an I. One peak on a broad base is a T. Two peaks on a broad base make a Pi, and three or more make an M. An X pairs deep expertise with the breadth to lead across disciplines.

Built accessible from day one. Automated Playwright and axe checks run clean for keyboard and screen-reader support. Tooltips open on focus and tap, not just hover, and every animation respects prefers-reduced-motion. A manual VoiceOver pass is next: automated checks catch a lot, but not everything.

Results

~3 weeks 5 shapes 0 data stored
Shipped solo, from concept to live I, T, Pi, M, or X, with a growth guide Every rating stays in the user’s browser

Contour is live, with chart exports as SVG, PNG, and JPEG. I don’t have usage numbers, on purpose.

Web Application

LinkedWin: A Custom Content Dashboard & Archive

Turned a practical need into a LinkedIn content dashboard where I could access and analyze all of my posts in a simple searchable post library. Solo project took roughly 53 hours total.

Open project

I needed a centralized hub to plan, schedule, and catalog my LinkedIn posts. Instead of paying for another SaaS subscription, I decided to build my own over a weekend.

In roughly 53 hours, I engineered a custom local dashboard that aggregates four separate data sources into a single, searchable content repository.

What I built

  • A purpose-built content editor: Streamlines drafting with quick-insert special characters, templated footers, @mentions, and an integrated staging area for planned pinned comments.
  • Clean architecture & intuitive UI: Designed with a minimal, frictionless frontend so the focus stays on creation, backed by modular and easily maintainable code.
  • API-ready infrastructure: The backend is wired for automated scheduling, posting, and engagement. I’m keeping these features offline until I can safely sandbox them to avoid LinkedIn’s strict API bans.

Results

Rapid deployment Centralized archive Unified workspace
~53 hours from concept to production Fully searchable, on-demand post library Merges a Calendar, Composer, Library, and Analytics into one tool

Right now, LinkedWin runs locally as a highly capable content organizer. Next up, I’m planning to spin up a test account to safely validate the automated publishing pipeline, along with a new “Radar” module to track trending posts across my network.