PORTFOLIO N°
1
Interaction design
XIAOYU WANG
ABOUT ME Scenographic and Communication Design, Dortmund Master of Arts, 09/2013 - 06/2016 Master Thesis- Spacial Semantics in the common space of scenography & nature Master Project- Above Zero Exhibition Design
I am XIAOYU, a designer who never stops discovering new things. I have great passion for User Experience & Interaction Design, and a special inter-
Industrial Design, Beijing
est in Scenographic Design.
Bachelor of Engineering, 09/2009 - 06/2013 Excellent Graduate Design-
With the desire to study user behav-
HE&M Guider: Health Careness service design
ior and better to comprehend user needs, now I am pursuing a master of science degree in Human-Computer Interaction, aiming to bring the user friendly interfaces to our daily life and remove the barriers between virtual and real world with empathy and love. To get forward on the way of design, I integrate in a different culture, work with international people and do the interdisciplinary work.
2
Industrial Design, Taipei Human Computer Interaction, Siegen
Exchange Program, 09/2011 - 01/2012
Master of Science, 10/2014 - 05/2017 (expected) Master Thesis: User Narratives in Experience Design for the Pharmaceutical Industry: Creation and Evaluation of a Customer Journey Mapping Template for Bosch Packaging Technology Pharma
INTERNATIONAL
INTERCULTURAL
INTERDISCIPLINARY
SRTP - Student research training program, 2010-2011
Internship - Beijing Sense Industrial Design 07/2011- 09/2011
Project-Starboardsoft.de, Dortmund, 10/2013
Student Temp - macio GmbH, Düsseldorf, 11/2015 - 04/2016
Product Design Intern Market needs research, concept generate, Sketching
Interaction & UI Design for an iOS App-Sailorstoolbox
Conception & User Interface Design
Voluntary - 3th National student social & Practice contest, 08/2010
Internship - TV.SOHU.COM, Beijing 08/2012 - 11/2012
PIXELROCK-Bitmob workshop, Amsterdam, 04/2014
Visual editor for newspaper
GUI Intern Website design for Sohufox project
Full LED Jacket design+Lookbook
Research area-Space optimization for student’s Dormitory
2009
2010
2011
2012
2013
2014
Taipei University of Technology,
Dortmund university of applied
University of Siegen,
Beijing, 09/2009 - 06/2013
09/2011 - 01/2012
sciences and arts, 09/2013 - 06.2016
10/2014 - 05/2017 (expected)
Industrial Design (B.Eng) • Ranking 1/32 • Excellent Graduate of Beijing • Excellent Graduate Design (HE&M GuiderUser-centered health care service design)
Industrial Design (exchange program)
Scenographic Design and Communication (Master of Arts)
Human Computer Interaction (Master of Science )
Interaction Design about Chinese calligraphy Cooperation with KH-Berlin
Dortmund, 01/2016 Preparation and arrangement for the colloquium and installation tap art Voluntary - UX Camp, Berlin, 06/2016
University of Science and Technology
Workshop-”2011YDW” Taipei, 10/2011
Voluntary - Dasa Szenografie Kolloquium 2016,
2015
2016
Project - Virtual Showroom for Smart Home Products to improve user experience, 08/2015 www.was-ist-smarthome.de
2017
Robert Bosch GmbH, Germany 11/2016 - 05/2017 (expected) Master Project @ UX Department
Smart Home Award 2016, Germany 3. Place: Best Student Achievement
Never stop learning and practicing, on the way of exploring
3
UX · UI · INTERACTION DE S I GNER
4
CONTENT Design Challenge
6
Mercedes-Benz Future Interaction Concept User Experience Design Interaction Design
Virtual Showroom 20
Smart Home Award 2016, Germany
for Smart Home products to improve user experience
User Interface Design Usability Inspection & Test User-Centered Design Product Design
TruNet - WebRTC Based Software Development 26
Design Thinking
Research Project- P2P file transfer platform for Senior Empirical Research Method
Linked- UX Concept
Ethnography & User Behavior
34
Learning theories & Serious games
Social Tattoo for Personal Communication
Collaborative learning (CSCL) Cooperative work (CSCW)
Siegen Discovery - Game Design 42
Behavioral & Cognitive Science
Human-Computer Interaction (HCI)
City Tour through Serious Games Scenographic Design
Sailorstoolbox- UI/Interaction Design for iOS 50 The APP for Nautical Calculations
Graphic Design 3D Modeling 3D Printing White-board film
HE&M Guider 56
Excellent graduate design, Beijing
Health Careness Service Design (Bachelor Final Project)
Film Post-Production
Creative Art
5
DESIGN CHALLENGE
xiaoyu wang FEB 24-28, 2017
THE FAST AND THE FURIOUS
ENJOYABLE
COMFORTABLE
How might we enhance the automotive experience in the near future 2020 ?
INTELLIGENT
CONNECTIVE
COMMUNICATEIVE
ENVIRONMENTALLY FRIENDLY
TIME-SAVING BUT EFFICIENT
PERSONALIZED
7
FUTURE TREND Automobile in Germany
A zero emission mandate
A changed form of energy supplies
“ All new cars mandated to be electric in Germany by 2030 �
- New interaction with filling points
Clean energy
New form of input/output
Electro-mobile
- New form of control (visual / acoustic / tactile...) - New form of information display
Autonomous Driving
(vibrate / visual / acoustic / Illuminate...)
Gesture/ voice control
Multidirectional information flow
Virtual Reality Scene Generator
- Information demand
Holographic (diffraction gratings)
- Information supply & display HUD-Head up display
- Information transmission
Car to X communication New experience of driving
Magic body control
2014
- Autonomous driving experience
smart phone mirroring
- Not a tool but a friend
Safety issues - Pre-safe brake
- Sense of love and belonging
- Lane keeping/blind spot assist
- Ease the burden, be more relaxed
- Distronic plus- steering assist - Cross-traffic assist Personalization 8
Design for the Environment
NEW CHANCES CHALLENGES CHANCES
UNDERSTANDING Persona* Driving experience Mr.Zhang has more than 30 years experience with driving a car. He seeks comfort and safety by selecting a new vehicle, and enjoys the sense of pride by driving a new modern car. He changed the car frequently, every 3-5 years.
Run Zhang CEO 52 years old Real estate company Nationality: Chinese Hobby: golf, Tai Ji, reading Vehicle: Benz S500
Living habit (suffer from hypertension & diabetes) He has divided and lives alone in a private villa in a middle-scaled city in north China. But he is always on the way for business trips. He always engaged in the business negotiation and drink a lot with his cooperative partner & friends. His chauffeur drive him home when it is needed. “I like driving, but as I am becoming old, I have suffered many healthy problems, backaches, dizzy, I am always worried about my hypertension and heart disease when drive a long way“
What I most care about at present life stage.
reputation Socializing
spiritual wealth
Extreme weather
Traffic jam
family health Tired on a long journey for business trip
Pain points
unable to write complicated Chinese
My terrible experience with the vehicle Driving experience Mr. Zhao works as top manager for 3 years. The company vehicle has accompanied him those years, visiting customers and traveling on business. As he lives in Beijing, he is always caught in traffic jam. The extreme weather like fog, rainstorm made him bored on the way to work.
Leo Zhao Top Manager 42 years old Electric power company Nationality: Chinese Hobby: sailing, skiing Vehicle: Benz S 400
Living habit He is married and has a 4-year old child. He picks him up from school occasionally and always parking far away from school. He is so busy with his work that even by driving he also should respond to his customers and deal with work issues. “As a young manager, I have lots of workload, time is life for me, even on the trip, during the holiday, I can not easily get relaxed. What’s worse, I’m a manager but not good at managing time. I know it’s dangerous to think of and deal with work issues on the road, but so what? “
* Based on 2 interviews with correspondent persons.
Bored in doing travel plan, set up navigation...
family
Dealing with affairs while driving
health work life-work achievement balance /efficiency
Dizzy and backaches when Hard to deal with heart disease & illness when drive for long hours driving, especially on the motorway (Autobahn)
9
IDEATION 1.0 Control / Display INPUT
OUTPUT
Command button touch pad
steering wheel
Instrument cluster
Dashboard
HUD
voice control
front window
INFO. display eye tracking control back window
brain wave control
vibration gesture control * Participants: Xiaoyu Wang, Chengming Li. Two people, 67 ideas
10
sound
atmosphere
IDEATION 2.0 Body data collection input? output? control? display? response? feedback?
According to an investigation by the World Health Organization (WHO), 70% of the world population is in Sub-health condition, where over 45 percent of sub healthy people are middle-aged or elderly.
information display
steering wheel(pulse,pressure) seat(sitting posture) monitor/ camera on eye breathing sensor
Basic info: App connect Emergency/warning: HUD vibration, luminous, sound
detect and prevent disease sub-health state
self-actualization send calendar to car tion prepera automatically recognize the adress on phone, paper, documents... Mee ting scan the documents sch edu le print the documents Meetin g agen da Locatio n tag
inform related person inform autonomous system Emergency case: inform police, ambulance
driving under bad health condition
health & safety issue
semi-autonomous driving system - drive to hospital automotive experience
trigger??? interaction ???
n: Inspiratio sacrifices er Tesla own e a life sav his car to
conscious unconscious
call for help
Calendar remind intimate Relation effective Work Facilitating Effectiveness consid Be more communicative er in work drivin about saf and humanized ety g vs w voice recording orkin g? leave message give me remind contro color photos l mod e As if I can always keep my birthday of dad beautiful memory eyes on the road??? emotional experience ing
lann Travel p
Ideas and inspiration, 3 selected areas went into detail.
11
IDEATION 3.0 TOUCH WHEEL
Body data aquisation pulse, blood pressure, breath
Be touched by the Meticulous Care
Health protection improve sitting posture
Fingerprint identification
measure body parameters prevent disease by analyzing big data databases
Safety warning fatigue driving warning
Emergency measures deal with sudden diseases (heart disease, faint) out of control eye-tracking camera
Smart control system
Motion/gesture capture sensor
Touch pad+selection wheel Control
Smart gesture control wheel + Head up display
Sketching Š Xiaoyu Wang. Ideation for 1 complete idea, including appearance, technology, material, functional specification, basic ideas of interactive mode.
12
Infotainment
APP connection setting/configuration
direct interaction
HUD
PROTOTYPING
Driving mode Small effective area active, hand writing unavailable Trigger Point on the left hand, precondition for tasks
Paper prototyping and ergonomic study. Participant: Xiaoyu Wang, Chenming Li.
Standing mode
Avoiding
Big effective area active
Incorrect driving posture Spurious trigger
Support writing and real time mapping on glass
13
PROTOTYPING
TOUCH WHEEL Be touched by the Meticulous Care
Emergency case test
FORGET 10 AND 2: DRIVE WITH YOUR HANDS AT 9 AND 3
Old way 2-10 pre-1990
New way 3-9 recommend now
The recommended position of your hands is now at 9 and 3 o’clock, with the thumbs placed along the rim rather than looping around it. In the event of an accident, the force of airbag deployment can send hands at the top of the wheel into your head or even break thumbs.
14
Home Studio
Help you form good habits of driving Do it in the right way
Be touched by the Meticulous Care
Gesture Control Wheel+HUD for safety driving
Smart health monitor system, bring you out from emergency
Smart Wheel for healthy life Health data collection & analysis
Real-time mapping with touchpad for careness & awareness
Head up display enable you just focus on your road, no need to lower you head and find buttons. Two kinds of control mode: gesture control & touch control, bring more comfortable with intuition.
3-level of urgency modes, reminding, warning and help assistant, dealing with the sudden healthy problems and saving your life from emergency.
Collecting and analyzing health data in the cloud, matching big data database to predict diseases and improve current health situation. Help you form good habits and right driving posture unconsciously.
Want to show your love to your Sweet? Want to warn other drivers about the trouble while driving? Writing on/ speaking to the touch wheel and mapping your care on the glass.
15
INTERACTIVE MODEL
TOUCH WHEEL
Be touched by the Meticulous Care
Standing mode
Mapping E-health
Mapping E-health
Gesture
E-health
Gesture
Mapping
fingerprint identification
Using fingerprint to unlock the car
Slide to sides
Right hand: thumb slides on touch pad
Open touch & gesture control Open head up display
Gesture
Driving mode
Mapping E-health
16
Gesture
Right hand: press to confirm
Selection: touch control Selection: gesture control
70
Mapping E-health
Gesture
Confirmation: touch control Confirmation: gesture control
70
E-health
Gesture Mapping
gesture control trigger
Normal driving Gesture/touch control system: OFF
Slide to two sides Body data collection while driving
Left hand: hold gesture trigger point Right hand: move finger to left/right in the air
Left hand: hold gesture trigger point Right hand: double click on touch wheel
70
INFORMATION ARCHITECTURE
TOUCH WHEEL
Be touched by the Meticulous Care
ABCDE
Standing
touch control
home
selection
confirmation
cancellation
gesture control
home
selection
confirmation
cancellation
ACTIVE ¡ touch wheel control ¡ gester control
ABCDE
Driving
*equal to shortcut Mute E-health
Mapping
Gesture
Voice control
volume
call
...
...
...
extreme weather
Special case
Remind
slight sub-health symptom, incorrect driving posture
Urgent level 2
Warning
illness signal detected by analyzing personal health data
Urgent level 3
Salvage
accident
health problem
Expending
Urgent level 1
Auto control
Smart City
Home control
Smart Home
sudden illness like heart attack, fainting, out of control
17
SMART WHEEL FOR HEALTHY LIFE Urgent level 1 Slight sub-health symptom, incorrect driving posture - remind while driving - give health tips - remind for health check
Urgent level 2
70
Illness signal detected by analyzing personal health data
Urgent level 3
Rendering Š Xiaoyu Wang
18
Sudden illness like heart attack, fainting, out of control - autonomous searching for hospital - autonomous call for ambulance - autonomous driving to hospital - inform relatives/friends
capture camera eye tracking sensor voice control biosensor fingerprint identify
Personal health story
sensors detect the health problems and warn the driver to stop the car and call for help/ inform emergency contact. When the driver out of control, emergency mode will be started, and change to autonomous driving & decision making mode.
REAL-TIME MAPPING FOR AWARENESS & CARENESS
Voice mapping on back window Slow down, traffic jam :(
Rendering Š Xiaoyu Wang
Source: Youtube 2014 Mercedes-Benz S-Class video
Touch mapping
Voice mapping
What you write on touch pad, will be immediately flipped horizontal and appeared on the front window, so that your sweat/baby/friend will get you message and find you. Show your care and make more fun in the life!
As touch mapping seems to be dangerous while driving, the touchpad is dis-active in the driving mode. However, you can use the voice mapping by speaking to the touch wheel and mapping your care on the glass.
19
www.was-ist-smarthome.de Virtual Showroom for Smart Home products to improve user experience
20
General
Competence
Tools
Award
Research Project of SmartLive
Qualitative user research
Adobe Creative Suit (PS, AI, ID)
Smart Home Award 2016, Germany
Teamwork with Annika Placke
Workshop organization
3D modelling ( Rhino, 3ds Max)
3.place of the Category: Best Student Achievement
Date: 04/2015 - 08/2015
Participatory design
Video production (Premier)
Mentor: Prof. Dr. Volker Wulf
Scenarios generation
Web design (html, css)
Developed in research project Scenario based video production
About the project
In this session, the existed solutions in the market were compared in terms of design,
The showroom which in collaboration with the research project
innovation, use of language and informa-
Smart Live was emerged with a Living Lab that includes aca-
tion content. This showed that the most
demic partners, companies and test households, aims to explore how to acquaint end-users with a basic insight into smart
manufacturers are limited to one or two
Market analysis
home concept comprehensibly.
types of means of expression that lacked a successive enlightenment of information. Based on the analysis of semi-structured
To this goal, it will be firstly researched, which requirements and
interviews that were conducted with
content can be provided for an appropriate information plat-
households in the project Smart Live, per-
form with higher usability and with an improved user experi-
sonas were created that presented the
ence. Hence, the market analysis has been made to study the state of the art in smart home market. In addition, interviews and workshops with the households were hold to realize the
typical user group who are in age of 30 to
Interview & Personas
user demand and discover the practice-oriented use cases,
design and conception phase.
had evaluated what information path was best suited for Smart Home. For this pur-
As a result, we designed and developed the website:
pose they have read information, clicked
www.was-ist-smarthome.de that explains the topic Smart Home
video with an amount of information is originated especially for
nas served as a foots-tone in the further
The participants of the Living Labs (N = 5)
which have been developed by the end-user themselves.
with logical and comprehensible sequences: The explanation
60 years with family at home. These perso-
through an interactive showroom and
Workshop 1 Information
watched a video. Notes on predetermined topics and discussion based on think aloud were required.
beginners and those who interested in smart home, one more
In the second part it came to find prac-
step, audiences will be guided further in house overview, smart
tice-oriented applications of smart home
scenarios and detailed product list etc.
Backstage
products. Participants recorded this on
Award Ceremony
their daily routines and supplemented these with smart home components in a
Workshop 2 Scenarios
storyboard, which was highlighted and discussed during the workshop, and visualized later in form of smart scenarios.
21
Workshop
Visualize the smart scenarios which generated by end user
Safety
Energy saving
Living Lab User participatory design 22
Comfort
Overview of smart living space
Smart Home products Classification & Infos
23
Living lab service User Studies
24
Just what I am looking for :)
25
TruNet research project P2P file transfer platform for privacy
26
General
My work
Research Project of TruNet
Qualitative user research analysis
Concept & Interface design
Date: 07/2015 - 06/2016
Market analysis
Wireframe & Prototyping
Mentor: Wan Lin, Prof. Dr. Volker Wulf
3D Logo & 3D Printing
User test and evaluation
P2P file transfer platform for privacy About the project Lots of people may not know that the in cloud uploaded data are saved in several local containers called server. With the
Together with the company expeer GmbH of Bonn, we are developing an application that allows people using the peer-to-
scandal of Information leak on the cloud, people are drawing more attention to security and privacy protection on the
peer technology exchange all types of files as well as video, sound and enable the communication through instant message
internet. Otherwise, with the development of Internet people don’t need to exchange their photos through an outdated CD
or video chat. P2P means that digital content is transferred directly from one computer to another, without any uncertainty
or printed photo album. The question is, how can we exchange our data directly and securely to our friends without being
stopovers on different locations. The main feather of the application is to protect user’s privacy and with user-friendly in-
afraid of Information leakage? TruNet will deal with this concern.
terfaces. Trunet can be used not only on PC, but also expended on mobile devices (smartphones and tablets).
Interdisciplinary team
Cross cultural communication
Empirical research with living lab
P2P for usable privacy
The TruNet team is a international team with the people who has
The collaboration in the team are mainly through remote com-
A living lab with several target users support the project with
The main feature of TruNet is to protect the user’s privacy dur-
different background. A project manager from China, two devel-
munication solution such as teamview, skype because team
their enthusiasm. They are the local seniors who are interested
ing the data transfer. Without using a server in the middle of
opers from Indian and Syria respectively. Two German students
members are living decentralized. The articulation work are
in new computer technology and willing to learn. The are taking
the system, P2P provides a possibility of directly data transfer-
take charge in the empirical research, and I am responsible for
made during the jour-fix meeting which is hold every two weeks.
participation in the whole process of development, from user
ring. Another web technology called WebRTC enables real-time
design. The project is also in cooperation with a company who
With different nationality and major team members always
demand analysis to mockup test, usability test and evaluation
audio and video transmissions to promote the user’s aware-
provides the signaling server and back-end technology.
teach and learn from each other and make decision together.
in a iterative circle.
ness of safety.
27
Living lab empirical research
Preliminary survey
Usability test
workshop
Start Interview+Media diary+Feedback interview
End user participant workshop
Usability test in labor
Firstly, Information about how users dealing with media had been collected in
In the wireframe some of the application ideas were visualized in several vari-
While the test person are seniors who are not familiar with computer technol-
form of Media diary. Through the start interview, we explored the communica-
ation. User should feel free to imagination inspired by the mock-ups. Also they
ogy, the task should be easy to understand and continuously & vivid through
tion form in their social network and awareness of data protection.
brought some critical views to the existed idea and came up new ideas instead.
a story.
User need analysis
based on the result
System architecture
were built to orien-
High fidelity prototype
were built for the
from media diary and interviews. Find out the pain
tate the whole process of development. The Back-
user test which are highly analogical with a real software,
point and opportunity gap in the seniors group.
End P2P technology and signaling were developed
so that the seniors can understand the content easily
with a external company.
and not disturbed by the limitation of the prototype.
product, find their strengths and weakness about
Wireframe & Mock-up were prepared for
Refine based on user’s feedback
WebRTC implement, P2P file sharing and privacy
the workshop and modified based on in-group dis-
screen are captured and audio were recorded for the
protection.
cussion and internal evaluation.
following transcription and evaluation.
Market research to analyze the competition
ANALYSIS Design & Development 28
develop & dESIGN
REFINE & release
the
Design practice · overview
Understand
Point of view
Observe
Ideate
Prototype
Empirical user study
P2P file transfer platform
Prototyping
•
Daily use of media: which, when, how, with whom
•
P2P technology for security
•
Persona & scenarios
•
Social network: function, tel-communication, data transfer
•
Web RTC based technology for instant communication
•
Wireframe & Mockup
•
Data exchange channel: from, strengths, drawbacks
•
Video conference & Chat function
•
low-fidelity prototype
•
Data security awareness: purpose, experience
•
Add intimate acquaintance on the contact list
•
high-fidelity prototype
•
No server any more !
•
User interface design
•
html based Interactive prototype
Interview transcription •
7 Person from 6 household
•
Interview media 30-60 minutes
•
Media diary 2 weeks
•
Feedback interview 30 minutes
Person A
Inspiration from our living lab
awareness immediacy
Collaborate
security
Cloud=unsecure? Speed Communica6ve
Convenience Usability Risk on the internet
synchrony Face to face
Server
Storage
New technology? Yes!
Family-Sense of belong
•
6 household
•
2 groups divided
•
2 hosts and 2 observers
•
Person B
Test
Test Section 1 Low fidelity wireframe test in focus group •
Open discussion
•
Wireframe evaluation
•
Free drawing
•
Think aloud
Section 2 high fidelity interactive prototype test in labor •
Task oriented
User demand
•
Think aloud
•
Critical incidents
•
Feedback
•
Structual suggestion
•
Transcription
•
Expection on the project
•
Evaluation
29
Design practice · concept development Mockup draft
Framework of function Plattform, that can be used to manage and organize private files and exchange them with trusted person transparently
Product Vision
organize files exchange files
WHO: To trusted person HOW: Transparently
LOGO VI-Visual Identity
Visual Vision Colour Font
Product Identity
Slogan MI-Mind Identity
Security Value Proposition
Transparency Usability
Windows Mac
Plattform-Desktop
Extension：Mobile Devices Technical requirements
Local files Source of document
from outside devices terminal Device （PC)
Connection
Authentication Installation
Account Password
Emphasize Security
How?
Precondition-Both sides of sender/receiver is online simultaneous
A B
Mobile devices
How are we differ from other products
Interesting cases?
C
Camera
Use WLAN
TruNet
Personas
read only Right
D Storys? Habits?
Save to local forward public
Requirement analysis from User
delivered to
Anticipation?
read by
Sender-Upload/Transfer files
Wenn
Willing Unwilling
Awareness
Afraid of ?
File transfer
Who Shared to
Functional specification
Process of Transfer
Basic function
Receiver
Notification beginn/refuse to save/read/reward/.... Date
File information
Name Ort remark
Online Status of user
Offline Do not disturb search for friend
Contact list
Add friend Delete friend
Personalization
Setting
Calender additional function
Video Conference Bullentin Board Instant Message
30
Wo
Commented by
Critical Inccident?
3D Logo & 3D Printing
Saved by
Storyboard
Wireframe
TruNet P2P file transfer platform for privacy
31
Scenario based usability test Scenario 1: start with TruNet
Scenario 2: File exchange & communication
• Symbolic abstract icons
Scenario 1 is about the first time use of the software. The interactive pro-
The Scenario 2 is the case for advanced user. User are encouraged to ex-
• Unfamiliar vocabulary (interjected abstraction)
totype simulates the real situation how people step for step gets familiar
plore the application by their own, realize the basic function of in-box and
• Lack of feedback from system
with the application. In this case users are required to add a new friend
out-box, glance over the received files and try to send a file “ Trunet Meet-
Lack of error tolerance
Anna in the contact list, response the request of downloading the photo
ing” to more than one friends. A background transfer show the process of
Since the users are mainly seniors the system should tolerant them
collection while chatting with Anna.
data transferring would also be detected by the users.
Task based usability test Two cases are selected for the usability test. During the usability test, the seniors show a great interest in communicating with their friends and happy to share their own experience with them. The overall layout is easy to understand even by the people who seldom uses the computer. Moreover, some of them find different ways of sharing data while others focuses persistent on one method. The software would provide multiple choices for the uses in oder to suit different mental models. Nevertheless, some of the usability problems were fund out, based on ISO 9241-110 Ergonomic requirements for office work with visual display terminals Part 10: Dialogue principles. All the problems had been valued and interfaces and some unexpected interaction has been improved in the coming version. Nonconformity with user expectation • Button functions • Icon identity • Folder status Lack of Self-descriptiveness
do the task repeatedly without leading to gravely errors. 32
Usability Test
Screen capture Audio recorder blank paper
Host
Test person
Observer
Evaluation based on ISO 9241
33
General
Keywords
Teamwork with
Competence
User experience design project
User experience design
Christiane Haßlberger
Design methods
Date: 07/2015 - 10/2015
Gesture Control
Daniel Wiegärtner
Teamwork capacity
Mentor: Prof. Dr. Gunnar Stevens
Interactive tattoo & Social network
Sebastian Hörstmann
Video Post-production
34
DESIGN PROZESS Ideefinding & Recherche
Ausarbeitung
Visual design & Interaction design
Video Prototyping
• • •
• • •
• • •
• •
Personas Use cases Designprinzipien
Markenkern Interactionskonzept Mockups
Video Drehnen Video Post-production
BRAINSTORMING
Brainstorming 5-3-5 method Worst case idea
Body modification E-INK Luminous haptic
Biosensor Interactive tattoo vibrate
Vibrate tattoo
Verbundenheit
smell
Health ink
sound
Data Tattoo 35
ZIELGRUPPE
Familie
Freundschaft
Partnerschaft
36
PERSONA
MOOD BOARD
Social Tattoo for personal communication
DESIGNPRINZIPIEN
MAIN FUNCTIONS
SELECTED USE CASES
37
TATTOO DESIGN
APP DESIGN
Auswahl
aus
vielen
verschie-
denen Tattoo-Grundformen (Floral, Wellen, Geometrisch, Vögel, Feuer, Totem, Wolken, Blätter, Chemie)
38
SCENARIOS & GESTURE CONTROL
Gefühl teilen
Geht’s dir gut?
Treffen
39
VIDEO ABSCHNITTE 40
Das Konzept „Linked“ zeigt auf, wie interaktive Tattoos in Zukunft genutzt werden könnten, um mit nahestehenden Menschen wie Freunden, Familie oder dem Partner direkt und in Echtzeit zu kommunizieren. In Kombination mit einer App soll das Social Tattoo insbesondere für die Beziehungspflege auf Distanz, bei persönlichen Treffen und in Notfall-Situationen zum Einsatz kommen.
video prototype
41
Siegen Discovery Digital city guide for siegen via serious games
General
Keywords
Teamwork with
Competence
Usability challenge project
Serious gaming
Malte Sellmer
Qualitative research methods
Date: 11/2014 - 04/2015
Digital city guide
David Struzek
Learning theories
Mentor: Prof. Dr. Volkmar Pipek
HCI & UCD & Usability
Ramiya Ella Vasudeva
Game development
42
Iteration
ISO 9241-210:2010 Ergonomics of human-system interaction Part 210: Human-centred design for interactive systems
Learning by playing
Game playing
Learning theories
UCD method
Walking through the city during playing games! The new con-
The player chooses the difficulty level which connected to a pre-
Behaviorism: the tasks will be repeated unconsciously in the
The whole design process based on the part 210 of ISO 924:Hu-
cept of digital city guide will provide a possibility for tourist to
defined route. By each station they should solve the riddle by
different circumstance to stimulate the reflex arc continuously.
man-centred design for interactive system. The empirical re-
acquire knowledge and experience the city culture in a espe-
searching for the related artifacts or getting tips with gold coins.
So that the player have an deep impression on the knowledge.
search methods has been used to understand the state of the
cial way. Instead of a dreary guided tour, playing games is more
When the certain task have been accomplished at one station,
Cognitivism: the tasks should firstly be realized by the player
art and user needs. A semi-structured interview with manager
attractive for children even adults. The tourists will have pro-
the player receive gold coin and clues which are related to the
actively. The assimilation of information is not a passive but an
of Society of City Marketing in Siegen has been hold to get a
found understanding of the city by discovering the historical
next station, as reward.
active process.
overview on travel industry. Questionnaire has been published
tour spot and cultural relics by themselves and solve the prob-
Rucksack stores all the clues the player collected.
Constructivism & situated learning: To explore and exchange
on-line to collect a range of information and user demands.
lems at each spot. Task to be solved will be shown on the screen
Map shows the holistic view, the route and their destination.
the knowledge in a community of practice in the situated envi-
Based on the result of empirical research new concept were
through the Augmented Reality technology.
Multi-player module: Play with competition and collaboration.
ronment on location.
generated , developed and evaluated in iteration. (Figure above)
43
Digital city guide through serious games
1
Understanding Expert Interview - City tour: state of the art
Questionnaire - Demand on city guide
Serious games
A semi-structured interview with manager from Society of
Four main aspects were asked in order to collect wide range of
Serious games are applied in a variety of do-
City Marketing in Siegen has been hold to get a overview on
data from end users.
mains, for instance, education, health care, man-
travel industry in the city.
• Interest in the city (historical, cultural) and city tour.
agement, aims to improve the motivation of par-
The tourism department organizes city tour with different
• Usage of mobile devices
ticipant and to achieve the task more efficiently.
theme every year, such as traditional city tour, historical city
• Type of games
Some Applicatio found in tourism branch are
tour, city tour for women, drama tour and kinder tour along
• Future prospective
outdated and lack of theoretical support behind
the city wall etc. It has proved that the classical city tours are
them. We found a big gap and great potential in
no more attractive for the new generation with the following
this immature area.
critical points:
Market analysis - status quo and relative products
2 3
Opportunity in Tourism
• Most local citizen are not willing to join the city tour unless
• More enjoyable compared with normal city tour
there’s an activity such as film festival.
• More attractive to the young people
• The young citizen don’t know their city well but not inter-
• Encouraging communication and collaboration
ested in it.
between family members.
• The most tours are guided by a local guide or audio guide,
• Educational purpose through a immersive story
the route are predefined which is not flexible enough.
• Schools are willing to take part in the historical city tour,
but the teenagers only regard the tour as a required course. • For educational purposes the manager have tried to set tasks for participants during the tour, but haven’t got satisfied result.
Motivation · Edutainment · Enjoyment · Flexibility · Collaboration
44
LINK to the questionnaire
Digital city guide through serious games
Idea generation Concept specification User requirement were collected after user research, feature set should be specified by specifying the context of use. The advantages and disadvantages of following point were discussed and weighed. Such as whether the collaborative modul, AR/VR technology should be used, if player can get help from local citizen or from the city tourist office etc.
45
Digital city guide through serious games
46
Storyboard & UI Flow
Digital city guide through serious games
Layout
RIDDLE-Reinforcing stimulus for learning MAP Explore the city during the game
DIFFICULTY LEVEL- Individualization MULTIPLAYER MODUL- Context & collaboration
47
Rucksack-store the collected cues
Augmented reality Tips- Indirect cue to the solution, can be exchanged with gold coins Route Tourists are guided through a successive story which includes a certain amount of tour spots. By solving tasks in tour spot A, player are rewarded with gold coins and cues directed to the next destination, meanwhile the spot B will be unlocked. The collected cues and tips during the games are stored in rucksack, which will be crucial to the next step.
Reward system Players get gold coins by solving the riddle. Gold coins can be used to exchange tips when they need help. When a wrong answer is given, player loss the coins and get another question, with the same as the first one.
Scene in virtual game changed with the real environment
The camera recognizes the target object, a task embedded game will be shown on the screen
To Learn the city with a game, accompanied with a friendly virtual guide
49
Date
Project for
My work
08/2013
starboardsoft.de
Interaction design UI design
SAILORSTOOLBOX 50
The App For Nautical Calculations
Sailorstoolbox-The App For Nautical Calculations
Plan & Process
FUNCTIONAL SPECIFICATIONS
Design and development based on the book “The Elements of User Experience” by Jesse James Garrett, due to the core principles of interaction design in the practice
Design-Phase
Planning
Layout-Phase
Interactive Prototyping
GUI Production
Layout final
Product Objectives
UI Flow
Layout overview
visual Style
Prototype
Corrector
Interactive Material
Details
Layout for each Interface
Interactive Mode
Iteration
User Testing
Style-Renderings
ready for Layout
Final Layout
51
Sailorstoolbox-The App For Nautical Calculations
WIREFRAME
PROTOTYPING
VISUAL STYLE usual
simple
abstract graphic
complicated
concrete photo
strange
52
Development
53
54
RESPONSIVE FLEXIBLE
55
HE&M GUIDER
Graduation Project (BA)
Keywords
Date: 06/2012 - 06/2013
Smart health
Flexible display
Product development
Excellent Graduate of Beijing
HEALTH CARE SERIVE DESIGN
Mentor: Prof. Dr. Jingyan Qin
User-centered design
Interaction design
Service design
Excellent Graduate Design
56
Award
CONTENTS Plan and methods In the Fast-paced, high-stress life, more and more people are faced with the “sub-health” problem. HE&M Guider designed from user’s needs, used user-oriented , user-participated design methods, aims to provide an easy, satisfying, efficient and effective services during the Health examination process and the health management process with a better user experience.
UCD METHOD
DEMAND ANALYSIS
USER STUDY
SERVICE DEFINE
PROTOTYPING
EVALUATION
DELIVER
Social Background
Qualitative Method
Brainstorming
Paper Prototyping
Cognitive Walk-Through
Publication
PEST Analytical Method
Field Research
Card Sorting
Product Prototyping
Usability Test
Exhibition
Market Research
In-depth Interview
Journey Map
Video Prototyping
Field Test
Special Case Analysis
Quantitative Method
UI Flow, Blueprint
Questionnaire
System Map 57
User Study
Background
Demand analysis-social background
PEST analytical method
Economic
Political
Health Problem 健康问题
Sub-Health Problem 亚健康问题
high medical cost government pushed for anhealth care reform medical funding shortfall
changes of disease spectrum
Aging of population
To strengthen the construction of digital health information
人口老龄化
疾病谱的变化
Define
In or Demand of Health Careness
Prototype
Devices and diagnostics are also going digital
Serious health problems
E-Health
An aging population brings demand of medical services
= Tele-Health + M-Health+...
change of health consciousness telemedicine, personal medical devices wireless widespread monitoring and controlling system.
Technological
Evaluation
In order to enhance people’s awareness of their own bodies and health status, health care should be put on the agenda.
clinic
The existing health care system is not perfect
Social
M-health
E-health In the Fast-paced, high-stress life, More and more people are faced with the “sub-health” state of poor health. the demand for people on Medicare system and the demand for medical services will increase dramatically.
Mobility
Immobile
Deliver
Tele-health
non-clinic 58
Waiting to to register
Find way
Pay the fees
Details Get the medicine
Bank card Binding
Self-serviceRegister
blood test Waiting for the result
Be hospitalized
Background
NO. 301 Hospital
field research
User study
User study—process of health examination in China
therapy
process
get the medicine
fill in the table
payment
make card
pre-diagnose
table of process
test report
Evaluation
Hospital2-Haidian Hospital
make card
fill in the table
registration
laboratory test
examination
payment
Deliver
Haidian hospital
Prototype
Define
Hospital1—No. 301 Hospital
community hospital 59
field research
Background
User study—Questionnaire survey & In deep interview
China
50 45
Define
User Study
40 35
Taipei
Delivery method——Internet Questionnaire Basic Information：3 Question about health：10 Improtance of health examination，4，5 ，10 questions of community health examination 6，7，10 Acceptance level of new health examination model 8，11，12，13
Impotance of Health Examination？ I don’t care Necessary,I have good habit of Body check up Very importent I want to know my physical condition
30 25 20 15 10 5 0-15
15-20
21-25
26-35
36-45
46-55
I want to go to the Health care center to... ?
Evaluation
Prototype
Wenn you go to health examination Active or regularly
Queue to register
Body check-up
Units organized medical examination
credibility is not high.
Ask for knowledge about Health
Wenn I feel sick
lack of time
Never
others
In-Depth interview Mr.Blue
>55
too expensive
Rader map Job: Arzt
Many years experience in the medical inspection, the inspection method and the
Ranking of relevant points according to their importance
To see a doctor Don't want to
User needs 自我需求 Self Demand 社会需求 Social Demand
status of the patients. Don't pay attention to
Deliver
his health
Mr/Mrs.Henry
Retired couple
Retired for many years, and tried in commu-
VIP channel/Special care
情感需求 Emotional Demand
Feedback/advice
交互需求 Interactive Demand
Real-time guid， At any time to remind
感觉需求 Sensory Demand
Environment/attitude
nobody come to help, and not convenient. They need relative to take care of at home
60
Private doctors， Door to door service
Based on Field Research/In deep Interview /Questionnaire survey
Evaluation
Prototype
Define
User study
Background
Brainstorming & card sorting
Deliver
Problems definition & ideas generation
61
System map & Service blueprint
SYSTEM MAP
INTERESTING OPPORTUNITY Process Guiding of situational setting during the test.
User Study
Background
Strategic Positioning
communication Using the Internet and mobile platform Video communication and tele-visit with doctor.
Equipment Define
Community offers the Equipment Situational experience, entertainment experience
Individual medical archive management
Evaluation
Prototype
Infographic, audio-visual
SERVICE BLUEPRINT User ACTIONS
Appoint online
authentication information
checking my identity
start to check
STAKEHOLDER MAP Get real-time Info. about your body
end to check
Get the result
APP ONSTAGE CANTACT PERSON
Record the info
Confirm the info
enjoy the service
route guidance
Remind rate of progress
Send message
Remind the time to get result
Confirm info
Line of visibility
Data and statistics
Send a remind
Data analysis
Blood test
Deliver
Communite with doctor
Line of interaction
BACKSTAGE CANTACT PERSON
62
Advice support
Blood test result
medical plans
Line of inner interaction
SUPPORT PROCESSES
Online App system
Cloud system
Blood test system
HIS Hospital Information System
Telecommunications system
Role and Interests of main stakeholders: ---Who can help you ---Who can supply service to you Based on cloud computing, this Project puts forward to build a convenient health services and auxiliary mobile health management platform. 1 The overall plan for the health service station —layout - service model - presentation - situational experience 2 To form a complete set of interactive design — easy process - a good feedback
locale Industry Service supplier
Hospital
Doctor
User community physical community hospitals examination volunteer demand private doctor healthcare industry Hardware Server seller maintainer relative !"#!$%&'()*
Medical Section Community Health services centre at home
Storyboard
Deliver
Evaluation
PREVIOUS SYSTEM
Prototype
Define
User study
Background
Journey map & Functional Specifications
NEW SYSTEM
63
Concept selection matrix
Evaluation
Prototype
Define
User Study
Background
Experience Blueprint / Concept selection
Intermediary
Porable Readable
Environmental benefit
operable
Deliver
Accsptablity of Technology
realize of Navigation function
realize of remind function realize of health management
Info. bear capacity
Good Feedback
64
Concept selection matrix
Select of information-bearer Print media E-paper Handhold device Google glass wristwatch E-card product concept App / pad
field research
INTERACTION MODE HE&M uses e-paper as screen, which can be pulled out from the handhold device. It re-
Evaluation
Prototype
Define
User study
Background
UI flow and Interaction mode
duces medical waste paper, which is energy saving and environmental. With handhold de-
collect, update, display and filter current information and help users to manage health Data,
PRIVACY CONTROL
just like a private health assistant.
Deliver
vice and RFID, the e-paper screen is helpful to
65
field research
Background
User study—Questionnaire survey & In deep interview
Participants walk through the tasks regarding health examination. Tasks
User Study
COGNITIVE WALK THROUGH
were given from how to make preparation for the body check-up, to use the guide during the check up and manage health data afterwards. Through the whole journey by doing tasks some of the problems in the system were detected. The blueprint have been modified several times to minimize usability problems until fulfill a great mass of user requirement.
FIELD TEST Define
Usability test in hospital has acquired amount of feedbacks from the end user. The concept of flexible display and the process of real time guidance have been tested. Positive feedbacks on the de-
Prototype
vice showed that a pocket sized guidebook with a potential of displaying large amount of appropriate information is welcomed. Some issues on the navigation have been discovered which will be
Evaluation
improved in further development phase.
USABILITY TEST In this phase the satisfaction degree of the product prototype and the way of interaction have been tested. It has proved that the size of device should suit for dif-
Deliver
ferent age of people since the fingerprint area is a barrier for small children. Problems in the UI flow has also been discovered by testing a flash made interactive prototype and paper prototype.
66
68
HE&M Guider HE&M Guider is short for Health Examination & Management Guider. It’s an electric guidebook which assists people to take the regular medical examination easily. The guidebook is designed to solve the problem occurred by medical examination in China. Face to the challenge of overwhelmed hospital, lack of private doctor and physical examination center in quarter, poor awareness of body check-up etc., the design work starts with qualitative research such as field observation, interviews aims to discover the user needs. The whole design is based on human-cen-
PREPARATION
REAL-TIME GUIDANCE
MANAGEMENT
befor the examination
during the examination
for your health
tered design method and iteratively in the process.
HE&M Guider play the roll of health assistant, which supports people to get information, find the road, remind to check as preparation and supplies real-time guidance during the examination, as well as provide health management service after medical examination.
HE&M Guider uses innovative flexible display as screen, which can be pulled out from the handhold device. It reduces medical waste paper, which is energy-saving and more environmental. It helps users to manage health data, just like a private health assistant.
69
Scenographic design
Pixelrock- Interactive Jacket, Stop motion film, Stage design for Hamlet... See more creative work on my personal website: www.xiaoyu-wang.com
Product design
Comming soon
To see the world, things dangerous to come to, to see behind walls, to draw closer, to find each other and to feel. — Walter Mitty
Xiaoyu wang Tel. +49 017672131796 xiaoyu.wang362@gmail.com www.xiaoyu-wang.com