You are on page 1of 40

-2018 Archiving

futureScenarios
Haijing is a Product Focused Interaction/ building with hybrid methods such as 刘海海静 近⽇日由帕森斯设计学院设计与技术
UX design professional currently based in rapid-prototypes, persona and data 专业毕业, 获得 MFA stem 硕⼠士学位,同时
N Shanghai. She has solid design validating. When team playing as a 是纽约诗性计算学院校友,正在创建
cocoonsprout茧萌 内容垂直众筹平台。
Y educational background in visual creative problem solver, she’s specifically
communication, interaction design with good at finding conductive UX insights,
analytical methods. She also acquired making deliverable to-end UX solutions, 她的个⼈人作品将 充满想象的叙事 与 新技
术元素 融⼊入可⽤用的设计⼩小品或项⽬目中,探
skills like rapid-prototyping and advanced she also gained extensive experience in 索我们⽇日常⽣生活中,更更多诗意的表达 / 思
web-coding during her immersive working with agile/scrum environments.  索性设计实践。
experience at MFA track in Design and
在⾏行行业与⼯工业应⽤用领域,她擅⻓长让将设计
Technology at Parsons In 2017, She initiated Project 研究与⽅方法融⼊入场景化的产品功能搭建中,
Cocoonsprout a crowd-fund platform 解决并提升真实存在的⽤用户体验问题。
@ At Parsons, she explored utility driven building specifically for content driven
design alongside imaginative narratives & creative outlets based in East Asia and is
上 technological components interfering, to intend to expand world-widely. 
facilitate speculative / poetic experience
海海 on everyday life. Towards her, design means implementing
decent and sustainable modern cultural
Progressing within industry, despite the impacts among products and users
possible outlook in technical innovations, ( consumers ). 
she implements consistent design and
user experience into product scenario-

Entrepreneurial Experience
Working Experience Education

User Experience Designer linkflowtech.com Parsons the Newschool for Design


Cocoonsprout Design and Technology (STEM)
Interaction Designer www.roobo.com/en/
Fudan University
Product Design Intern Mozilla NYC labs Shanghai Institute of Visual Arts
Spacechat BA. Integrated Design
能⼒力力 与 擅⻓长 Capability & Expertise

Concept /Art Direction UX Research/Analysis Rapid Prototype User Interface Design

实践 与 兴趣 Practise & Domains

Data Aggregation Wearables


/ Visualization IOT Block-chain
Independent Works

SPRAYIT
Web Application 2013

Graffiti Art in NYC, has been recognized as an act of urban


vandalism towards the city's authorities.

This form of sub-cultural art has also been regarded as


the civic expression that engaging the contemporary
urban space with its unique aesthetic achievements.

SprayIt is a webapp with


multi-users + real-time features.
The app tries to deliver an online experience of the NYC
Graffiti Scene to everyone on the internet.

Websocket. Canvas. Node. heroku

CLICK TO

SPRAYIT!
Independent Works

SPECTRUM Translation
Image Production. PrintPress /Front-end. WebPress 2014

Capturing the intangible


this collection freezes energy in time,
creating a discourse between the seen
and the unseen,
harnessing the mystique of the
omnipresent that's often forgotten.

Collaborate:
Fabiona Einhorn & Angelica Jang

Direction: Caspar Lam & YuJune Park's


with Synoptic Office

the book
compiled our experimenting outputs
in the digital manipulations
of the subject “spectrum”.

css, javascript

-Check the scrolling effect


-via Web.
Independent Works

Wish Message
Perceptive Interface
Interactive Data Visualization 2014

Wish Message is an interface enabling users to literally grab real-time wishes from the Internet(twitter)
world-widely, it explores the possibility to reform user generated data in a perceptive method.

The bamboo copter in east Asia, contains a metaphor of good blessing. Instead of the touch or click
triggering process, this interaction system allows users who constantly in contact with modern HCI and screens to
(re)gain a physically nostalgic experience, and to subvert the perception between electronic devices and users.

In critiquing the phenomena of screen-based interaction and social media feeds, this interface want to
emphasize a playful and haptic perception with internet data.

- Interface Material: Basswood, Vinyl.


Symposium Livestream
Wish Message
Perceptive Interface
Interactive Data Visualization 2014

-Technologies:

Web Interface,
made with GoogleMAP API & Twitter Stream API
Industry Projects

HoneyComb
Product & User Experience Innovation 2013

Content Curation + Cross Devices

Mozilla NYC Lab Project for fire-fox phone in


cross-platform productivity innovation, we were assigned to
make a never existed product with content curation capability
in cross devices method.

-Design Questions

๏If news is tagged geographically, how can it be used to


