AI-Driven

Design System

UX/UI Animation

Product Development

Motion Design

Visual Storytelling

Design for Trust:
A Cross‑Border Visual Language

Designing a clear, scalable visual system to humanize AI and align teams across Canada and China.

AI-Driven

Design System

UX/UI Animation

Product Development

Motion Design

Visual Storytelling

Design for Trust:
A Cross‑Border Visual Language

Designing a clear, scalable visual system to humanize AI and align teams across Canada and China.
Challenges

Complex design constraints and compliance boundaries over cloud projects.

NDA restrictions prevent naming the company & deep details.

Research & Internal tools development focused on Chinese audiences.

Fragmented design language caused misalignment between Chinese & Canadian teams.

Design, research, and prototype visuals lacked clarity and emotional connection.

TL:DR & Key Solutions
Built a visual and motion system to make AI easier to understand and more trustworthy. Helped teams in Canada and China align through clear design standards, emotional storytelling, and a shared UX language.

Connected Canada–China teams with one scalable visual and motion system.

Made AI feel intuitive and transparent through emotionally responsive design.

Enabled smoother teamwork with modular, emotionally intelligent components.

Used storytelling and visual clarity to reduce confusion and accelerate buy-in.

Challenges

Complex design constraints and compliance boundaries over cloud projects.

NDA restrictions prevent naming the company & deep details.

Research & Internal tools development focused on Chinese audiences.

Fragmented design language caused misalignment between Chinese & Canadian teams.

Design, research, and prototype visuals lacked clarity and emotional connection.

TL:DR & Key Solutions
Built a visual and motion system to make AI easier to understand and more trustworthy. Helped teams in Canada and China align through clear design standards, emotional storytelling, and a shared UX language.

Connected Canada–China teams with one scalable visual and motion system.

Made AI feel intuitive and transparent through emotionally responsive design.

Enabled smoother teamwork with modular, emotionally intelligent components.

Used storytelling and visual clarity to reduce confusion and accelerate buy-in.

This entire project is under a NDA and could not be shared entirely. Elements showcased bellow were recreated from sketch and does not represent any brand or related project.

This entire project is under a NDA and could not be shared entirely. Elements showcased bellow were recreated from sketch and does not represent any brand or related project.

A global cloud services provider needed a better way to connect its Canada-based UX team with international stakeholders. Presentations, prototypes, and UI felt fragmented, making communication harder and the value of new AI features less clear.

A global cloud services provider needed a better way to connect its Canada-based UX team with international stakeholders. Presentations, prototypes, and UI felt fragmented, making communication harder and the value of new AI features less clear.

UX Design

Design System

Product Development

Visual Design

Visual Design

Human-Centered Design interaction

Human-Centered Design interaction

Designing for Emotion by creating visual templates and patterns that connect data to human feelings and turn complex ideas into something people actually understand.

Designing for Emotion by creating visual templates and patterns that connect data to human feelings and turn complex ideas into something people actually understand.

Positive experience at the right time

Positive experience at the right time

容器

Container

领先图标

Leading

Icon

文本

Text

尾随图标

Trailing

Icon

标签

Label

容器

Container

领先图标

Leading

Icon

文本

Text

尾随图标

Trailing

Icon

标签

Label

Copy Address

用户体验团队

UX Team

Copy Address

设计

Design

Copy Address

研究

Research

Copy Address

发展

Development

Copy Address

用户体验团队

UX Team

Copy Address

设计

Design

Copy Address

研究

Research

Copy Address

发展

Development

Rooted in emotional design principles, this system helped streamline decisions by pairing clarity with feeling. A role-based color logic—Blue for trust, Green for growth, Orange for inspiration, and Purple for depth—ensured every interaction carried meaning and intent.

Rooted in emotional design principles, this system helped streamline decisions by pairing clarity with feeling. A role-based color logic—Blue for trust, Green for growth, Orange for inspiration, and Purple for depth—ensured every interaction carried meaning and intent.

这对我们的用户角色有益吗?

Will this benefit our user persona?

痛点

User Journey

用户目标

User Goals

特征A

Feature A

特征B

Feature B

特征C

Feature C

高价值

High Value

低价值

Low Value

低价值

Low Value

这对我们的用户角色有益吗?

Will this benefit our user persona?

痛点

User Journey

用户目标

User Goals

特征A

Feature A

特征B

Feature B

特征C

Feature C

高价值

High Value

低价值

Low Value

低价值

Low Value

Vision Video Documentation

目的

Purpose

目标受众

Target Audience

关键要点

