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.