stay in touch with friends and family?

๏From the hyperlocal to national and global, how can


people stay informed about the neighborhoods and
cities they frequent?

๏How do users receive and share current events and


updates already? What is missing or can be added?
Where does a user see himself/herself in this experience?

๏ Show categorically ordered news ie. any news


-Design Approaches: aggregator homepage like google news. While these
types of aggregators provide an organized approach for
๏ Honeycomb, with a visualized mapping of this information around a user, creates a centrical
searching for news, they lack a means of personally
experiences to better illustrate the user-defined landscapes.
relating to these updates.
๏ News that is contextually aware, not only allows users to stay up to date with the information
that matters to them, but also curates a narrative of their environments.
HoneyComb
Product & User Experience Innovation 2013

Day in a Life
user daily scenarios

HOME 8:02 AM WORK 06:05 PM

Just woke up and I have to get ready for the day A coworker and I planned to hang out after
Let me check Honeycomb to see what is happening work. Let’s see what shows and things are
in my comb. Looks like it’s going to be a bright day! happening in my work comb. (Arts + Culture
section of an online mag like hyperallergic)

COMMUTE 10:13 AM HOME 08:47 PM


Just got off the train and I want to grab a
Just got home. I should post that blog entry for
quick coffee before class. Let me check Honeycomb
to see if my favorite coffeeshop has any specials class. I bookmarked something to include in it
yesterday.
in my school comb !

CURRENT LOCATION 02:34 PM HOME 11:04 PM

Looks like I have some time before I have to go to my Such a long day. I wonder what was happening
internship. Maybe I’ll sit in the park for a bit and see what back home. (News updates from another city in a
my friends are up to. (Social Networking stuff)
different country according Map navigation)
HoneyComb
Product & User Experience Innovation 2013

Persona / user stories


validating Product features

Jill is an early 30s professional, who commutes daily from her apartment in
Greenwich Village to her workplace in midtown Manhattan by train. Her HOME Combs curated by user defined landscape
commute usually takes 25-30 mins one way.
During this time, she likes to use her phone to get a head start on what has
already happened that morning.
Jill is at once able to receive traffic, local, and social news during her short
commute to work. She can use Honeycomb’s mapping feature to find the
news happening along.

User-Centric label-marks to stay informed COMMUTE


Alex, 24 is an international graduate student studying in New York City from
Russia.
Although he is excited to make new friends in his program and to learn more
about how a different city operates, he still wants to maintain strong links to
his hometown and country’s affairs. Alex is able to receive news feeds from
both locations by designating a hometown on his profile. He enables
Honeycomb’s option to sync to his current social networks

Check weather updates Social Media Updates


Lina, 42 is a mother of two who is trying to plan a birthday party for one of her
children.
The morning of the party she uses Honeycomb to check news updates for
the the party venue, weather, and pizza parlor.
She sees that the rain might not make the ideal party space an ideal situation
so she calls the the space to see if they can reserve a space inside.
And although she’s already considered picking up

cross platform features media & news data aggregation pages


Independent Works

Weather Cessories
IOT Prototype 2015

internet of things with forecasting functionality.

First Iteration Prototypes:


IOT & wearable for forecasting.

Sensible and intuitive way that help users informed


with weather forecasting instead of the bits or digital
numbers on the screens

-Design Questions

Why do we need to Inquiry the exact numbers of Temperatures in


weathers, specially in an indoor situations

Perception error happens because of user’s habit of a different


weather scale, that’s always the difference of perceiving numbers in
Fahrenheit and Centigrade.

Can technology used to help the indoor scenarios with better


understating of the outdoor weather situation in a way that can be
sensed ?
+ + +
Weather can be sensed hyper-locally in a playful method.

source- Technology Integration: in Python Programmed


code Yahoo Weather API, Arduino, Leds, Heroku
Independent Works

Moodie
Product Design IOS 2013

Product Definition

Moodie is a simple mood


management tool

Moodie is like a coach fellow who keeps recording


and managing users moods in multi-functional ways.
Moodie knows the users feelings in the past, present
and would also give suggestions for users' future
benefits.

Current Under development > IOS Prototype


Moodie
Product Design IOS 2013

User Interface Design


Industry Projects

Roobo
Interaction Designer ( HCI & Product Definition )2015 - 2016

版权声明. 本段⼀一切知识产权內容都归 ROOBO 公司所有,图⽚片仅⽤用于陈述职务⼯工作内容 Photos All Rights Reserved By Roobo