Key Takeaway

用户旅程

User Journey

视频色调和风格

Video Tone & Style

核心信息和结构

Core Message & Structure

交付成果、持续时间、格式

Deliverables, Duration, Format

故事情节

Storyline

Vision Video Documentation

目的

Purpose

目标受众

Target Audience

关键要点

Key Takeaway

用户旅程

User Journey

视频色调和风格

Video Tone & Style

核心信息和结构

Core Message & Structure

交付成果、持续时间、格式

Deliverables, Duration, Format

故事情节

Storyline

More than visual polish, the system delivered a bilingual, cloud-based foundation that unified design, research, and development workflows. From icon sets and mockups to profile visuals, tags, and scalable grids, each asset was crafted to maintain brand consistency while supporting faster, cross-cultural collaboration across prototypes, reports, and stakeholder decks.

More than visual polish, the system delivered a bilingual, cloud-based foundation that unified design, research, and development workflows. From icon sets and mockups to profile visuals, tags, and scalable grids, each asset was crafted to maintain brand consistency while supporting faster, cross-cultural collaboration across prototypes, reports, and stakeholder decks.

Functionality, Reliability & Usability first

Functionality, Reliability & Usability first

For AI-powered purchase and mobile consoles, our Design Thinking and user research emphasized Design for Emotion to create intuitive, engaging, and trustworthy user interactions, clearly communicating value to stakeholders. The Hierarchy of User Needs informed internal tools' functionality, while user-facing design focused on emotional resonance beyond basic usability.

For AI-powered purchase and mobile consoles, our Design Thinking and user research emphasized Design for Emotion to create intuitive, engaging, and trustworthy user interactions, clearly communicating value to stakeholders. The Hierarchy of User Needs informed internal tools' functionality, while user-facing design focused on emotional resonance beyond basic usability.

同情

Empathize

我们正在解决什么问题?

What problem are we solving?

定义

Define

我们为什么要关心?

Why should we care?

Ideate

我们怎样才能解决这个问题

How can we solve this?

原型

Prototype

我们应该如何创建它?

How should we create this?

测试

Test

它有用吗?

Does it work?

同情

Empathize

我们正在解决什么问题?

What problem are we solving?

定义

Define

我们为什么要关心?

Why should we care?

Ideate

我们怎样才能解决这个问题

How can we solve this?

原型

Prototype

我们应该如何创建它?

How should we create this?

测试

Test

它有用吗?

Does it work?

Each phase of the process played a critical role in shaping AI-powered solutions with empathy and clarity. Grounded in real user behaviors—what people say, think, do, and feel—the framework ensured that every product decision reflected authentic needs and emotional drivers. From early research to validation, this approach helped turn abstract functionality into experiences users could understand, trust, and act on with confidence.

Each phase of the process played a critical role in shaping AI-powered solutions with empathy and clarity. Grounded in real user behaviors—what people say, think, do, and feel—the framework ensured that every product decision reflected authentic needs and emotional drivers. From early research to validation, this approach helped turn abstract functionality into experiences users could understand, trust, and act on with confidence.

Say

Does

思考

Think

感觉

Feel

Say

Does

思考

Think

感觉

Feel

At the core of the process, continuous loops of Build, Measure, and Learn ensured that every iteration strengthened user trust and boosted productivity. By treating product design as a dynamic centerpoint—surrounded by feedback, insight, and refinement—solutions became more intuitive, consistent, and emotionally aligned. This mindset supported the creation of seamless experiences across the brand ecosystem, where interactions felt familiar, purposeful, and connected from end to end.

At the core of the process, continuous loops of Build, Measure, and Learn ensured that every iteration strengthened user trust and boosted productivity. By treating product design as a dynamic centerpoint—surrounded by feedback, insight, and refinement—solutions became more intuitive, consistent, and emotionally aligned. This mindset supported the creation of seamless experiences across the brand ecosystem, where interactions felt familiar, purposeful, and connected from end to end.

产品设计

Product

Design

措施

Measure

建造

Build

学习

Learn

产品设计

Product

Design

措施

Measure

建造

Build

学习

Learn

Trust, productivity & seamless experience

Trust, productivity & seamless experience

UX Design Team

Design System

Product Development

Shaping Stories
& AI as a Storyteller

Shaping Stories
& AI as a Storyteller

Extended design capabilities and accelerate content development

Extended design capabilities and accelerate content development

AI played a supporting role across the creative pipeline by generating scripts, visual prompts, character development, and image references that shaped both storytelling and stakeholders buy-in. From prototyping multilingual animations to developing emotionally aware micro-interactions, the tools helped to merge user data inputs to a scalable production flow.

