Overview

Visual

Ideation

Design

Result

2024

Sketch

Blender

Tools

Lead UI/UX Designer

Role

Year

Product Website

Cloud Service

Visual Design

Overview

My Role

Led the end‑to‑end website redesign, including new page concept creation, visual identity refresh, and the design of 3D visual illustrations.

Restructured the website’s information architecture and collaborated closely with product, marketing, and development teams to enhance brand presence and strengthen user engagement.

Full website redesign with new pages concepts creation, with optimized adjustments to the color scheme of the theme, illustrations banners, icons and related images to enhance brand awareness. Refactor page information architecture, enhance user stickiness, and improve user retention.

Background

Introduction

Team

Product

UI / UX Designer

3

5

1

Developer

Highlights

Site Map

Home

• Features

• Comparison

• Industries

• Partners

• Help

Price

• Price for cloud desk

• Price for cloud drive

• Advantages and Characteristics

Download

• Download for different systems

Solutions

Industry solutions

• Existing problems

• Solution details

• Advantages

• Scenarios

• Cases

• Popular

• Industry sloutions

• Poplar cases

Cases

Individual case

• Existing problems

• Solution details

• Advantages

• Popular

• Industry sloutions

• Poplar cases

News

Articles

• Classification

• Time line

About

• Video Intro

• Product Timeline

• Adress

Support

• FAQ

• Tutorial, product manuel quick access

XDEMO Website

Based on the project’s design objective I reframed the information structure to enhance the website usability by optimizing content organization and improving the correlation between various blocks.

Grid

40px

20px

1280px

1280px

375px

Range: 641px-2560px

Range: 376px-640px

Range: xx~375px

Column 24 Gutter 20px Margin 40px

Laptop, PC, Tablet

Tablet, Mobile

Mobile

Column 12 Gutter 20px Margin 20px

Column 6 Gutter 20px Margin 20px

20px

20px

20px

20px

I defined the grid size specification for page adaptation on screens of different widths based on the form of the website.

Wireframe

Designed wireframes based on website information architecture and grid layout, and annotated the jump logic between pages.

Product Features Illustration & Icons

Features illustrations

Icons

The feature illustrations aim to explain the concept of the advantages of Zanqi Cloud Workstation: break space limitations with cloud-based intelligent office, supports a large number of models and softwares, provide high effective collaborative working environment.

I used 3D illustragitons to showcase the product & brand features intuitively througth will refined details and texture.

I used icons with differnet visual styles to enhance the vividness of the pages as well as enhance aesthetics and readability:


Use galssmorphism icons through overlay of geometric shapes and blackgorund blur to present a sense of technology and futurism;


Adapt 3D icons intuitively to present painpoints, enhance the fun of the visuals and improve user perception.

Icon set

Design Deliverables

Main Shifts

By reducing users' cognitive and decision‑making load and proactively guiding them, we systematically improved overall efficiency from visit to conversion.

Homepage

New design

Old design

1

2

3

4

5

Banner Optimization

Improved the Feature Overview Experience

Enhanced Comparative Presentation

Providing a Pre‑Positioned Help Center Entry

Precise Intent Matching

• Adjusted the banner height to focus on the message.

• Added clear CTAs (Trial, Download, Consult) to guide different user segments (exploratory vs. decision‑ready) to their respective paths, streamlining conversion.

• Adding video content builds immediate visual understanding and sparks interest, driving conversions.

• Switched to fixed horizontal tabs for stable, seamless switching—delivering an immersive, uninterrupted reading flow.

• Using a split-screen layout with strong visual contrast creates a powerful cognitive comparison, highlighting product advantages.

• Reduces user learning costs and company support costs, while enhancing overall experience completeness and product professionalism.

• Replacing “Register” with “Try Now” and “Download Now” created distinct paths for evaluators and ready users, reducing barriers and capturing more potential customers.

• The landing page fails to capture the attention of core users at first glance.

• Users who show interest are unsure what to do next, resulting in a high bounce rate.

• The comparison with traditional models lacks clear, compelling contrast, making it difficult for decision-makers to quickly assess the replacement value.

Expanding/collapsing the feature overview caused the content area to jump, disrupting reading continuity and page stability.

• The label “Register” implies a high‑commitment decision endpoint, which deters users still in the evaluation phase, leading to drop‑off.

The Bottom Banner CTA sets too High a Commitment Threshold:

5

• Users have nowhere to look when encountering issues, increasing support pressure.

• High trial barriers for new users lead to early drop‑off.

Lack of Self‑Service Pptions Hinders Onboarding

4

Unclear Value Proposition, Ambiguous Path to Action

Weak Perception of Advantages

The Interaction Lacked Fluidity

1

2

3

Price

Transformed the page from a passive price list into a conversion‑focused interface that actively guides users and reduces decision‑making pressure.

Old design

New design

Without clear guidance, users had to manually summarize the advantages from the plans below.

Delayed Value Perception

1

• The table format is dense and overwhelming, lacking emphasis on key details, which burdens users' decision-making.

• The original “Join Us” CTA was vague and misaligned with users’ goals on the pricing page—whether seeking purchase consultation or ready to sign up—leading to confusion and drop‑off.

Difficult Price Comparison and Weak Appeal

Intent Misalignment

2

2

1

Optimized Banner Module to Enhance Explanatory Efficiency

• Succinct copy in the prime position outlines core pricing advantages, proactively building positive perception and lowering the user’s psychological barrier.

2

Bottom CTA Adjustment

