SIYUANFANG DESIGN PORTFOLIO 2015
Hi there !
I’M SIYUAN FANG
I am a design student with diverse background in product, interaction and automotive fields. I was born with great curiosity while kept writing and painting as the early ways of reflecting the world. Then I met design in college, learned to challenge the status quo and spark ideas for a brighter future. I’ve been also approaching and exploring different industries. From small design consultancy to global
2009
tech giants, the internship experiences brought me with comprehensive and hardcore knowledge, as well as versatile skills in both visualization and prototyping. After all, I am fascinated by the magical fusion of hardware and software. By designing the virtual interface and physical interior as a whole, I dream to evolve the user experience in and around the vehicles. All I need is a chance to surprise you ;-)
2010
2011
info
Skills
Nationality: China Birthdate: 1992-04-20 Phone: +(46)706127097 Email: funsyuan@me.com Website: http://funsyuan.com Address: Fysikgränd 9A 101, 90731 Umeå, Sweden
Digital: Adobe Photoshop, Illustrator, After Effects, Premiere, Indesign; Autodesk Alias, Maya, 3ds Max; Keyshot, Keynote, Arduino, Processing. Physical: calligraphy, sketching, clay modeling, prototyping, filming, investigating, driving. Language: Chinese(native), English(proficient).
2012
2013
BA. Industrial Design
2014
2015
First Prize
Sept.2009-June.2013 Zhengzhou University of Light Industry, China
2013 OzCHI Interaction Design Challenge
Winner 2014 Move Award Milano
Product Design Intern Oct.2011-Jan.2012 Christian Bjorn Design Group China
Best Eco Interior Nominee 2014 Interior Motives Design Awards Paris
User Experience Design Intern
Advanced Design Intern
May-Sept.2012 Nokia Research Center Beijing
Jan.-June.2015 Volvo Cars, Sweden
Excellence Award 2010 Vatti Industrial Design Competition
Interaction Design Intern
Interior Design Intern
Oct.2012-Mar.2013 Microsoft Research Asia
July.-Aug.2014 Guangzhou Automobile Group China
Finalist 2011 User Experience Design Awards China
MA. Transportation Design
TIMELINE
Best Lifestyle Design 2012 Car Design Awards China
Sept.2013-June.2016 Umeå Institute of Design, Sweden
2016
content
EXTERIOR
INTERIOR
PRODUCT
INTERACTION
VIRTUAL DRIVE AUTOMOTIVE INTERIOR DESIGN Dec.2014 - Jan.2015 The automotive is undergoing a transition from manual driving to autonomous mobility, technology leads vehicle interior to a new era, where aesthetics, functionality and human-machine interface merge together to deliver a richer in-car experience, and ultimately making driving accessible to everyone.
ideation
inspiration
autonomous experience The initiative is to envision a whole new interior for self-driving vehicle. Started from a user perspective, individual interviews have been managed with different age groups in order to see how do public perceive the technology and what would they expect and concern from a fully autonomous car. With the feedbacks I found potential needs to be considered and developed not only by the way of automotive design but also interactive scenarios. “Miniature� is the final concept. The key inspiration comes from the childhood memory of playing a toy car with your fingertips. It is a vivid and intuitive experience which applies almost to everyone. I brought this feeling much further into the context of future mobility and proposed a whole new in-car experience powered by emerging technologies of autonomous driving and networked traffic.
Scandinavian Home, Chinese Bonsai, Toy Car
Front screen
Air conditioner
3D projector
Hologram table
Avatar key
Storage deck
Sound system
interaction
hologram table
god’s perspective The core system consisted by a interactive key and a holographic display. User attaches the key upon the central table in order to activate the car, the system will show hologram map on the table, where allows user to pick destination and navigate routes with body gestures, as well as explore the world inside out from a virtual scope. By simulating the realtime images of the outside environment, occupants will get a better sense of
the moving condition. And if users want to take control when ever they want, the switch from autopilot to manual driving will happen seamlessly: The driver holds the key and manipulate it in a similar way of playing toy car. The key’s position is fixed and works as the mini avatar of the real car, while the holography keeps changing according to user’s movement.
tangible interaction
light oak, red walnut, white fabric, gloosy balck, silver.
remote control
steering
accelerating & braking
urgent stop
context
future traveling The intention is to enrich the in-car experience for autonomous context and to define a new mode of driving where everyone is equally capable to drive their own vehicles empowered by the technology.
MYPET
USER-CENTERED VEHICLE DESIGN Nov. 2013 - Jan. 2014 The recent development in artificial intelligence and robotic dynamics has brought possibilities to car industry, this project intended to reinforce the humanistic value within automotive intelligence and redefine the relation among users, cars and surroundings.
research high-profile
ambitious
optimistic
online
trendy
diligent
sharp
alone
fun
expressive
loving tricksy
the aspirational user
Inbetweener
The inbetweener refers to the young professionals who have only just left school and are now active in the beginning of their careers and social life. To discover the design opportunity, I did the research of their characters and lifestyle. They are a bunch of extrodinary young people, full of energy and enthusiasm in work, keeping positive attitudes toward life, good at finding and enjoying the fun experience on daily basis, and keen on bring laughs to surrounding people. On the other hand, they are sensitive and vulnerable, lack of experience and inner strength and still be naive and childish. They need something to company with they and facilitate their life. So...
they aspire the 1st car like...
playful toys
lively companions
intelligent robots
ideation “What if your car isn’t a machinery but a living being? �
Mypet is a emotionally engaging vehicle for a demanding future youth, aimed at to go beyond the relationship among users, vehicles and surrondings. By mixing of the latest computing technologies and robotic dynamics within a car, mypet can
understand and interact with the user in visual and voice, as well as respond and adapt the environment by natural movements. So regard the car as your pet, and be ready to play with it!!!
concept
eye contact
body language
voice Communication
visual recognition
Mypet hears what you said and chats with you.
Mypet sees what you did and behaves with you.
touch sensitive
Cloud connectivity
Mypet feels your touches and responds you.
Mypet stays with and cares you all the time via virtual links.
interior “How should users perceive automovite the interlligence within the car?�
emotional companion
schedule
video call
reservation
development
Remove some features to simplify
Lower the door line for better entrance
context
click to rock
TOUCH WHEEL AUTOMOTIVE INTERACTION DESIGN
Vehicle human machine interface is undergoing a tremendous change with the widely use of technologies in communication and information. In this project, the influences between HMI and the driver’s cognition factors such as driving distraction, driving workload and the situated awareness were analyzed and the concept of vehicle interaction design were putted forward, to ultimately explore a new approach of thinking and designing automotive interior.
RESEARCH
driver interaction
Smart mobility is the future of transportation, more and more companies are joining the development with different startegy. As the leading force of car industry, BMW continues to improve driving pleasure with its iDrive system and ConnectedDrive
cluster
display
control
digitization
visualization
efficiency
experience. The new palyer, Tesla, trys to define digital cars with one large touch-screen. Even the high-tech giants, Apple & Google, starting to extend to the mobile experience and build their eco system on 4wheels.
future
connected
intuitive
natural
RESEARCH
d
Personality
Definition commuter
introvert
Interviewee A Born in 1988, drives Toyota Crown working in family business
smart device private space extrovert social symbol
Scenario
Behavior
steering
phone
going straight
game
red light
music
traffic jam
movie
waiting
surfing
Inconvenience
Technology
attention
AR
distraction
TMC
complication
LBS
misoperation
V2V
Functionality
“enjoy the feeling of speed” “want to try electricity driving coz it sounds cool” “dislike hands off from steering wheel” “only listening music in drive” “too many buttons, everywhere” “never understand some vehicle functions” “hate to look down on central screen” “voice commands feels so silly...”
Interviewee B Bron in 1981, bought Ford Focus, an IT developer “love to explore what the car can do” “want to try tesla coz the system” “other systems are logical yet low efficient” “use most quick buttons on steering wheel” “often single hand drive, especially to operate central console” “never use navigation, I trust myself more”
“like listening radio channels, feels I’m connected with the world “touch screen is intuitive but really a distraction, you have to see and click” “tangible operation is better in many ways” “natural gesture control looks ok yet without touch feedback”
better control
Interaction
music multi-touch radio HUD
Interviewee C Born in 1984, owns Porsche Cayenne, doing public service.
Wz vzv z natural comm buttons setting
“navigation sometimes wrong, and impossible to change routes” “cool to receive realtime traffic info, but prefer to see it in head-up view like sci-fi movie” “nothing to kill time in traffic jam, even music doesn’t work” “looking for a different way to drive car, like getting my boy more involved”
simpler interface
“life is all about experience” “waiting for the car from apple;)” “bring my ipad, the car system is not my type” “uh, I make phone call very often, via the car”
“prefer voice than multi-touch, coz it’s not good to wave your hands in car” “wish the car could be intelligent, like my iphone, I can get information along the ride”
smarter mobility
“How to safely evovle driver-focused interface and experience?”
INTERACTION
hands-on-wheel augmented reality head-up display inner sliding
outer sliding
double click
inner touch wheel digital cluster outer touch wheel
music
phone
navigation
next & previous
choose contact
search destination
adjust volume
hang-up
zoom in/out map
LED ring
DEMO
d
swipe to initiate
inner slide to swtich tabs
double click for shifting music
outer slide to adjust volume
highlight spots along the way
slide left to zoom in map
navigate route over driving view
little gaming while traffic jam
URBAN SPORT STRATEGIC DESIGN
Mar. - Jun. 2014 Urban Sport is a strategic concept collaborating with Audi’s leadership, based on various analysis and research results, the goal is to define the future elements of urban mobility and explore the new form factor of city driving, ultimately proposing convincing strategies for the brand.
research expressive
strenth
minimalistic design
technical
opportunities
progressive technology
urban future
motorsport heritage
networked traffic
personal mobility
humanistic
understated image
autonomous driving
conservative portfolio
weakness
understated
electric powertrain
threats
Revival of sportyness Transportation is all about the freedom, yet in the envisioned future, the urban mobility taken control by information flow and networked traffic, autonomous driving became ubiquitous and people are losing the sense of driving, also for all the excitement of movement, the romance of life, as well as the beauty of nature.
pioneer eras
The concept is to bring Audi’s racing heritage into autonomous future and create a pioneer of human driving which revives the spirt of racing, and ultimately, empower people with true independence of life.
empowering heros
free mobility
ideation “How to interpret Audi’s racing spirit in a modern and urban manner?�
city commuting
fun driving
"flying frame" racing attitute
minimalist surfacing
rotating cabin
personal mobility
expanding wheels
driver centric
Inspired by Auto Union racing cars, the ideation to explore the formula of fun driving in future city. It is slim, agile, and fun. With one seater personal package, the car has a extreme proportion to stand out in the streets and also be perfectly fitting into autonomous traffic flow. The wheel transformation
takes advantage from motorcycling and offers a racing-feeling experience, to remind people of the goodness of oldfashion driving, as well as empower them to escape from the well-controled world.
quattro dynamics
interior
vitrual cockpit
compact interior
vitrual cockpit 2.0
racing experience Gesture-control wearble system together with aurmented reality glass delivers a intuitive and immersive experience of driving.
head-up interface
gesture control
turn left
go straight
turn right
context
click to race
HMI
multi-user interface
3D navigation
hyper vision A center stack concept allows users interact with the car and surroundings.
steering device
automotive
d
Dec. 2014
AUDI future elements A team project explores the ultimate simplicity for Audi’s design philosophy.
[Responsible for exterior detail, CAD support, concept animation.]
transportation
Nov. 2010
driving mode
powering mode
camping mode
Eco camper A vehicle concept empowers outdoor activities and sustainable lifestyle.
[Best Lifestyle Design in Car Design Award China 2011.]
transportation
Mar. 2011
haptic navigation
e-Pack A skating backpack supports digital youth with a smarter mobolity.
on-the-way expressions
product
Apr. 2010
storm eye
elegance
performance
A flexible range hood delivers vivid cooking experience.
[Excellence Award in Vatti Industrial Design Competition 2010.]
product
Nov. 2011
ultra-simplified structure
lotus burner A well-integrated cooktop makes kitchen cleaning easier than ever before.
SOCIALRADIO SERVICE DESIGN
May. - July. 2012 A mobile radio service design based on Nokia Symbian system, collorating with mainstream social media platform, it provides rich and up-to-date audio content while featuring live social experience among listeners, programs and hosts.
research Internet radio (also web radio, net radio, streaming radio, e-radio, online radio, webcasting) is an audio service transmitted via the Internet. Broadcasting on the Internet is usually referred to as webcasting since it is not transmitted broadly through wireless means. Internet radio involves streaming media, presenting listeners with a continuous stream of audio that typically cannot be paused or replayed, much like traditional broadcast media; in this respect, it is distinct from on-demand file serving. Internet
radio is also distinct from podcasting, which involves downloading rather than streaming. Internet radio services offer news, sports, talk, and various genres of music—every format that is available on traditional broadcast radio stations.[citation needed] Many Internet radio services are associated with a corresponding traditional (terrestrial) radio station or radio network, although low start-up and ongoing costs have allowed a substantial proliferation of independent Internet-only radio stations.
radio service mode
listening • talking • sharing 1. People listen to radio in traditional way feel difficult to share their feelings to others as no platform for them.
3. What if people can listen to radio and make comments, share pictures and information instead of text to Radio station.
FM radio stations FM radio streaming
Interaction with radio host
client-side users
third-party provider
Interaction between listeners 2. But now, we have internet and weibo. So we should do something between them and radio.
Interaction with third party
Social platforms
ideation
• Advertisements
unite speakers with listeners
Social media refers to interaction among people in which they create, share, and/or exchange information and ideas in virtual communities and networks. It is a group of Internet-based applications that build on the ideological and technological foundations of Web 2.0, and that allow the creation and exchange of user-generated content. The concept of Social Radio aims to combine radio contents (delivered via audio modal) with social comments e.g. from weibo.
com to deliver richer user experience. Currently, the radio UI is very simple. To make it rich, we want to feed the UI with text contents from a social network platform, so that users can interact with each other based on the contents from radio. The application developed on Symbian OS platform and delivered via Nokia store.
Detail product information can be shown when an advertisements is broadcasted. User can easily order or directly purchase the product.
• Customization/Recommendation
User can customize program and play schedule. Audiences’ behavior and habit can be logged as the reference of recommendation.
• Vote / Request songs
• Program parade
Interaction between audiences and DJ can be enabled directly, like: voting, request song
Provide program broadcasting plan for audiences to search
• Info of current program
DJ, music, singer, album, concert, traffic condition or other infomation mentioned in programme
client-side users
1.Get current user position, send to server.
2.Request program list (fm87.5+cityname)
3. Request DJs list (fm87.5+cityname)
Return program list
Return DJs list
Request program list (fm87.5+cityname)
Request DJs list ( fm87.5+cityname)
Return program list
Return DJs list
• Recording/Download
User can record program and do simple edting. Program related contents (music,ringtone) can be download
4. Send new tweet or comment (#fm87.5#,cityname+”content”)
5. Request the contents (#fm87.5#,cityname, duration)
Insert to micro-blog with tag (#87.5#,cityname)
Search the tweets including the tags (#fm87.5#,cityname,..)
Request the stations list in current city
Micro-blog server
radio hosts
Process location request, return city name
Return the latest contents
workflow
wireframe
radio page
channel list
program parade
social feeds
Dj. profile
posting page
interaction flow
icon design
visual design
Neutral
Retro
vivo
VIRTUAL HAPTICS HAPTIC DESIGN RESEARCH
Nov. 2012 - March. 2013 A design-driven research explores tactile sensation and multi-modal interaction to enhance the future touch experience.
research
HUMAN SENSATION
BRAIN EYES
VISUAL INPUT
EARS
HEART
MOUTH
The visual channel is the major player in modern interaction scenarios. Indeed it is vivid, intuitive and efficient, we got too much information fill into our eyes on various display from every corner.
The auditory sensation is not just the foundation of the nature language but human civilization. As people receive sounds passively, the world becomes bustle while the mass information spread by voice.
HANDS tech foundation: haptic display
AUDITORY INPUT
FEET SKIN
Sliding and Clicking Haptic Feedback on a Touchscreen
THE FUTURE DRIVEN BY SENSES TACTILE SENSATION
We see the world through eyes, hear the nature by ears, feel things via our body and skin. The human sensation is not just the capabilities to perceive the world, but also the power to change. As the information is gonna be overload on our auditory-visual modality and the relatedrelevant
tech has been overdeveloped as well, the tactile sensation stands out for the future. As the underdevelop area in modern technology, the haptic research needs to be guided by user-centered approach and design thinking.
research
APPLE SKEUOMORPHISM STYLE explore the haptic language for Microsoft visual interface 速
TEXTURE LINE
WEIGHT
COLOR
TEMPERATURE
VISUAL ELEMENTS
FORM
HAPTIC ELEMENTS
CONTRAST
VOLUME
HARDNESS
MICROSOFT MODERN INTERFACE SPACE
FORCE SHAPE
Skeuomorphism the visual language of apple UI is advocate that UI design should refer to physical things and reduce the learning cost by refresh user memory. Metro-win8 modern UI style, the visual language of microsoft latest products, is advocate that content interaction and digital asthetics, its totally artificial things and have no physical reference.
Haptic feedback should follow with the visual language. so if the haptic language of Apple is focus on simulation of visual metaphor such as material texture, how is the haptic language for Microsoft metor visual style and what kind of metaphor is suitable?
ideation
HAPTIC LIBRARY As a fundamental exploration for haptic interaction design research, I built up a language library to collect and present various haptic-related metaphors, such as natural behaviors, physical activities, objects manipulation etc. Following through the
user-centered design process, I intended to create structured definition of haptic language with interactive embodied metaphor-based schemata mappings.
5.
design case
Windows 8™ haptic gesture 6
Windows 8 provides six kinds of touch gestures to allow user interact with win8 device in a new way.
1
1. Swipe slowly from the left to multi tasking 2. Swipe from left-and-back to app sidebar 3. Swipe from the left to switch apps 4. Swipe from the bottom for app & navigation commands 5. Swipe from the right for system commands 6. Pull down from the top to close the app
2
5
3 4 • People physically sense the coins while they pull the drawer. • People virtually sense the buttons while the swipe out the bar.
2. Although it’s a revolutionary gesture innovation, users tend to confusing with the visual only feedback and making mistake in the complex interactive mode. In this case we find the opportunity to embed haptic feedback with touch-screen to improve the accuracy of win8 gesture.
The key innovation is the provision of haptic guidance and feedback signals enabled by Microsoft-proprietary hardware. Based on the analysis of the interaction feature, we match a proper haptic metaphor with each gesture from haptic library.
.6
3.
Through the associative memory of metaphors and the changing process of tactile sense the gestures can be performed intuitively.
• People physically sense the edge while they pull the string. • People virtually sense the boundary while the swipe into screen.
patent
Multimodal Guidance and Feedback Methods for Touch-based Input Gestures United States MS# 338240.01 The invention is a method for associating sight, sound and feel with touch-based input gestures. The multimodal signals serve to guide the user before and during an interaction, and provide feedback after its execution.
Figure 3: When the finger swipes from the top or bottom edge of the screen to open the app navigation commands panel, it feels some resistance, similar to pulling a weight through a pulley.
Figure 7: After the finger swipes from the left edge towards the center of the screen and back to the left edge of the screen for multi tasking preview mode, the user feels and hears a clicking-like sensation (audio+haptic) when the multi-tasking preview panel poping up.
Figure 1. Before the finger swipes from the edges of the screen, it feels a raised edge (simulating a physical bezel) between the black border and the display area, hinting at the possibility to drag something (e.g., a drawer). During the dragging, the finger can feel the inertia of the menu bar being dragged out.
Figure 2: When the finger swipes from the right edge of the screen to open the system commend panel, the user feels and hears the rattling of loose items inside a drawer (audio+haptic) during the interaction.
Figure 4: When the finger swipes from the left edge of the screen to switch among background applications, the user feels sensations similar to that of flicking cards.
Figure 5: When the finger swipes from the top edge of the screen towards the middle of the screen, it pulls down the app with it. The finger feels like plucking a string with elastic force. As long as that haptic sensation is there, the user can release the finger and the app pops back up. (cf. G6)
Figure 6: When the finger swipes from the top edge of the screen towards the middle of the screen, it pulls down the app with it. The finger feels like plucking a string with elastic force. As the finger continues to pull down, the user feels and hears the string break underneath the finger (audio+haptic), indicating that the action of closing the app is complete.
Figure 8: After the finger swipes slowly from the left edge towards the center of the screen and drags the app for a while, the slide bar moves from the left to the right underneath the users finger visually. The user feels a rippling effect under the finger as the slide bar moves across it.
Figure 9: When dragging the app across the screen, the finger feels like being squeezed at the boundaries of the three screen areas.
Figure 10: When the user releases the finger in the left or right area, haptic sensation disappears and the app snap view opens. When the user releases the finger in the middle area, haptic sensation disappears and the system goes to the full screen view for the application in the middle.
prototype
HARDWARE SKETCHING
For haptic design, the literal metaphors are unable to communicate with technology, therefore, accodring to the haptic metaphors, we sketched a series of hardware to convey the real tactile sense.
Turn to rotate
Pinch & stretch to zoom
Press & hold to command
Scrolling content
A
B
C
Swipe to select & move
service
Feb. 2012
double-side key
multi-input gesture
cube input A multi-dimensional keyboard application facilitates mobile typing.
[1st Prize in Nokia User Experience Innovation Workshop.]
interaction
Sept. 2012 press feedback
interactive tile A Windows8 concept blurs the boundary between live tiles and full-screen application.
all new start desktop
[The initial concept has been prototyped by Microsoft Research.]
interaction
Oct. 2012
push for submenu
rotate to select
one ring A wearable console device for productivity-oriented scenarios.
mobile-first interaction
pull to confirm
interaction
Jan. 2013
physical scanning
3D generating
3d Reconstruction A future vision of natrual interaction and holographic technology.
hologram glass
gestural modeling
[Public demo on Microsoft Techfest 2013, Seattle, USA ]
more
I practice Calligraphy
I play pingpong
I love family
I value friends
siyuan Fang
+(46)706127097 | funsyuan@me.com | www.funsyuan.com | Ume책 Institute of Design | Sweden