PORTFOLIO SIQI ZENG 2014 - 2016
published in May 2016
SIQI ZENG
Interaction Designer/ UI Designer
work experience siqicat@gmail.com +852 66164084
VIADNA DESIGN CONSULTANCY UI Designer 2015.05 - 2016.07 Cooperating with product managers and engineers, designing user interface,
education POLYU DESIGN SCHOOL
作 品集目录
motion effects and created product demo videos. Clients & projects including:
Master Degree
commercial projects
Interaction Design (will graduate in 2017) SUN YAT-SEN UNIVERSITY
TCL Smart TV OS+ 3.0 A redesign of TCL TV Operation System. Released on CES 2016, Los Vegas.
Bachelor Degree
01
TCL T V O S+ 3. 0 智 能 电 视 操 作 系 统
02
中国移动宽带助手应用
03
中信银行积分商城改版（提案）
UI / GUI
04
N U B IA Z 1 1 手 机 主 题 「 臻 致 」
ICON
UI／GUI / Motion
Creative Media
internship
Network Assistant (Desktop App)
AMAZON CHINA
Desktop tool to help users with network monitoring and troubleshooting without
BD Intern
official support.
2014.11 - 2015.03 •
Hunting for potential sellers on Amazon Global by telephone interview;
•
GUI / Motion
Launching products on Amazon.cn;
SOUTHERN TV
Citic Bank Rewards Online Mall A design proposal to turn the dated Rewards Online Mall into an immersive shopping experience.
personal projects
Production Assistant 2013.11 - 2014.06 •
Pre-interviewing guests and designing
NUBIA Z11 Phone Theme Metallic skeuomorphic icon design for Nubia Z11 default phone theme.
interactive games for a talk show; •
Developed public rvelations strategies of the talk show.
professional skills Design Thinking
//////////
Visual Skills (PS/AI/ID)
//////////
Prototyping
//////////
User Research
//////////
Motion Design (AE)
//////////
Film Editting (PR)
//////////
Data Analysis
//////////
Sketching
//////////
05
安 心 伴 老 人 手 环 + A P P 产 品 概 念 设 计
06
埃及风格手机主题
UI／GUI ICON
01
TCL
01
COMMERCIAL PROJECT Project Schedule: 2015.05 - 2015.11
TCL
TCL TV+ OS 3.0 智能电视操作系统
这个项目的甲方TCL，希望我们能为他们将在2016年发布的 电视新品X1，打造一套全新的UI界面，优化电视体验。 我们接到这个项目时，交互组的用户研究已经将近尾声了。 根据研究结果，我们得到了用户对TCL视觉界面的几点意 见：土气，使用复杂，品牌识别度低。 因此，设计目标定位为：使用简单，国际化，有品牌个性。
UI GUI DEV TCL TV+ OS 2.X 这是开始项目时TCL原有的电视界面，参与用研小组的用户大部分都认为这个界面“老土，没有品牌识别度”
VIADNA
TCL
Data From UE/UI Team TCL VI & Current TV Interface
5
TCL的VI系统有两个组成部分： TCL Logo (品牌颜色和形状, etc) 多彩的几何图形纹理. 然而，现有的电视界面看起来跟这两个组成部分一点关联度都没有。因此，我们需要 在设计时考虑加入多一下TCL品牌元素。
GUI DESIGNERS INVOLVED Major Consumer Segments of TCL Television / MY CONTRIBUTIONS /
数据显示TCL主要消费者（46.4%）为“实惠族”——对产品要 求经济实惠，不要求时尚。习惯在电视上追剧和综艺节目，因 此我们的设计将会突出这部分的内容。
TCL Logo
Brainstorming Research GUI of Key pages Animated demo UX Workshop
TCL Promo Stall
Supportive Patterns
...TO BRAINSTORMING 经过头脑风暴后，我们从12个视觉创意中精心挑选出这3个idea：
Tangram Puzzle Smart TV Competitors 调查研究市场上主流的电视界面（12个品牌，包括7个国际品牌以及5个国内品牌）： Apple TV／LG Web OS 2.0／Samsung Tizen／Google Android TV／Panasonic Firefox OS／Amazon Fire TV／Roku TV ，Xiaomi／Hisense／LeTV／CHIQ／Huawei。
突出丰富的内容，动感酷炫 多处运用几何形突出品牌识别的 Tangram puzzle（七巧板）
FROM BENCHMARKING...
Glassy Vision
Insight Through Competitive Analysis 细腻，感性，国际范 全屏高清海报带来视觉冲击的 Glassy Vision
- 生动的动效 - 强调焦点
- 清晰的Tab导航 - 文字vs图标
Dark Background 尽管移动端的界面背景 通常是白色的，但电视 背景一般都是深色，因 为大面积的白色光会非 常刺眼，且会暴露电视 硬件问题。
- 沉浸式的大海报背景
- 多色渐变的扁平化 - 强调排版
TCL Red 低调务实，又不失精致 运用TCL VI中的红色作为强调色 TCL Red
DESIGN PROPOSAL 几周后，我们带着三个设计方案前往TCL参加提 案。会议持续了两天时间，TCL各部门对三个方 案提供了反馈意见。 我主要负责设计Tangram Puzzle的关键页面和动 画效果。完整视频可在以下Vimeo链接观看。 >>TCL Tangram Puzzle Design Concept
Glassy Vision
TCL Red
FEEDBACK & TRADE-OFF
来自开发部门的
F先生:
来自市场部门的
R女士: “如果我是消费者的话，我会被 Tangram Puzzle 流畅的动 效吸引；但是从我们运营者的角度来说，首页上的不规则 图形海报会增加运营压力。至于说第三个concept（TCL Red），我觉得画面有点太暗沉了，消费者可能不会喜欢。
“TCL 的操作系统是基于Java语言开发的, 比较难以实现大 背景模糊效果。内存有压力。像圆形、圆角这些形状，我们 也不推荐使用，比较难以实现。 另外，你们设计的时候要记得在TCL最好和最差的机子上测 试，这样才能保证在任何情况下都不会暴露硬件问题（比如 漏光、色阶等等）。尽量少用大面积的渐变，色阶会比较严 重。”
设计最终版本 在第二轮的修改中，我们博采众长，在TCL Red的基础上重新设计了一版。 我负责动效的设计和测试，完整视频可在以下Vimeo链接观看。 >>TCL TV＋ OS 3.0 Demo
所以我比较倾向于第二个concept，Glassy Vision。作为一 个女性，我是非常喜欢这种细腻的风格，而我相信这将会吸 引很多女性消费者。”
来自设计部门的
W女士: “第二个concept（Glassy Vision）的问题在于它太像苹果 了...从品牌的角度来说，我们要跟他们区别开来才对。 我承认一开始看到 Tangram Puzzle，我的眼球就被抓住 了，动效很酷炫。这个设计方案可能比较好销售，但是它有 个问题，就是太花哨了，最多只能用三五年——在那之后， 消费者就会疲倦。 我们必须把眼光放长远一点，选一个有利于品牌建设的方 案，好比说第三个方案 TCL Red。尽管它现在很简单，但 是我觉得在这是个更有想象空间的方案。”
2016年1月，TCL TV OS＋3.0在 拉斯维加斯举办的CES消费电子展上发布。 若感兴趣， 可在以下Youtube链接观看： >>TCL Press Event at CES 2016
02
China M o b i le
02
COMMERCIAL PROJECT Completion Date: 2016.01
China M obile
中国移动宽带助手
02
我们的期望：
中国移动宽带助手是一款网络测速应用，让用户得以自行排查网 络故障，减轻客服压力。参与设计移动端和pc端产品，移动端 APP现已上线。 参与设计PC端与移动端应用，包括关键页面设计、动效设计和 插画设计。
容易上手 简化的使用流程和平白易懂的文案， 即使用户对IT一窍不通，也能大致明白自己 能通过宽带助手解决什么问题。
UI GUI DEV
VIADNA
为什么人们不喜欢自行排查网络故障？
“修这些东西非常枯 燥乏味”
China Mobile “我不擅长弄这些电 子设备。”
使用高效
2
将复杂的故障排查流程视觉化， 提高用户通过宽带助手解决问题的效率。
GUI DESIGNERS INVOLVED
/ MY CONTRIBUTIONS / User Research Illustrations GUI of Key pages Animated demo
“我不知道这些网络相关 的术语是什么意思。”
“有时候知道这些词是 什么意思了，但是跟实 物对不上号，不知道应 该动哪里。”
适当的趣味 摒弃枯燥无味的界面， 用隐喻和动画增添趣味， 减少用户遇到使用困难时的负面心理。
DESIGN CONCEPT 最终采用的方案运用了大海和帆船的动画作为流量的隐喻，并设计了 扁平风格的插画来增添趣味感。 动画demo可通过以下Vimeo链接观看。 >>China Mobile Network Assistant Demo
03
C i t ic b ank
Citic Ba nk
CITIC BANK 中信银行积分商城改版 Key Info Client
CITIC BANK
Output
UI, GUI
Launch Date
2016. 01
为长期保留着旧版架构，用户活跃度较低的中信 积分商城提出改版设计方案，以突出商品内容， 鼓励用户更多的浏览和探索。
旧版网站页面
04
NU B IA
NUBIA Z11 手机主题 Key Info Client
NUBIA
Output
ICON，GUI
Launch Date
2016. 04
为努比亚2016年发布的新机 Z11 设计默认备选 手机主题「臻致」，配合其机身颜色（金色）和 工业设计外观，增加配色主题以营造出统一的品 味档次。
NUBI A
05
Per so nal Pro jec t s
PATRON+ 安心伴老人手环 Key Info Output
Research, UI, GUI
Launch Date
2015. 01
安心伴是一款为避免老人发生意外无人知晓而设计的产品， 产品包括老人手环和配套手机APP。这是一个小组合作的课 程项目，我在项目中的角色是产品经理与视觉设计。 设计产品的想法起源于一个真实故事：一次课堂上，我的老 师刘先生提起他六十多岁的母亲，独自一人生活在北京。 老母亲患有心脏病，而老师无法照顾母亲的起居，便给她安 装了那种一按就能呼救的安全铃。然而，有一天母亲心脏病 发，来不及按铃就昏厥倒地。 这让我意识到，这种安全铃的设计是有缺陷的：它只能在目 标用户有人陪伴，或者尚未失去行动能力的情况下，才能发 挥作用。而对于那些一发病就失去意识的独居用户，这个铃 无法让他们得到帮助。
Patron+
USER RESEARCH
DESIGN CONCEPT
Insight Through Interviews 我们对身边的中年人和他们的父母进行了访谈。我们发现，老年人在退休以 后，虽然生活尚能自理，但是免疫力开始减弱。这意味着，每个人的父母， 在自己生活压力最大的中年时期，健康状况变化最大，最需要陪伴和保护。
退休或即将退休 退休或即将退休
……
55岁以上 5 5 岁以上
智能手环 智能手环 …… 健 康 问题 健康问题 与子女分居 与子女分居
…..
血 压
智能手环
心跳
心跳
重力
重力
+
A PP APP
Persona
！！ 病人 发生意外 病人发生意外 姓名：张伟
姓名：张明海
年龄：35
年龄：65
职业：市场总监
职业：退休
现状：密切关注父母的健康状况，但
现状：独居，丧偶。患有轻微的心脑
由于事业繁忙和新生家庭建设，无暇
血管疾病。能够使用智能手机进行简
照顾老人。如果能够及时地被告知老
单操作，但不抵触学习使用新产品。
人健康状况的变化，可以一定程度地
性格好强，身体一旦有点小嗑小碰，
减轻负担。
不愿意告诉孩子。
未未取消报警 取消 警报 或实施呼救 或 实施呼救
自动通知 家属 自动通知家属 或 救护人员
INFORMATION ARCHITECTURE
WIRE FRAME 主页：健康指数 & 提醒 左右划动，查看其他手环用户（一个 帐户可绑定多个手环用户）
点击健康指数，查看各项健康数据 折线图和相应的健康小贴士
点击主页的“地图”，查看手环用 户的位置。 当数据检测到异常时，警示弹窗 弹出并响铃。
0
GUI DESIGN
06
Per so nal Pro jec t s
尼罗河日落 古埃及元素手机主题 Key Info Output
ICON
Launch Date
2014. 01
如果古埃及人有机会使用手机的话，怎样 的隐喻才能被他们所理解呢？ 这是一个实验性的个人项目，运用古埃及 文化中的视觉隐喻来设计手机图标。
Su ns et by the N ile
Sketc hi ng
Sketching
SIQI ZENG 2014 - 2016
Thank you.