*

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

Grantx was born from a simple realization: too many high-impact projects fail not because of vision, but because of grant complexity.

By using predictive AI to navigate the world's largest funder database, Grantx helps orgs find the funding they have been missing in seconds, not weeks. Our mission is to disrupt the traditional funding model so the world’s changemakers can get back to real work.

View Live Site

ROLE

Sole Website Design,

3D and Motion Design

TEAM

1 Designer,

1 Product Manager,

4 Engineers

TOOL
COMPANY

Grantx

COMPANY

Grantx

YEAR

Dec 2025 – Ongoing

The Redesign.

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.

Engagement Time
0

x

Avg. engagement time per session

10s

~3min

Session Engagement
0

x

Session based engagement rate

12.18%

57.82%

Conversion rate

+

300

%

*calculated based on homepage-to-contact page progression

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