AI played a supporting role across the creative pipeline by generating scripts, visual prompts, character development, and image references that shaped both storytelling and stakeholders buy-in. From prototyping multilingual animations to developing emotionally aware micro-interactions, the tools helped to merge user data inputs to a scalable production flow.

Design by for Humans

As a

Developer

Manager

Director

Developer

I want

(

)

so that

(

)

Design by for Humans

As a

Developer

Manager

Director

Developer

I want

(

)

so that

(

)

Helping viewers to understand ideas

Helping viewers to understand ideas

AI-powered storytelling, from script to visuals, accelerated content development and stakeholder buy-in. Combined with human-centered, adaptive design, this helped viewers grasp complex ideas through engaging, scalable experiences like multilingual animations and mixed realities.

AI-powered storytelling, from script to visuals, accelerated content development and stakeholder buy-in. Combined with human-centered, adaptive design, this helped viewers grasp complex ideas through engaging, scalable experiences like multilingual animations and mixed realities.

Rather than following a fixed process, AI value comes through a high exploration data process, multi-skilled tools, iteration brainstorming, generative agents & cultural adaptability.

Rather than following a fixed process, AI value comes through a high exploration data process, multi-skilled tools, iteration brainstorming, generative agents & cultural adaptability.

Mixed realities

Using multiple tools (AI + design + animation) enables not just flexibility — but emotional storytelling. It's not about the tools; it’s about how they help design for emotion at each stage.

Mixed realities

Using multiple tools (AI + design + animation) enables not just flexibility — but emotional storytelling. It's not about the tools; it’s about how they help design for emotion at each stage.

Data

Research

Product

Scope

Flow

Security

Personalization at Scale

By combining research, context, and user feedback, automation becomes a creative ally — building systems that respond with relevance and emotional clarity for each project.

Data

Research

Product

Scope

Flow

Security

Personalization at Scale

By combining research, context, and user feedback, automation becomes a creative ally — building systems that respond with relevance and emotional clarity.

逻辑性、可审计性和协作性的用户问题与人工智能解决方案匹配器

Logical, Auditable and collaborative User Problems & AI solutions matchmaker

  • 中文

    EN

  • 网页

    Webpage

  • PPT模板

    PPT Template

  • 研讨会模板

    Workshop Template

  • PDF 说明

    PDF Instructions

定义用户问题

Define User Problems

确定人工智能是否增加价值

Determine if AI add value

设计AI场景

Design AI Scenario

识别人工智能能力

Identify AI Capabilities

努力评估和优先排序

Effort evaluation & prioritization

AI产品配方

AI Product Formula

逻辑性、可审计性和协作性的用户问题与人工智能解决方案匹配器

Logical, Auditable and collaborative User Problems & AI solutions matchmaker

  • 中文

    EN

  • 网页

    Webpage

  • PPT模板

    PPT Template

  • 研讨会模板

    Workshop Template

  • PDF 说明

    PDF Instructions

定义用户问题

Define User Problems

确定人工智能是否增加价值

Determine if AI add value

设计AI场景

Design AI Scenario

识别人工智能能力

Identify AI Capabilities

努力评估和优先排序

Effort evaluation & prioritization

AI产品配方

AI Product Formula

Helping PMs to identify AI value

Helping PMs to identify AI value

Developing a Human-AI Interaction (HAI) guideline and a unified bilingual toolkit – including webpage and PPT templates, workshop materials, and PDF instructions – has been fundamental in identifying AI products based on real user needs. The HAI guideline focuses on creating intuitive, understandable, and trustworthy AI experiences, a central principle of this work.


This multilingual toolkit empowers global teams, particularly product management and leadership, to clearly identify and address AI's value, ensuring its development leads to more effective and human-centered AI applications.

Developing a Human-AI Interaction (HAI) guideline and a unified bilingual toolkit – including webpage and PPT templates, workshop materials, and PDF instructions – has been fundamental in identifying AI products based on real user needs. The HAI guideline focuses on creating intuitive, understandable, and trustworthy AI experiences, a central principle of this work.


This multilingual toolkit empowers global teams, particularly product management and leadership, to clearly identify and address AI's value, ensuring its development leads to more effective and human-centered AI applications.

Motion Design

Visual Design

UX

Micro-Animations

Storytelling

Product Development

Micro-animations to high complex narratives

Micro-animations to high complex narratives

Bridging the gap between UX goals and stakeholder buy-in

