UX Design and how to use research methods to test your designs before they're built and help mitigate risk.

1. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
USER-CENTRIC DESIGN
by Kyle Racki

2. What makes an experience?

3. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Useful
• Easy to use
• Learnable
• Aesthetically pleasing
• Evoke emotional response
Good experiences are

4. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
User-centric design puts users needs first.

5. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
User wants Business goals

7. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Test early, test often.

8. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
$$ Test here
Time

9. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Non user-centric
The last step is to hope and pray your assumptions were correct.
IDEA
SELL TO
STAKEHOLDERS
DETAIL SPECS FINANCE DESIGN/CODE LAUNCH/TEST SELL
IDEA
SELL TO
STAKEHOLDERS
MINIMAL
FINANCING
DESIGN CODEFINANCE LAUNCH REFI

10. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
User-centric
IDEA
QUALITATIVE
RESEARCH
UX RESEARCH VALIDATE USER TEST
QUANTITATIVE
MEASURING
SELL TO
STAKEHOLDERS
MINIMAL
FINANCING
DESIGN CODEFINANCE LAUNCH REFINE

11. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
How to get started.

12. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
1. Antecedent - Event trigger
2. Behavior - Causes or influences an individual
to act.
3. Consequence - Outcome you observe.
ABC
What behaviours do you want to change?

13. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

14. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Quantitative
• Design landing page
• Drive traffic
• Measure signups
Qualitative (UX)
• Contextual inquiry
• Surveys
• Group discussions
• Review competitors
roadmaps
Testing an idea with research

15. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Understand a pain point
• There is a paying market
• Product idea solves pain
• Testing validated product/market fit
• Sell to stakeholders, aquire minimal finance
Do you have a
business case?

16. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Case Study: Pitch Perfect

17. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
UX Research Methods

18. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
UX Research Methods
Interviews

19. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
UX Research Methods
Surveys

20. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
UX Research Methods
Group discussions

21. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
UX Research Methods
• Researcher
• Interation Designer
• Visual Designer
• Front-end Developer
• Back-end Developer
Build a team

22. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Making sense of the data.

23. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Create 2 or 3 stereotypes
• Detailed profile info
• Refer throughout design
User Personas
Making sense of the data

24. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

25. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Making sense of the data
• Context scenarios
• Key pathway scenarios
• Validation scenarios
• Magic scenarios
Scenarios

26. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Making sense of the data
Fogg - B=MAT
Motivation
Ability
Triggers fail
Triggers succeed

27. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
To change behaviour, all 3 need to be
present at the same time:
• Motivation (sensation, expectation, belonging)
• Ability
• Trigger
Making sense of the data
Fogg-Behavior Model

28. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

29. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• What is the core pain we’re solving?
• What behaviour are we hoping to change?
• What habits do we aim to create in users?
Minimum Viable Product
Making sense of the data

30. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Sketching concepts

31. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Helps you think
• Solve key problem
• Explore interation
Key page views
Sketching concepts

32. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Work out the flow
• Use scenarios
• Minimize steps
Sketching concepts
Sequencing

33. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Sketching concepts
Onboarding
• Orient new users
• Increase engagement
• Minimize abandonment

34. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

35. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

36. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Sketching concepts
Microdetails

37. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Invision let’s you drag
and drop multiple
image files and auto
replaces ones with
the same name and
automatically makes
title-case and adds
spaces.

38. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Pitch Perfect emulates
a desktop application
by allowing keyboard
shortcuts and right-
click contextual menu

39. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Sketching concepts
Team sketching

40. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Sketching concepts
Mental Models

41. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Prototyping

42. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
High vs Low Fidelity
Prototyping

43. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com

44. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Omnigraphle
• Balsamiq
• Adobe Fireworks
• Invision
Prototyping
Tools that work

45. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Prototyping
• Only prototype key parts
• Learn early, fail fast
• Measuring the success rate
Testing

46. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Build

47. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Name of section
• Freeze user testing while in production
• Use professional QA during development
• User test once complete
• Private beta
Methods of testing

48. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Launch and learn

49. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
• Stay user-centric
• Talk to the community
• Periodic polls and surveys
• Test new features
• Measure quantitative data
You are never done.
Launch and learn

50. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Thank you.
Kyle Racki kyle@headspacedesign.ca