• A dual‑button setup—“Contact Us” and “Download Now”—was introduced to clearly distinguish and serve two user intents: those needing guided consultation and those prepared for immediate self‑service activation, thereby improving conversion efficiency.

Download

Old design

• Varying banner heights across pages created visual jumps and a sense of fragmentation during navigation, undermining the site's unity and professionalism.

• The download entry and version details were blended into the banner, making it difficult for users to quickly identify and select the correct system version, resulting in an unclear action path.

Inconsistent Brand Experience

Poor Download Experience

1

2

New design

1

2

Standardized Banner Height

Card‑Based Download Module & Interaction Optimization

• By unifying banner heights site‑wide, we established and reinforced a consistent visual rhythm and brand framework, enhancing the site's overall professionalism and user browsing continuity.

• Independent download cards now clearly display each system version. Paired with a “hover‑to‑reveal‑download” interaction, information recognition and action are merged into a single step, creating an extremely streamlined direct download path.

Solutions Center

Solutions Navigation

I designed a quick navigate hub under the industry solution section with all the industries and correlated sub-solutions and popular solutions, which allows user to quickly access industry solutions that they are interested in.

The Solutions series pages restructured the information architecture around industry‑specific workflows—film production, architectural design, industrial simulation, and other core sectors. Each sub‑solution follows a “Golden Triangle” narrative of Pain‑Point Scenarios Our Solutions Key Benefits, ensuring professional visitors quickly identify their own context and perceive the product’s deep alignment with their needs.

Solutions Pages

Main Page & Industry Solutions

Solution Details

Trust Building

Case & News

The case studies follow a story‑driven “Challenge Process Outcome” narrative and visually communicate the solutions. The news section adopts a unified card layout to categorize “Product Updates,” “Industry Insights,” and “Market Activities”—together shaping a dynamic and respected brand image.

New Center

Case

Support and Endorsement

About Us

Help Center

The "About Us" section focuses on conveying the team's mission and technical capabilities, elevating the brand from a mere tool to a trusted partner.

Moving beyond basic FAQs, the Help Center features task‑scenario‑based navigation and incorporates video tutorials.

Visual Standards & Components

Typography

Neutral & Auxiliary colors

Primary & Secondary colors

#003E92

#2E2E2E

#5C5C5C

#8A8A8A

#B8B8B8

#D8D8D8

#EC0606

UI elements & components

#006FEE

#000000

Source Hans Sans CN

Chinese

English

Numbers & Symbols

Arial

Din

Cloud

123

Header2

Header1

Header3

Header4

Header5

Header6

Body

Caption

Font size: 32px

Font size: 42px

Font size: 28px

Font size: 18px

Font size: 18px

Font size: 16px

Font size: 14px

Font size: 12px

Line height: 46px

Line height: 61px

Line height: 40px

Line height: 27px

Line height: 27px

Line height: 24px

Line height: 20px

Line height: 14px

Font weight: Medium

Font weight: Medium

Font weight: Medium

Font weight: Medium

Font weight: Regular

Font weight: Regular

Font weight: Regular

Font weight: Regular

#4C8EDA

Buttons

主要按钮

主要按钮

主要按钮

主要按钮

Normal/Hover/Pressed/Disabled

普通按钮

普通按钮

普通按钮

普通按钮

了解更多

了解更多

了解更多

了解更多

查看更多

查看更多

查看更多

查看更多

特殊按钮

特殊按钮

特殊按钮

特殊按钮

幽灵按钮

幽灵按钮

幽灵按钮

幽灵按钮

Navigation

Head nav/Pivot

首页

产品价格

下载

实践案例

新闻动态

关于我们

帮助中心

解决方案

登录

免费注册

Y

首页

产品价格

下载

实践案例

新闻动态

关于我们

帮助中心

解决方案

Y

首页

产品价格

下载

实践案例

新闻动态

关于我们

帮助中心

解决方案

套餐管理

历史记录

账号管理

账户管理

云桌面管理

充值消费

工作站钱包

用户名

Yinyin

2994.99

退出登录

已认证

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

normal

hover

pressed

finished

二级标题

三级标题

四级标题

>

>

一级标题

>

Cards

Feature cards/Price cards/Special scenes

天神通用型

立即购买

9.90 /小时

强劲性能,稳定算力,高性价比,适合中高负载场景

规格

显卡

时长

系统盘

上行带宽

RTX A4000 16G显存

16核64G

150G

20mbps

按需

本地设备渲染,解算时存储容量有限,弹性扩容受限制,工作效率低。

本地算力不足

影视特效

影视特效

提供高性能设备,助力数字化转型

了解详情

用户指南 (管理员)

新手入门

权限管理

管理员操作指导

在全球疫情影响下,大多影视项目陷入了停滞,传统工作方式已无法满足需求。

IT成本增加

Result

The official website redesign has been fully delivered, successfully launched, and its design value has been validated through tracking of key metrics.

Design Verification and Anticipated Impact

User Experience Efficiency

Leveraging dynamic content and a renewed visual system—featuring a fresh visual language, 3D elements, and structured video content—user average dwell time rose by 42%, and deep content visits grew by over 35%, significantly boosting brand appeal and user engagement.

Takeaways

  • Driving design with end‑to‑end systemic thinking.

  • At its core, complex information architecture serves decision‑making.

  • Visual language acts as an amplifier for brand strategy.

  • Cross‑functional collaboration is the foundation of design execution.

Create a free website with Framer, the website builder loved by startups, designers and agencies.