#Interaction Hello, I am a
Portfolio Designed by CHEN FAN
Name
EMPLOYMENTS
CHEN FAN
Birth
1994/05/14
328461649@qq.com
Phone
(86)18684673533
2016.07-2016.12 Assistant Product Manager in Tencent Technology Company • Conducted policy research and market analysis for innovative projects. • Drew the block diagram and worked with the visual designers to complete the visual design. Followed up the entire development process and inspected the final product. • Prepared documents and PPT for projects, drafted requirement documents, assessed product’s requirements with technicians. • Cooperated with the marketing team to promote the product, analyzed data feedback after the launch of the product.
EDUCATION & EXPERIENCE
2012-2016
Bachelor Degree in Hunan University 2013-2016 Industrial Design (Major) 2012-2013 Mechanical Engineering and Automation
Joyoung Design Workshops ,“Future Home Design” Project Fit Kitchen System Design Team
2015.06
• Completed market/user research . • Designed Fit Kitchen System which is a complex system consists of stakeholders.
LEADERSHIP EXPERIENCE
2013.09-2014.06
Head of Design Department
Hunan University Student Union Online Community
Worked with other designers in the department to update banners, pages on a regular basis.
2015.07-2015.09
Deputy Webmaster
Hunan University Student Union Online Community
• Managed online community day-to-day operations • Cooperated with different departments in the student union to promote online community.
2015.11-2016.05 Interaction Designer in XiongHuaYin Science and Technology Co. Ltd. • Conducted product planning for “Safety Driver”, analyzed competitive products, prepared industry analysis and user survey. • Completed the interactive design and visual design. • Worked closely with the development team to ensure the product delivery time and inspected the final product to assure the quality .
2015.07-2015.09 Intern, Product Department in Tencent Technology Company • Helped colleagues to operate the App store, planned daily application promotion activities, communicated and cooperated with App developers • Designed banners for the App store. • Improved banner designs according to the data from users. • Worked on the design of new App store with colleagues
AWARDS
2014.05
First Prize
2015.06
Second Prize Joyoung Design Workshops ,“Future Home Design”
2015.11
Champion
COMPUTER SKILLS
The 20th National Business Case Analysis Competition Project competition
PSA Group, Tech-node (China) Hacker Marathon
Adobe Illustrator Adobe PhotoShop Adobe Animate
Sketch Hype 3 Principle
PAGE 16
Interaction & Product Design
Interaction Design
PAGE 24
PAGE 30
SAFLT CHANGSHA METRO VISUALS
Visual & Interaction Design
SAFETY DRIVER FIT KITCHEN SYSTEM
System & Product & Interaction Design
CONTENT
PAGE 4
mainly responsible for : Product Planning, UI Design
Cooperation with COMAC COMAC:Commercial Aircraft Corporation of China Ltd
SAFLY CHANGE A TERRIBLE FLIGHT EXPERIENCE FOR UM
Theme Explore
UM Unaccompanied Minor (5-12 year-old travelling alone )
USER • Single parents • Busy working parents • Parents entrusted to grandparents in holiday
MOTIVATION • Improve children security • Enhance parents’ sureness during the flight
In-depth Research In this real case, we encountered a ground staff with 4 UM and their parents. We recorded the whole process from check-in to security check.
1
After check in, the staff will provide a file bag to UM, which is the only credential for UM boarding. The file bag will be used to contain passport, flight ticket, and all other support materials.
2
While parents are confirming information with the ground staff, tickets and documents are taken out over and over again.
3
The ground staff need to check identity information one by one manually, which is low efficiency and could cause mistakes.
4
The ground staff is counting carry-on luggage of UM. Parents are worried about that children lost luggage/take others’ luggage by mistake.
5
Parents are not allowed to enter the security area. They feel worried about their children after they disapper in their sights.
Existing Service Flow www.airport.com
UM
buy tickets & complete UM application process online
Mom
UM
UM leave mom and go through security
Check-in
UM go with stewardess and plane take off
Ground staff
UMNR
• Have the risk of getting separated with the ground staff; • Easy to lost luggage/take others’ luggage by mistake.
Mom
The change of flight information keeps parents and children waiting aimlessly in front of the check-in counter.
Stewardess
UM
Plane landing and UM go with ground staff
Stewardess
UM go with pick up people
Ground staff
Uncle
Leave behind personal belonging
Pain Points
Ground staff
UM
• Feel uncomfortable in unfamiliar environment; • Equipments on the plane are not suitable for kids.
• Parents are worried when they lost touch with children; • Could not get feedback of children’s status update. • Paper documents are easy to get lost. • Big amount of messy information • Complex and inefficient information checking process
Stewards are too busy to take care of UM.
Delayed feedback of UM transfer information
Solution
A Service System Two Auxiliary Products Three Beneficiaries
Optimized Service System
Optimized Service Flow Service Website
Hardware Product
Hall
Hardware Product
Seurity Device
Wait Hall
KID ACTIONS
Buy Tickets and Apply
Check-in
Wait
Transfer to Staff A
Security
Wait
ONSTAGE CONTACT
Process and Fb
Scan and Inform
Scan and Lead
Examine
Confirm Info.
Exam and Ship the Luggage
PHYSICAL EVIDENCE
SUPPORT PROCESSES
Reserve Seat
Confirm Identity
Perchace System
Info. System
Plane
Transfer Enjoy the to stewards journey
Scan and Welcome
Upload Info.
Serve
Hardware Product
Upload Info.
Food and Entertain
Scan
Upload Info.
Transport System
Serve System
Wait Room
Wait Room
Wait
Transfer to Pick-up
Scan and Inform
Transfer the Luggage
Prepare the Plane
Security System
Luggage Room
Transfer Search for to Staff B Luggage
Steer the Plane Upload Info.
BACKSTAGE CONTACT
Hardware Product
Confirm Info.
Upload Info. Upload Info.
Food System
Steer System
Info. System
Existing Service Flow
Arriving safely
Product Design for UM
Interaction Design for UM
Interaction Design for Parents
Receive check in information reminder in advance including time and check-in counter. s.
Interaction Design for Parents
mainly responsible for : UX /UI Design
SAFETY DRIVER Auto Service Based on Insurance Safety driver is an app based on insurance and provides users with car services. These services with insurance as the core, connect Reparation - Car Maintain - Compensating these parts and optimize the user experience (comparing with offline process).
Flow Chart Compensation Rrcord List
Choose a Record
Check Detail Information
No Yes
Need Trailer
Guidance Page Have Account
No
Car Insurance
Taking Accient Photoes
Yes
Need Insurance Staff to scene
Multi Vehicle Accident
Log In
No
Yes
Show staff’s Location
Back to Home Page
Safety Driver Home Page Repairing Repairing / Car Maintain
Reserve a time
Go to stores at once
Yes
Guide user to store
Car Maintain No
Complete Safety Driver Home Page
Setting Back
Complete
No
Single Vehicle Accident Register
Wait for Trailer
Complete Reservation
Connect Insurance Staff
Yes
Call the Staff
Back to Home Page
Wireframe 1. Register/Login
2.Repairing / Car Maintain
Sketch
2
9:41 AM
Sketch
100%
3
注册账户
9:41 AM
100%
Sketch
9:41 AM
4
注册账户
100%
注册账户
2
添加车辆照片
Sketch
9:41 AM
100%
3
4
4
附近4s店 车牌号码
车主姓名
请输入密码
爱车颜色
手机号码
请再次输入密码
车型
输入验证码
综合排序
北京新双龙雅致汽车销售服务有限公司 距离5km 原
获取验证码 60s后再次获取
Sketch
9:41 AM
购车店铺
100%
优
原店优惠
北京庞大龙腾汽车销售服务有限公司
再次获取验证码
距离7km
北京航天致诚汽车销售服务有限公司 下一步
距离10km
完成注册
上一步
下一步
上一步
Safety Driver
1
北京金泰凯迪汽车销售服务有限公司 Distance 15km
1
快速赔付，安心出行
Sketch Sketch
9:41 AM
北京天之龙汽车销售服务有限公司
100% 100%
Distance 23km
登录
登录
北京博瑞祥致汽车销售服务有限公司
一键报险
Distance 30km
Safety Driver 注册使用
5
Sketch
9:41 AM
6
100%
Sketch
9:41 AM
快速赔付，安心出行
100%
使用设置
登录 登录
维修/保养
总是开启我的定位
发生重大车祸时发送我的位置信息
发送车祸信息时也发送给4s店
赔付记录
车牌号码
汽车出现故障时提醒我 密码
注册使用
登录
设置
登录
1
Start Page
2
Register Car Information
3
Register User Information Sketch
4
Set Password
5
Login Page
完成设置
下次再设置
9:41 AM
100%
注册账户
Sketch
9:41 AM
7
100%
8
Sketch
注册账户
9:41 AM
登录
添加车辆照片
密码
车牌号码
两次密码不一致，请重新填写
1
Home Page
2
4s Stores Lists
3
Reservation Page
4
Time Choosing Page
5
Reserving Completed
6
Store Location Page
7
Guidence Page
100%
车牌号码
账号或密码有误，请重新填写
请输入7位车牌号码，如京A11111
6
Setting Page
再次输入密码
爱车颜色
确定
密码
确定
车型
7
Set Password Error
8
Input Password Error
购车店铺
下一步
上一步
完成注册
登录
7
6
5
Wireframe 3. Car Insurance
4. Compensation Records
2 Sketch
9:41 AM
100%
Sketch Sketch
9:41 AM AM 9:41
事故类型
100% 100%
3
4 Sketch Sketch
9:41 AM 9:41 AM
碰撞部位
100% 100%
3
2
4
5
碰撞部位
1 Safety Driver
Sketch Sketch
Safety Driver
1
1
快速赔付，安心出行
快速赔付，安心出行
9:41 AM
100% 100%
一键报险 单车事故
5
3
5
Safety Driver
3
快速赔付，安心出行 6
1 Sketch Sketch
9:41 AM
100% 100%
双车事故
4
UI KIT
6
维修/保养
4
UI KIT
注册使用
注册使用
2
2
登录
登录
完成选择
完成选择
登录
登录
赔付记录
一键报险
注册使用
Safety Driver 登录
设置
快速赔付，安心出行
维修/保养 1
2
赔付记录
3
注册使用
7
6
5
5. Setting
登录
设置
4 5
1
Sketch Sketch
9:41 AM
100% 100%
6
Sketch
9:41 AM
100%
使用设置
一键报险
总是开启我的定位
Safety Driver 发生重大车祸时发送我的位置信息
快速赔付，安心出行
维修/保养
发送车祸信息时也发送给4s店
汽车出现故障时提醒我
1
Home Page
2
Accident Type
3
Colliding Position
赔付记录 注册使用
登录
设置
6 4
Taking Accident Photoes
1
Home Page
8 5
Taking Accident Photoes
2
Setting Page
9 6
Report Uploading
7 9
Report Uploading Completed
下次再设置
完成设置
Home Page Compensate Record List Compensate Record Details Call Maintenance Staff Guidance Page
Visual Design
Moodboard
Aa Font Book Text Style 1
Dongqing, W3(Light), 24pt
＃424154
Text Style 2
Dongqing, W6(Regular), 20pt
＃424154
Text Style 3
Dongqing, W6(Regular), 20pt
＃fda626
Text Style 4
Dongqing, W3(Light), 16pt
＃424154
Text Style 5
Dongqing, W3(Light), 16pt
＃ffffff
Color Palette LightGrey ＃eaeaea 100% ＃eaeaea
Grey ＃c6c6c6 100% ＃c6c6c6
DarkGrey ＃afafaf 100% ＃afafaf
Red ＃f91944 100% ＃f91944
LightYellow ＃f0d95c 100% ＃f0d95c
DarkYellow ＃eeb91d 100% ＃eeb91d
LightBlue ＃414053 100% ＃414053
DarkBlue ＃302f3d 100% ＃302f3d
01
Login pages
Visual Design
Enter Safety Driver
04 Other pages
02 Main Fuctions
Repairing / Car Maintain
Quick Approval
Car Insurance
03 Car insuirance
When the accident happens, the driver can call insurance company at once.
Compensation Records
Setting
The function is based on phone location and camera.
Usability Test Participants (a total of 5 Users) 3 users have 5 years driving experience; 1 user has 3 years driving experience; 1 user has 2 years driving experience. Task 1 After registering，choose “Repairing / Car Maintain” on home page.Then reserve a 4S Store, and reach there according to guidance. Task 2 Back to the home page，choose “Car Insurance” and complete the whole flow of compensation Insurance. Task 3 Back to the home page，choose “Compensation Records”，then check the lastest record and connect with insurance officer asking how the compensation going. Low
Test Result Function Need to be Improved
HIGH
Severity
Severity
Risk of Improved
Technical Difficulty
Without developer, it may arise bug
HIGH
Click unclickable Prompt Icon (Notice user taking photoes)
It may make the interface not beautiful
LOW
3
Click unclickable Prompt Icon (Discount Information )
The hight of each stores increases，so the number shown on each page will reduce
LOW
4
Click unclickable Prompt Icon (Guidance Information )
The striking level may be lower
LOW
5
In accomplish taking pictures Page,two buttons arranging mode makes users confused.
User will pay more attention to “Accomplish ” than “Go on”in Taking Pictures Page
LOW
6
Icon of reserved time does not turn to be grey and tell users that can not reserve.
Developers may change a little background logic
HIGH
1
Click ‘Taking Photoes’icon many times
2
Optimization
01 Before
02 After
Before
03 After
Before
After
请选择
Make the “choose time” button heavier and lighter.
1. Two buttons are put vertically. 2. Use different colors and reduce time spending on thinking how to operate.
Hotspots increase and convenient for users to click.
mainly responsible for : Visual, Interaction Design
in 20 years In recent years, the construction of metro in China is in full swing, and Changsha is also a tourist city, but the beauty of city is only found in the mouth of word, there is not a collection of places of interest to show to the tourists as well as the theme or impression.So we want to make a data visualization to make the trips colorful.
Analysis & Plan
01 Original Plan
Changsha Metro Plan for 2026. This is the starting point of this project. We want to make it more intuitive, and put some Changsha feeling into it.
02 Analyse Route
I started redesigning the system map by analyzing the dynamics of each line to acquire a basic structure.
03 Basic Layout
After analyzing the basic line structure of the map, I proceeded to map out a basic layout of what I was envisioning.
04 Final Map
After adding the stops and marks, and finalizing the details, we have the new metro map for the future.
METRO GUIDE BOOK #1 In order to embrace the internationalization of Changsha City, we decide to also create an English version metro guide for increasing number of tourists from abroad, including some famous sights in Changsha , for which it also tells you how to get there.
METRO GUIDE BOOK#1
decide to also create an English version metro guide for increasing number of tourists from abroad, including some facmouse sights in Changsha ,for which it also tells you how to get there.
METRO GUIDE BOOK #2 We include some of the most famous landmarks in Changsha with a brief introduction and the line information so the viewer knows how they can get there. On the right side there are more places they can look up and choose to go.
CONTEXTUAL CONTEXTUAL CONTEXTUAL SHOTS SHOTS SHOTS
The VI system will be also applied on The VI system be also applied VI system willwill be also applied someThe station facilities, billboards, - brochures. boards, navigators. boards, navigators.
Interaction Design This is based on Wechat applet. After scanning the QR code, users can could know the detail of subway line and plan their routes. Choose one line to know the detail information.
4
5
Know what station it has and when the railway will reach the station.
Changsha Railway Route Query
1
Open Wechat and choose to scan QR Code
2
Use phone to scan the QR Code to open the applet.
3
Home page of “Changsha Railway” applet. Changsha Railway Route Query Lushan
Lines Lushan
Please enter your destination...
Search
QR CODE
Choose ”lines” to see details of one line’s information.
Input location and destination, then search the routine.
Changsha Railway
Lines
Route Query
Lines
1
North Bus Stop
Shangshuangtang
1
Guangda
1 min
2
Wangchengpo
Guangda
2
Railway Station
2 min
3
Lianpingdadao
Longjiaolu
3
Duhua Road
3 min
4
Guihuadadao
Beierhuan
4
Shawan Park
5 min
5
Shidaidadao
Anshalu
5
Changshadadao
3 min
6
Luyunlu
Huangdaonan
6
Prenmingdong Road
6 min
7
Xilong
Yuntang
7
Wanjiali Square
2 min
8
Xinhailu
Yongan
8
Jintai Square
6 min
9
Dujuanlu
Huaqiaolu
9
Yuanjialing
8 min
10
Jinqiao
Ningxiang
10
Yingbin Crossing
6 min
Changsha Railway Route Query
Lines
Lushan
Yinwan
Start
Transfer
END
6
Know that take which line to get the destination.
mainly responsible for : System Design, UX /UI Design
Fit Kitchen System (FKS) is a system based on cooking utensils, mainly focusing on people’s health while they are losing weight. Gathered in the FKS there are three main health-related factors that affect users’ daily life. They are diet, medicine and body-build, respectively. FKS is the substitute for costly family doctors and gymnasium coach. It could collect surrounding hospital locations and fitness records information of users. By using the information, FKS will generate customized healthy recipes and make food according to intelligent cooking utensils.
FIT KITCHEN SYSTEM
Research & Aim Users Research Analyzing For achieving anticipative weight-loss goals, the diet should adjust with fitness accordingly.
Aim Users Diet
Fitness
Medicine
The plan of diet should be based on clear understanding of self-health status, otherwise it could be a waste of efforts.
Those two areas own similarity. There is an opportunity for collaboration between medicine and body-build. Information Gap For those people who want to build their bodies, the current data of diet, medicine and fitness is isolated from each other that create a loss of information and potential users. Nowadays, service industry will be the new trend. But there is still a gap of connection of those data.
Target users Users with demand of body-build and weight-loss aged 20-35.
Persona Ms.Huang
Mr.Zhang
Age:27
Age:22
Dieting
Dieting
• Eat in large quantities • Prefer snacks and high-calories food • Hardly cooking on her own
• Eat in small quantities more times • Do not know how to cook • Eat high protein diet
Personal characteristics
Personal characteristics
• Body fat excesses standard • Endocrine dyscrasia • Feel difficult to control appetite and insist on exercise
• Muscle man • Love sports and do sports everyady • Pay little attention to food and do not know how to cook
Kitchen utilization
Kitchen utilization
• Hardly use the kitchen • Most of the cooking utensils are unused
• Sometimes use the kitchen, but just know boil food. • Just use one or two kinds of utilization
Health status
Health status
• Frequency of hitting the gym: 1-2times per Month • Lack of understanding of her health status • Have not exploited full potential of her Health Bracelets
• Do sports 2 hours per day • Analyze the body composition every time going to gym
Story Board
Mr.Zhang Lack of idea of how to choose diet according to the degree of fitness.
Monotonous cooking style. Lack of comprehensive understanding of health diet.
Feeling difficult to quantify the food.
Lack of nutrition in daily food and feel unwell.
Lack of idea of how to use the food materials.
Too many unused cooking utensils.
Ms.Huang
Busy at work and no time for cooking.
Lacking of reasonable plan for each food materials that cause wastes.
System Map 1 Record Data
Wearable Devices Company
2
Share Data
3
Employ Staff
Provide Healthy Recipe
Dietitian Provide basic health data
Wearable Devices
4
Recipe APP Company
Provide Healthy Recipe
5
Draw up a cooking plan
Information Feedback Record basic health data
AD Cooperation
Provide Cooking Guidance
6
Cooker
7
User Kitchen
Buy food material Vegetable Field
Fit System Company
Provide user’s data
Cooperation
Provide Fitness Equipment
Company
The system analyzes the feedbacks given by doctors and generates diet plans. Users receive the data and plan. Users make healthy meals under the instruction of FKS. Users purchase food according to diet plans. Users make healthy meals by the cooking utensils of FKS.
Vegetable Market
Give advice
Body Composition Analyzer
On the way to gyms. Send the fitness data to online doctors.
Provide Body Composition Analyzer
Doctor in Hospital
Gym
Share Data
Materials
Service
Information
Provide user’s data
Cooperation
Fund
Product Moodboard
Shape Traditional kitchen stove , simple shape , circle
Color
Texture
Cast iron, Plexiglass, Wood, White metal
Product Introduction
Intelligent induction cooker Data transmission with APP; Automatic time and temperature adjustment
Intelligent pot Combination of steaming and boiling; Data transmission with APP; Light notification.
Fry pot Intelligent cutting board Weight measurement Cutting instruction by displaying the lines.
Intelligent induction cooker Data transmission with APP; Automatic time and temperature adjustment
Product Presentation
Combination method Save space Cutting board analyzes the health data and displays the lines how to cut food materials. The App will display the healthy recipes and nutrition demand.
Interaction Design
Intelligent pot
POT
APP for users
Screen on pot will show the mode.
POT Connected STEW
Mode
App can control pot to cook even if user is at the distance.
OFF
Soup 1 Edit
CUTTING BOARD
POT
CUTTING BOARD
App will recommend Recipe for user according to the food materials.
STEW MODE
Cook Time
16:30 - 17:30
Fit Kitchen
ON
CUTTING BOARD
Cutting board show material,weight and how to cut to user.
Intelligent cutting board
OFF
Connected Food Type
Meat
Food Weight
156g
ON MEAT 160g
Cut Guidance
INDUCTION COOKER
ADD COOKER
Add more information
Recipe Guide
Tomato Salad Utensils: Knife...
INDUCTION COOKER
INDUCTION COOKER
App can control mode and temperature of induction cooker at the distance.
Connected
Intelligent induction cooker
Control using time and the temperature.
ON Mode Temperature
100 C
OFF ON
3 mins 95 C
Thank you