Slides from a workshop at The Net Value, Cagliari 03/2016 Your product is perfect and users are stupid. You are developing for a long time, following the perfect idea, your assumptions, you are not wrong… or not? In this workshop you will understand the foundation of user experience. What UX is, why it is important and how you can start adopting it in your processes.

1. UX IS FOR LOSERS

2. “You’ve got to start with the customer
experience and work backwards to the
technology.
-Steve Jobs

3. WHO AM I?

4. FEDERICO PIZZUTTO
➤ User Experience Director
@Sounday
➤ Interaction Design Foundation
- Cagliari
Local leader
➤ UX FUN supporting member
➤ UX practitioner
and… dad ;^>

6. UX IS FOR LOSERS
…or not?

7. “You can blame the ‘stupid user’ all you want,
but you still have to staff those phones with
expensive tech-support people if you want to
sell or distribute within your company software
that hasn’t been designed.
-Alan Cooper
http://www.cooper.com/

8. AGENDA
➤ Who you are?
➤ What is UX?
➤ Why should we care?
➤ UX is a process
➤ UX + Data
➤ All you can eat (tools, processes, methods…)
➤ Yes, but… how can we start integrate UX
processes?
➤ Let’s try…

9. WHO ARE YOU?

10. WHO ARE YOU?
➤ Who are you?
➤ What are your goals?
➤ What are your desired outcomes?
➤ Why are you interested in UX?

11. UX ?

12. USER EXPERIENCE

13. USER EXPERIENCE
The official definition of User Experience (UX), is:
“A person's perceptions and responses resulting
from the use and/or anticipated use of a product,
system or service”
(ISO 9241-210:2010, subsection 2.15)

15. USER EXPERIENCE
User experience (UX) focuses on having a deep understanding
of users, what they need, what they value, their abilities, and
also their limitations.
It also takes into account the business goals and objectives of
the group managing the project.
UX best practices promote improving the quality of the user’s
interaction with and perceptions of your product and any related
services.
Source: usability.gov

16. USER EXPERIENCE DESIGN
The term ‘User Experience Design’ was first coined by Don
Norman in 1995 while he was the vice president of the Advanced
Technology Group at Apple.
He said:
“I invented the term because I thought human interface and
usability were too narrow. I wanted to cover all aspects of the
person’s experience with the system including industrial design,
graphics, the interface, the physical interaction, and the manual.”

17. UX ≠ UI

18. TERMS & DEFINITIONS

20. WHY SHOULD WE CARE?

21.
Create Products & Services that
align with Business Objectives,
solving users problems and
answering their needs.

22. HOW?
Accomplishing your business
objectives is simple,
just focus on your users

24. Understanding the user journey
Users are more than 1s and 0s. They’re people who are looking for the perfect solution to
their needs. The user journey represents a scenario in which a user might interact with
your product or service. The ups and downs on the graph correspond to how they are
feeling at any given point.
source: www.dtelepathy.com

25. Identify key opportunities
Identifying the journey touchpoints that are causing problems for your users creates
objectives we can work on together. For example, if your users are visiting your website but
not converting, we may choose to focus our efforts on improving the experience within the
acquisition touchpoint. Pinpointing friction focuses our strategy and creates measurable
impact.

26. Remove Friction
Designing a fluid experience for your users is the best way to improve their journey
and accomplish your objectives. After the friction has been removed, your users will
be able to easily use and interact with your product or website. We take care of your
users so they take care of you.
source: www.dtelepathy.com

27. UXD
IS A PROCESS

29. CUBI: A USER EXPERIENCE MODEL FOR PROJECT SUCCESS
source: https://uxmag.com/articles/cubi-a-user-experience-model-for-project-success

32. GOOGLE DESIGN SPRINT

33. Source: https://www.smashingmagazine.com/2011/03/lean-ux-getting-out-of-the-deliverables-business/

35. ITERATE

36. CONFUSED ?

37. UX + DATA
measure

38. DATA, A VERY IMPORTANT PART OF UX
➤ Data - driven decisions
➤ Quantitative and qualitative data
➤ Misure the UX
➤ …Find opportunity

39. Analytics, heatmaps, funnels…

40. DATA-DRIVEN VS DESIGN-DRIVEN (ICEBERG)

41. METRICS CHECKLIST
a good metric...
...measures the usage of your
product by a person. The usage
should be specific to features that
deliver value to your user.
a great metric...
...makes you look at all the
other metrics and say “none of
those other numbers matter if
we donʼt get this right first.”

42. METRICS CHECK

43. TOOLS,
METHODS
AND…
All you can eat

44. From UX Team of One
by Leah Buley

45. UXD METHODS (…SOME)
➤ Stakeholders interviews
➤ SWOT
(competitive review, content audit, heuristic evaluation)
➤ Strategy workshop
(artifact from the future, faqs, Storyboard, Kano Models..)
➤ User Research (surveys, guerilla, card sorting)
➤ Personas (proto-personas)
➤ Users Journey
➤ Moodboards, storyboards
➤ Users and tasks flow
➤ Red Routes
➤ IA / Sitemap
➤ Sketches & Wireframes
➤ Mockups and prototypes
➤ Usability Testing
➤ Metrics & analytics tracking (eyetracking, A/B testing, )

47. WTF?

48. WHY USER RESEARCH?
➤ It is cheaper to test assumptions and iterate with interviews,
mockups and prototypes before the product launch.

