2. Predictable = boring?
Fuzzy problems & fuzzy outcomes
2
In our projects the exception is the rule. We encounter fuzzy problems instead of clear briefings
and the outcome can be almost anything…
5. …and from Crisps to
Brain surgery
from Child safety seats to
Sleep monitoring Apps…
6. Product UX = Web UX
Goals & results, not content & conversion
6
Your web/marcom UX skills do not directly translate to the IOT. Product UX is about goals and
results, not about content and conversion. IOT requires a different skill set for UX designers.
Some examples are found on the next slide...
7. Web UX Product/service UX
Goal Sell, convert, communicate Reach a goal, do a job
Drive Content Task/goal
Involvement Before moment of sales After moment of sales
Deep knowledge Psychology of sales & conversion Daily use of product
Knowledge leverage Web standards, Frameworks, Templates Research methodology, mindset, no templates
Experience focus A good feeling about the product/service Added value (new capabilities, time saving)
Data input Quantitative, Market data Qualitative, interviews, observations
Validation Metrics, A-B testing User testing
Context Mobile or Desktop Anything (coffeemachine to car HUD)
Analogy Show the customer what´s on the menu To help a user Cook a dish
Example Corporate website, theater site, webshop TomTom, Phone operating system, self check-in system
Majority of IOT projects benefit more
from product/service UX skills
8. Benefits Multidisciplinary, Product Design Mindset
IT
Technology
UX Design
Communication
Persuasion
Graphic Design
Beauty
Product Design
The User
In Product Design
Education & Culture
a user-centered mindset
is the default.
9. Multidisciplinar
On a new level
9
If you only employ webdesigners or UX designers. Or if your focus is only on software or
electronics, You will have a very hard time.
Your team should at leaest include experts on the human factor, the business factor, the digital
tech and last but not least the physical tech
10. 10
System Architecture
Connectivity design
Parts Sourcing
Insights
Observation
Interviews
Visual Design
Aestetics, Motion Design
Engineering
Injection Moulding
3D CAD
Electronic Design
Connectivity
Electronics prototyping
UX Design
Information Architecture
Interaction Design
Product Design
Industrial Design
Software Prototyping
Interaction Prototyping
Prototype software
Hardware Prototyping
3D printing
the product
In-house people & skills enlisted for designing
a medical communication device
Click here…
11. Atus Communication for medical professionals
11
Wearable connected medical
notification device with
ePaper display
Mobile App for additional information is
connected with Bluetooth LE Badge https://www.youtube.com/watch?v=RFIkrXPCc_8
App https://www.youtube.com/watch?v=OADd9Pwk3vQ
12. User Insights
Vital to get a grip on complexity
12
Many of our projects are often complex systems with multiple touchpoints.
Humans are not so great at understanding systems. Getting the tricky human factors right is vital
for Business Success. So this requires thourough User Research.
13. 13
Observe things with you own eyes
(photos taken during actual brain surgery)
The wireless operating room is not there yet
It’s just not safe enough
But cables are a usability and safety issue too.
Accept the wired reality and solve the spaghetti
14. 14
Product streamlining brain surgery for Sapiens…
Scenarios for optimized OR Workflow
MRI Operation planning ething
Software Suite... Implant remote control for patient
15. Physical Digital
Simultaneous & under one roof
15
Only by developing the Physical and Digital part of the UX simultaneously, under one roof, you get
a truly integrated UX
16. 16
Provide Context already while
designing. (Cardboard model)
Build the Physical experience
so you can test the Digital one.
(DIY Heads Up Display)
Hacked together from
3 screens, 2 beamers, gesture
sensors, arduinos, and a NUC
the product
18. What’s it mean?
For your creative team
18
If you do this kind of projects you cannot approach your company as a production line you can
finetune. One of the few common denominators in these projects is multidisciplinarity and a
human centered mindset.
19. Team & Process How we work now…
Varies per team…
Design researcher
Social Designer
Electronics expert
Aero Dynamics expert…
Product
Designer
Product
Designer
Product
Designer
Maverick
Mech
Engineer
Mech
Engineer
Research
& Strategy
Team
lead X 6
“product” teams
Interaction
Designer
Interaction
Designer
Interaction
Designer
Interaction
Designer
/prototyper
Visual/Motion
Designer
Developer Deveoper
Team
lead
X 1
“UX” team
20. Team & Process How we want to work…
Product
Designer
Product
Designer
Product
Designer
Maverick
Mech
Engineer
Mech
Engineer
Research
& Strategy
Team
lead X 6
“product” teams
Interaction
Designer
Interaction
Designer
Interaction
Designer
Interaction
Designer
/prototyper
Visual/Motion
Designer
Developer Deveoper
Team
lead
X 1
“UX” team
?
› Optimal team size?
› Multidisciplinary vs learning from peers…
› Embed experts or concentrate them?
› Project team vs home team?
› Practical aspects…
23. User testing
Early, on-location, qualitative, personal
23
Big decisions (hardware, costs, connectivity) are taken early. Validate them early with a user test
Context is often non-standard and very relevant, so test on location
Qualitative research. You should see where people feel friction, not how much % likes button A
You should be present in person to witness and interpret every little frown.
25. Why User-testing : less risk, better product
25
Not all user-testing is the same
The why of user testing is more easily understood if we
distinguish between two types of testing
A: Usability concept testing
- The sooner usability issues are identified, the lower the impact
(both in cost, and lead-time) of correcting them
- Usability concept tests focus on identifying usability issues,
they are designed to quickly produce actionable insights and
improvements, not quantifiable data
- Research shows that even a small group of participants (4-8)
will identify up to 90% of usability issues
- That’s why VanBerlo likes to test designs early in the concept
phase. We rather test 3x with 8 people during concept design
than once with 30 people at the end of the road
- Usability concept tests are generally done with basic prototypes
that focus on usability, not on styling. This keeps costs down
and allow the team to test multiple times
B: Acceptance testing
- Go/nogo decisions (project to next phase) have a big impact on
the budget and are ideally backed-up by an acceptance test
- Acceptance-testing is done to test the acceptance of a concept as
a whole, not to correct mistakes and sharpen the design.
- Number of participants is generally larger (e.g. 30), partly to be
able to produce quantifiable data. Level of “fidelity” is often higher
because generally both usability and styling are tested
- Implications of a negative test result are big. That is why (early)
usability concept testing (type A) is needed as well
Role of VanBerlo
- Usability concept testing: Extensive experience at VanBerlo.
Should be informal, done by the design team in the presence of at
most 2 client stakeholders (design, not marketing)
- Acceptance testing: Test preparation (e.g. prototype & script) can
be provided by VanBerlo. However, involvement client for
participant selection and general organization is advisable
- Presence of multiple types of client stakeholders is customary
26. How VanBerlo Usability Concept Testing
26
1: Scope & Context
- Agreement on goal of the test and use-cases (input for Script)
- Agreement on context (in studio? on-site? on-street?)
- Practical aspects (internet connection, what device to test on?)
2: Script, Recruiting & Prep
- Creation of tasks to be presented to the users (based on use-
cases) and test-script to guide the participants during the test
- Recruitment. Usability Concept Testing is mostly done with ad-
hoc participants, unless your target group is very specific such
as air traffic controllers, surgeons etc.)
- Location. Usability Concept Testing is mostly done on the
studio location, unless required otherwise (e.g. Running app)
3: Interactive Prototyping
- Prototyping platform selection (iPad?) & Software (e.g. Edge)
- Creation of interactive prototype with the functionality to test the
selected use-cases. (more use-cases equals more costs)
- Test-run
4: Testing
- Half or Full day of testing, generally done at VanBerlo location
- One VanBerlo person moderates the test using the test-script,
another is present for observations and notes
- Something
5: Actionable conclusions
- Test-results are talked through with the client on the same day
and conclusions are jointly drawn up and documented
- Possible optimizations are discussed with the client and
documented. These optimizations are starting-point for the
remainder of the concept phase
- Very limited documentation, focus on design iterations
Outsourcing
- For Acceptance Testing, step 2 (especially recruitment) may be
outsourced out to limit the budget required
27. How Things we do/use
27
Scope &
Context
Script
Recruit
Prep
Create
Prototype
Test Conclude adjust design
Platforms:
depends on
Prototype functionality
Concept Phase
depends on
nr. of participants & locations
Software:
Circle size gives some indication
of the relative effort involved
depends on
Recruitment
Usability Concept Test 1 Usability Concept Test 2 Acceptance Test
28. What Examples & references
28
Made with Edge Animate, PhoneGap
(and some JavaScript)
33. 33
use learning specs
Whentouse
Easytolearn?
Support&Community
experience(who)
Device/Screens
On-Devicetesting&
ClientSharing
Team&Collaboration
MotionDesign
Multi-screen
Accesstosensors
Scripting
Linktoback-end
Invest?
Visual Editor Prototypes are created by placing images and components on a canvas, much like Adobe Illustrator or Sketch, not so flexible. Very WYSIWIG
Atomic
Advanced motion/animation
design. Multiscreen + timeline
oo oo -
phone &
tablet only
link yes
easing +
timeline
yes no no no try
Axure
Advanced functionality, not so
good in motion Design, clunky
interface
o oo
Pieter, Bart,
Rosel
all link yes basic easing yes no yes (own) no yes
Edge
Advanced motion/animation
design. Timeline + Javascript
o oo Pieter all link no
easing +
advanced
timeline
no no yes (JS) no yes
Invision
Simple click-throughs, version
management, collaboration
ooo ooo - all link yes easing yes no no no try
JustinMind
Advanced functionality, not so
good in motion Design, clunky
interface
o o - all link yes no yes no yes (own) data import no
Marvel
Simple click-throughs, sleek
interface
ooo oo -
phone &
tablet only
link yes ? yes no no no no
Pixate
Advanced motion/animation
design
oo ooo Koen
phone &
tablet only
native app
(iOS+ Andr)
yes easing no x no no ?
Principle
Advanced motion/animation
design multiscreen + timeline
ooo Koen
phone &
tablet only
native app
(iOS+ Andr)
?
easing +
timeline
yes no no no try
Proto.io
Advanced motion/animation
design
ooo ooo Koen all
native app
(iOS+ Andr)
yes
easing +
timeline
yes x limited no ?
34. 34
use learning specs
Whentouse
Easytolearn?
Support&Community
experience(who)
Device/Screens
On-Devicetesting&
ClientSharing
Team&Collaboration
MotionDesign
Multi-screen
Accesstosensors
Scripting
Linktoback-end
Invest?
Patch Based Prototypes are created by connecting “Patches” that represent code elements and functionality. Very flexible, not very WYSYWIG
Origami/Avocado
Advanced motion/animation
design
o oo x
phone &
tablet only
- no ? ? x ? no no
Form
Advanced motion/animation
design
oo ooo Koen
phone &
tablet only
native app
(iOS+ Andr)
? easing somewhat x limited ? try
Noodle
Advanced motion/animation
design
oo o Ester ? ? ? ? ? ? ? ? no
Code Based Prototypes are created by connecting “Patches” that represent code elements and functionality. Very flexible, not very WYSYWIG
Framer
Total flexibility because code
based. No Wysywig
o ooo Bart, Tom all link no yes (code) no no yes yes yes
?
?
Other criteria:
Developer Handoff
Price