A vision video brings abstract ideas to life—helping teams and stakeholders align around a shared goal. It’s a storytelling tool that simplifies complex concepts, highlights user impact, and builds excitement for what’s next. More than a pitch, it’s a narrative that inspires action and clarity.

Shaping behaviors, decisions & outcomes

Shaping behaviors, decisions & outcomes

Motion design helps build clear interaction patterns by reinforcing feedback, guiding attention, and informing users of changes. Micro animations—like slide boxes, notifications, or reactive transitions—establish visual consistency across the product, making the experience feel more intuitive, responsive, and trustworthy.

设置每种风格的氛围和时间

设置每种风格的氛围和时间

Set the mood and timing of each style

Mood and timing standards

通知

通知

Inform

Inform

通知用户变更

通知用户变更

Inform users of changes

Inform users of changes

引导注意

引导注意

Guide Attention

Guide Attention

视觉层次转换

视觉层次转换

Visual hierarchy transitions

Visual hierarchy transitions

提供反馈

提供反馈

Provide Feedback

Provide Feedback

反应行动

反应行动

Reactive actions

Reactive actions

The examples below are static frames from motion concepts designed to support interaction patterns. While not animated here, each was crafted to be part of a fluid, responsive experience—highlighting changes, reinforcing hierarchy, and delivering real-time feedback.

商业

Business

目标

Goals

用户

User

需求

Needs

Key Results & Deliverables

Cross-Cultural Alignment

Bridging Chinese and Canadian UX teams through an unified CH & EN visuals design language.

Unified Visual Ecosystem

Modular system and guidelines ensuring consistency across teams, ideas and projects.

AI Value Made Visible

Automated pipelines for mixed‑reality visual experiments and personalized assets.

Design For Emotion

Templates, Video narrative and micro‑animations that guide user attention and provide right feedback.

Key Results & Deliverables

Cross-Cultural Alignment

Bridging Chinese and Canadian UX teams through an unified CH & EN visuals design language.

Unified Visual Ecosystem

Modular system and guidelines ensuring consistency across teams, ideas and projects.

AI Value Made Visible

Automated pipelines for mixed‑reality visual experiments and personalized assets.

Design For Emotion

Templates, Video narrative and micro‑animations that guide user attention and provide right feedback.

UX Visual Design beliefs

UX Visual Design beliefs

Human-Centered Design interaction

Human-Centered Design interaction

Traditional UX

Traditional UX

Design was what you could see and click.

Design was what you could see and click.

The spotlight was on screens

pixels, layouts, and pretty interfaces.

The spotlight was on screens, pixels, layouts, and pretty interfaces.

The interface

was the user journey.

The interface was the user journey.

Tools like Figma and Webflow

were the designer’s playground.

Tools like Figma and Webflow were the designer’s playground.

Designers choreographed every click,

every scroll - full control.

Designers choreographed every click, every scroll - full control.

Great design meant polished visuals,

intuitive flows, and pattern consistency.

Great design meant polished visuals, intuitive flows, and pattern consistency.

UX After AI

UX After AI

Design is what the product does and how it thinks.

Design is what the product does and how it thinks.

The screen is just one piece

Now it's about behaviors, decisions, and outcomes.

The screen is just one piece
Now it's about behaviors, decisions, and outcomes.

Designers shape how AI understands,

responds, and supports human needs.

Designers shape how AI understands, responds, and supports human needs.

Data scientists and engineers

are design allies more than ever.

Data scientists and engineers are design allies more than ever.

Success means crafting experiences that

feel helpful, reliable, and real.

Success means crafting experiences that feel helpful, reliable, and real.

It's not just about looking good,

it’s about being right and relevant.

It's not just about looking good, it’s about being right and relevant.

Keeping things fun :)

Keeping things fun :)

More on LinkedIn

Will do

Visual Design

&

Human-Centered
Design interaction
UX/UI Animation

&

Interactive Design
Motion Design

&

3d Visualization
Pattern Recognition

&

Visual Storytelling
Micro-Narratives

&

Symbolic Visuals
Video Editing

&

Rhythm
Scalable Assets

&

Visual Supply
Creative Direction

&

Team Leadership
Trend Fluency

&

AI-Driven Tools

Connecting brands, products & ideas

Connecting brands, products & ideas

Soon

Visual Design & Animations for Global Brands

Soon

Visual Design & Animations for Global Brands

Soon

Bridging Product and Marketing

Soon

Bridging Product and Marketing

Soon

CreativeDesign for a Wiser Synergy

Soon

CreativeDesign for a Wiser Synergy