Work Contents:
• Principle HCI process from start/stop procedures
• Scenario based interaction definitions integrated
with iflytek (讯⻜飞)voice recognition features,
touch screen, touch sensors, app based remote
control accessibility.
• Product definitions, Character Designs, Function
analysis within the ‘ vitality’ design principle, that
accelerate the birth of the Product as a family
robot with major usability for children under Age
13.
• iteratively coordinated with Industrial design
lead, UI designer ( motion user interface
designs), and python developer for function and
design updates, usability testing.

Achievements:
Beanq Awarded with Reddot (红点设计⼤大奖) in
2017, under artificial-intelligence Product
category.

-、
❖CES ASIA Exhibition 2017
版权声明. 本段⼀一切知识产权內容都归 ROOBO 公司所有,图⽚片仅⽤用于陈述职务⼯工作内容 Photos All Rights Reserved By Roobo

Roobo
Interaction Designer ( HCI & Product Definition )2015 - 2016
❖ Voice Recognition Interaction ( capability )
HCI Principle Insights - Interaction features following
“vitality”design principles 3 meters of far field voice interaction and sound localization.

with mute motor capability, robot is capable to give 30


Touch-Screen Interaction degrees to 90 degrees orientational responds accordingly
Touch Sensor Interaction
towards auditory localisations.

Robot responds with positive Robot responds with “ Angry”


emotional feedbacks “Confused” emotional reactions.
Embedded Touch Sensors inside of the Multi-Touch Screen is designed as the Face
robot’s ‘body’, the robot personality of Robot intentionally. The Robot dislike
positively allows users touching his people Poking his face according to his
body, interacted with voice replies such Personality. He’ll get angry or confused after
as ‘I feel good’ etc. this actions

❖ Mobile Application as a remote controller

Instead of Touch-screen & Voice based HCI, Mobile


Application enables remote control for several product
functions such as enable camera video recording, music
player etc

❖ Factory Settings with 8%


battery powered
❖ Mute Motor
Enabling users interact with the robot’s AI
features when the first-time open the
product from the packaging box, the product Customized mute motor enables
will instruct users how to plug-in for its-self the body rotate 300° flexibly

with voice recognition feature. without sound and equip BeanQ


with flexibility.
版权声明. 本段⼀一切知识产权內容都归 ROOBO 公司所有,图⽚片仅⽤用于陈述职务⼯工作内容 Photos All Rights Reserved By Roobo

Roobo
Interaction Designer ( HCI & Product Definition )2015 - 2016

Applied Product Definitions & Design Principles

• Production Definitions

• Industrial
design principles when users targeted
at children under 13 as a major group

• Production Definition as Language Learning Tool for Children • Production Definition as Family Security Tool
&Communication Device and Life Assistant for Family Users
Industry Projects

ezGlobalShop
Dashboard Interface Designer 2016

- Understanding the operating process behind a global logistic systems;


• Facilitating adaptive and comprehensive user experience guides from UI elements, wireframes, to end UX flow.
• Designing the visual part of the logistic management system.
Industry Projects

ChemingReports
App Designer. User Interface Designer 2016

Cheming is a data providing service platform runs for china's second-hand car market

⻋车明专注于电⼦子商务与机动⻋车⼤大数据信息平台搭建,主要业务是通过互联⽹网为 个⼈人消费者、汽⻋车经销商、⼆二⼿手⻋车电商
以及相关⾦金金融机构提供机动⻋车数据报告,以⽅方便便⽤用户获取客观、公正、独⽴立、详实的⻋车辆历史信息。
Startup Projects

Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space

Scan QR code
download the app

Moving Social Space !


面向全球(主要用户为欧美市场)的精准场景社交产品

App Store Launched!


Startup Projects

Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space

Scan QR code
download the app
每天,有数千万人,在世界各个航站楼搭乘飞机
Millions of people wait for their flights everyday at different terminals in different countries on this planet.

Market Analysis

-国际航空电讯集团(SITA)2015年3月发出《航空旅行展望》
-报告显示:2016年航空旅程将面对一个完全移动和社交化的环境,

-90%的航空公司和机场将提高服务的移动性和社交化程度。
-2020年,移动平台、社交媒体等渠道将占机票销售的40%份额。

-according to a report from SITA on March 2015, in 2016, flight journey is going
to land on a mobile and social-networked situation, that 90% of airlines and
airports would improve their services in a mobile and social networking structured
environment. By 2020, mobile platform and social media would become a major
flight tickets purchasing channel.
Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space

Business Planning & Concept


Direction in 中⽂文

Scan QR code
download the app

TechMedia Press
Releasing
Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space
Scan QR code
download the app