49. USER RESEARCH METHODS

50. PERSONAS
➤ A persona is a character that
can represent a group of
users, with demographics,
behaviours, needs, goals
➤ They are filled with information
derived from User Research
methods (interviews, etc).
➤ Good personas are realistic
➤ Use as reference
➤ Evolving personas (data,
research, etc.)

51. Persona examples

52. USER JOURNEY
➤ A series of steps based on a Scenario
where to show the journey of the user
interacting with our product.
➤ Demonstrate the way users currently
interact with the service / website /
product
➤ Demonstrate the way users could
interact with the service / website /
product
WHY?
➤ Demonstrating the vision for the
project
➤ They help us understand user
behaviour
➤ They help identify possible
functionality at a high level

53. Identify key opportunities
Identifying the journey touchpoints that are causing problems for your users creates
objectives we can work on together. For example, if your users are visiting your
website but not converting, we may choose to focus our efforts on improving the
experience within the acquisition touchpoint. Pinpointing friction focuses our strategy
and creates measurable impact.

55. USER FLOWS
➤ Create your user's flow based
on the scenarios you created,
you can use it later to review
the journey and create
wireframes on top of each
step.
➤ Map the main steps of a
scenario, validating persona
and assumptions

57. Youtube App Tasks Flow
CHOOSE PACK APP DASHBOARD METADATA
UPLOAD
PAYMENT FORM
INFO
UPLOAD
This action is for WAV files when you
choose Sound Recording
This action is for WAV and JPG files
when you choose
Sound Recording + Art Tracks
METADATA
This is for Album and Track data
CHOOSE PACK
Here you can define your
pack. There are 4 packs
per each delivery type:
4 packs for Sound Recording
4 packs for ST + Art Tracks
INFORMATIONS
Info about specifications or how it works.
First time only.
Design for no content.
TASK FLOWS
➤ Task Flow gets you thinking
about how people really use
your products/service
➤ Identify where and when there
is a potential fail in the flow
➤ Document the “in between”
transition from one step to
another

59. RED ROUTES
➤ The key activities that people
expect to be able to complete
with the system: these are the
reasons why people have
purchased it.
➤ How many users need this
function?
➤ How often do users need
this function?

61. SKETCHES AND WIREFRAME
➤ Sketch let you explore quickly
different directions
➤ Sketching is cheap and avoid
perfectionists. Focus on the
main idea and not the details.
➤ Wireframing (lo, mid, hi) is the
way to go to annotate in
details the skeleton and the
supposed behaviour and
Interaction

62. Examples

63. HEURISTIC EVALUATION
➤ Heuristic evaluation (Nielsen
and Molich, 1990; Nielsen
1994) is a usability
engineering method for finding
the usability problems in a
user interface design so that
they can be attended to as
part of an iterative design
process. Heuristic evaluation
involves having a small set of
evaluators examine the
interface and judge its
compliance with recognized
usability principles (the
"heuristics").

64. HEURISTIC EVALUATION (UI)
➤ Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
➤ Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented
terms. Follow real-world conventions, making information appear in a natural and logical order.
➤ User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without
having to go through an extended dialogue. Support undo and redo.
➤ Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
➤ Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate
error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
➤ Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information
from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
➤ Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to
both inexperienced and experienced users. Allow users to tailor frequent actions.
➤ Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes
with the relevant units of information and diminishes their relative visibility.
➤ Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a
solution.
➤ Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any
such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

65. MOCKUP AND PROTOTYPE
➤ We create mockup to better
communicate wirth
stakeholders
➤ We create Prototype to test
early the UI and validate the
work. Before implementing it.

66. A/B TESTING
➤ We test variation of a design to
misure what is working and
testing assumptions.

68. SOME TOOLS (MOSTLY FREE)
➤ Zurb Free apps (design critique)
http://www.spurapp.com/
http://www.clueapp.com/
➤ Heuristic (http://www.uxcheck.co/)
➤ http://uxchecklist.github.io/
➤ Hotjar
See how visitors are really using your website, collect user
feedback and turn more visitors into customers.
➤ Google Analytics
➤ Balsamiq, Axure, UXpin, Omnigraffle, Adobe, Sketch
➤ Invision App
➤ Trello
➤ etc

69. EXTRA

77. PRINT AND REMEMBER
➤ UXD is a process
➤ UX is holistic
➤ Empathy
➤ Fail early, fail often
➤ UX is a Lifecycle
➤ UX is a Conversation
➤ Outcomes rather than Outputs
➤ Share share share
➤ Design with Intent

78. SOME SOURCES
➤ https://www.nngroup.com (Nielsen Norman Group)
➤ http://boxesandarrows.com/
➤ http://www.uxapprentice.com/
➤ http://www.uxbooth.com/
➤ http://uxmag.com/
➤ http://uxdesign.com/
➤ http://jnd.org/
➤ https://www.interaction-design.org/
➤ http://www.uxforthemasses.com/
➤ http://www.dtelepathy.com/blog/
➤ http://uxdesign.cc/ (newsletter)
➤ google it :-)

79. “Good design is good business.
-IBM CEO

80. EVANGELIZE !

81. THANK YOU
Federico Pizzutto
federico@pngised.net
https://it.linkedin.com/in/federicopizzutto
https://about.me/federico.pizzutto
IDF - https://www.facebook.com/groups/idf.cagliari/