*

QIAO LI

ㄑㄧㄠˋ ㄌㄧˇ

*

home

*

*

work

*

*

art

*

*

QIAO LI

ㄑㄧㄠˋ ㄌㄧˇ

Grantx Marketing Website Redesign

A B2B marketing website redesign focused on product storytelling, trust, and lead conversion.

Branding

Web UIUX

3D

AI

Information Architecture

about grantx

High-impact projects stall on grant complexity, not vision.

Grantx uses predictive AI to surface the right funding in minutes, not weeks.

View Live Site

View Live Site

ROLE

Website Designer

TEAM

1 Design,

1 PM

TOOL
COMPANY

Grantx

COMPANY

Grantx

YEAR

2025 – 2026

ALL WORK

01. Context

AI products are hard to understand

Users won't get the technical logic. They just need to feel the value in 10 seconds.

02. PROCESS

Helping People See What We Do

Started with sketches before touching any pixels.

03. DELIVER

Built to look and feel like an AI product

Matched to the product, pushed to feel more modern and techy.

ALL WORK

ALL WORK

ALL WORK

01. Context

Why Grant Seeking Is Broken

AI products are hard to understand

Brilliant people are spending their time on grant paperwork instead of the work that matters.


Users won't get the technical logic. They just need to feel the value in 10 seconds.

Brilliant people are spending their time on grant paperwork instead of the work that matters.

Prove the value within 10 secs

AI products all look the same right now, so it's hard to make yours stand out. You can't walk a user through backend logic they'll never read, especially not in ten seconds. The goal is simple, make the value click before they scroll away.

I Achieved.

Engagement Time
0
0

x

x

10s → ~3min

Session Engagement
0
0

x

x

12.18% → 57.82%

Conversion rate

+

300
300

%

%

homepage to contact page

The Impact.

the RESEARCH

"Prioritize smarts over sentiences to increase trust with AI."

sourced from

Nielsen Norman Group

the NAME

Sunny felt like a person, not something you'd trust to actually get the job done.

The Impact.

Pre-redesign performance was measured Jan 1–10 using Google Analytics 4. Post-redesign performance was measured Jan 27–Feb 6 using PostHog, with equivalent engagement metrics used for comparison.

The Approach.

01 - Understand

Immediate comprehension within the first 10 seconds

Helping users grasp Grantx’s value intuitively, without a learning curve.

AI products are inherently hard to explain.

AI products are inherently hard to explain.

Their value is invisible, buried in complex backend logic and abstract data flows. In the critical first 10 seconds, users won't read long technical explanations, and generic stock photos add zero narrative value.

Their value is invisible, buried in complex backend logic and abstract data flows. In the critical first 10 seconds, users won't read long technical explanations, and generic stock photos add zero narrative value.

To solve this, I designed the 3D background to make the invisible tangible. Drawing inspiration from children’s museums—where complex physical concepts are taught through tactile, visual metaphors—the animation translates abstract code into a visceral and immediate experience.

To solve this, I designed the 3D background to make the invisible tangible. Drawing inspiration from children’s museums—where complex physical concepts are taught through tactile, visual metaphors—the animation translates abstract code into a visceral and immediate experience.

concept sketch

3D execution in Spline

i. Visualizing Speed

i. Visualizing Speed

The fluid motion mirrors the seamless nature of our AI-driven matching, creating a frictionless contrast to traditional grant tools.

The fluid motion mirrors the seamless nature of our AI-driven matching, creating a frictionless contrast to traditional grant tools.

ii. Directing the Eye

ii. Directing the Eye

The 3D elements are choreographed to flow toward the primary headline and CTA, establishing a natural visual hierarchy.

The 3D elements are choreographed to flow toward the primary headline and CTA, establishing a natural visual hierarchy.

iii. Reducing Cognitive Load

iii. Reducing Cognitive Load

By pairing an outcome-focused headline with 3D visuals, the interface allows users to decode the value proposition at a single glance.

By pairing an outcome-focused headline with 3D visuals, the interface allows users to decode the value proposition at a single glance.

iv. Beyond Stock Imagery

iv. Beyond Stock Imagery

Unlike competitors relying on generic, low-effort stock photos, our custom visual language signals a level of polish and investment that builds immediate trust.

Unlike competitors relying on generic, low-effort stock photos, our custom visual language signals a level of polish and investment that builds immediate trust.

02 - Orient

Reduced cognitive load through information hierarchy

Even if users stay,

can they orient themselves without effort?

03 - Believe

A visual system that reinforces trust and product credibility

It should feel credible, modern, and intelligent, just as we promise with our product.

Visual alignment with the product experience

Visual alignment with the product experience

For a data-driven B2B platform, credibility is currency. The site visual language is intentionally aligned with the product itself to reduce friction.

For a data-driven B2B platform, credibility is currency. The site visual language is intentionally aligned with the product itself to reduce friction.

Text colors

Light

Text Primary

Text Secondary

Text Brand

Text on Color

Dark

Text Primary

Text Secondary

Text Brand

Text on Color

Surface colors

Light

Surface Primary

Surface Secondary

Surface Tertiary

Surface White

Dark

Surface Primary

Surface Secondary

Surface Tertiary

Surface Black

Marketing Site Color Palette

In-App System Tokens

Marketing Site UI Atoms

In-App System UI Atom Tokens

Elevating components with motion

Elevating components with motion

Smooth, purposeful motion design adds a layer of polish that static pages lack. It guides the user's eye and provides satisfying feedback upon interaction.

Smooth, purposeful motion design adds a layer of polish that static pages lack. It guides the user's eye and provides satisfying feedback upon interaction.

Contact Us

Action Utilities

AI Agent

Conceptual Data Visualization

Button

Get Started

Button

Get Started

Buttons

Consistent experience across platforms

Trust is immediately broken if a site breaks on mobile. I ensured a seamless experience across all viewports.

This meant translating the heavy 3D desktop experience into optimized, lightweight assets for mobile users without losing the core brand identity and storytelling power.

Desktop 1200

Desktop 1200

Tablet 1199-810

Tablet 1199-810

Phone 809

Phone 809

BACK TO TOP

© 2026 Qiao Li

*

QIAOOC00@GMAIL.COM

*

BASED IN NY

BACK TO TOP

© 2026 Qiao Li

*

QIAOOC00@GMAIL.COM

*

BASED IN NY

BACK TO TOP

© 2026 Qiao Li

*

QIAOOC00@GMAIL.COM

*

BASED IN NY