⾼高铁
high
speed 地下鐵
时间
time
航班 train undergroun
flight d
Travel Commutes Airlines
音乐节/演
CONNECTION 唱會
空间 场景 music
Space-chat, bring social experience
SPACE 应⽤用空间场景 the cloud, the ocean,
S festival to is a social mobile
and the Underground. application
from the nearest future.
… 峰会 公園
⼴广场 座位 Covering all possible
parks
squar Seats sum commuting and traveling
e mit scenarios

世界首創

Seat Based Service


Product Concept design
& Scenarios Definition 基于座位的精准社交,提前认识未来的同舱好友,
https://itunes.apple.com/cn/app/spacechat-the-moving-
输入登机牌上的信息,就能加入未来航班! social-space/id1125341966?l=en&mt=8
Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space
Scan QR code
download the app
Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space

Alex is on a flight, from Seattle to


Austin.
User Analysis Alex is a graduate school student from
Washington University. She’s attending
Global User SXSW in Austin for her spring break. She
全球⽤用户 interned at some internet companies,
峰会| EVENTS instead of the music festival scene at
The Millennials SXSW, she always wanted to find a crew
for the hackthon event. Alex typed
#hackthon #SXSW in her status bar in
Digitally Native, Spacechat, she made a team on her flight
Believe all things are possible, with some other spacechat users, they
Grown up in a Text-it, FedEx-it, built a product prototype during the
Why-wait world. hackthon event the next day.
Expect to use technology to
make work &life more interesting
& productive ++ User Scenarios

Scan QR code
户外,⼴广场|outdoor 地下鐵| SUBWAY 航班 | flights download the app
Spacechat
Co-Founder / COO / Product Designer 2016 - 2017
Moving Social Space

Scan QR code
download the app
Startup Projects

Cocoonsprout
Founder / Everything 2017 Curated Channels Liberating the Creative Markets

Coonsprout is a platform about creativity incubation and liberation for individuals and organizations,
that curates Content driven social e-commerce & culturally vertical crowd-fund supports.
Cocoonsprout
Founder / Everything 2017 Curated Channels Liberating the Creative Markets

Coonsprout is a platform about creativity incubation and liberation for individuals and organizations,
that is performing as a Content driven social e-commerce & culturally vertical crowd-fund platform
Cocoonsprout
Founder / Everything 2017 Curated Channels Liberating the Creative Markets
Industry Projects

Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

www.linkflowtech.com
app.linkflowtech.com user name: demo@demo.com password: demo
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

UX Design Process, Rapid Prototypes & Wireframes

Rapid Prototyping based


on a complex interaction systems referring to PRD file (mostly function buildings with excel ) and Product metadata, mark-down with UX insights.
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Interfaces Applied

UX Design Process, Rapid Prototypes & Wireframes | eg Wechat / Jindata / Sendcloud Trigger/ Action
UX Flow
Redesigning operating system’s UX flow. which includes: app connecting process, instance authorization process,
data mirror option via different apps connected restrictions
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

UX Design Process,
eg Information Architect for computational
interface. segement (dynamic) data

defining the whole interaction screens within the


segment data input methods.
defining user interaction methods ( chose / input /
chosen) based on data types.

S0-S1 S2 Section2
S1-S2 Section1
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Designing User Interface for


segment (dynamic) data computation

this interface input method


generates computation with dynamic
data in either ‘or’ and ‘and’ conditions.

by setting up “segment group”


the algorithm would automatically
tracking potential contacts, then
illustrates detailed customer profiles to
the users. ( Sales person at enterprise
who tracks customer behaviors)
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

segment data
Interaction Example

segment data
UI .CSS Style
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Widgets Design for


Linkflow

note*

CSS styles were requested as part of


UI widgets design outputs.

all widgets were marked with .css style

Some of them were delivered as html


and css static file.
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Widgets Design for


Linkflow

note*

CSS styles were requested as part of


UI widgets design outputs.

all widgets were marked with .css style

Some of them were delivered as html


and css static file.
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Widgets Design for


Linkflow

note*

CSS styles were requested as part of


UI widgets design outputs.

all widgets were marked with .css style

Some of them were delivered as html


and css static file.
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Widgets Design for


Linkflow

note*

CSS styles were requested as part of


UI widgets design outputs.

all widgets were marked with .css style

Some of them were delivered as html


and css static file.
Linkflow
User Experience Designer 2017

customer journey and workflow


automation SASS Application

Widgets Design for


Linkflow

note*

CSS styles were requested as part of


UI widgets design outputs.

all widgets were marked with .css style

Some of them were delivered as html


and css static file.
Current
Founder
Freelance @cocoonsprout
User Experience & Product Designer
helping with some other Startup friends 茧萌科技创始⼈人

Yours Sincerely,

www.haijingprojects.com @2018All Rights Reserved

You might also like